1

データベースからのデータを表示している Web サイトがあり、jQuery ウィジェットを他のasp.netオブジェクトで適切に更新するのに問題があります。

Web サイトは次のように構成されています。

[Opt1-DDownList] [Opt2-DDownList] [DateSelectTextBox] [TimeSelectTextBox]
                   [UpdateProgressText]           [jQuery Slider to select time]
[----------------- Table of Data depending on selected options ----------------]

jQuery DatePicker が DateSelectTextBox にアタッチされています。上部の 4 つの項目は、テーブルに表示されるデータを変更することによってページの更新をトリガーします。UpdateProgressText は、ページの更新中にデータが読み込まれていることをユーザーに伝えます。

最初は、すべてをasp:UpdatePanel. TimeSelect の最大値を変更しようとすると、スライダーの UI が更新されません。で新しい最大値を使用して新しい jQuery Slider を作成しようとしてもpageLoad()、ページの一部が読み込まれるたびに呼び出されます。

asp:UpdatePanelそれから、テーブル以外のすべてを取り出してみました。jQuery スライダーは更新を開始しましたが、asp:UpdateProgressトリガーが停止しました (おそらく、ページの読み込みが次のいずれかによってトリガーされたためです: (1) ドロップダウン リストの 1 つ、(2) 日付の選択、または (3) 時間の選択となし)それらのasp:UpdatePanel.

jQuery SliderがUIにある間にUIを更新することを確認する方法はありasp:UpdatePanelますか?

jQuery、javascript、およびを使用する際に従うべき一般的なガイドラインはありasp:UpdatePanelますか? オンラインで検索したところ、この件に関して多くの質問がありますが、自分に合った一般的なガイドラインや解決策が見つかりません。

ありがとう！

編集:これは、構造体/コンテンツのアイデアを提供するために、以下に提案されている「再バインド」修正を含む私のコードのスニペットです:

<body>
    <form id="frm" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdateData" runat="server">
        <ContentTemplate>
           <asp:DropDownList ID="dd1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList>
           <asp:DropDownList ID="dd2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList>      
            Day: <asp:TextBox ID="DaySelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>      
            Time: <asp:TextBox ID="TimeSelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>     
           <table width="850px">
             <tr>
                <td width="200px"></td>
                <td width="450px">
                   <asp:UpdateProgress ID="LoadingProgress" runat="server" DisplayAfter="500">
                      <ProgressTemplate>Loading...</ProgressTemplate>
                    </asp:UpdateProgress>
                </td>
                <td width="200px">
                      <div style="width: 200px;" id="sliceControl"></div>
                </td>
             </tr>
            </table>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" id="uiscripts">
        var sliceIndex = 0;

        var sliceControl = $("#sliceControl");
        sliceControl.slider({
            min: 0,
            ticks: 1,
            slide: function (event, ui) { OnSelectedSliceChanged(ui.value); },
            create: function (event, ui) {
                sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>");
                sliceControl.slider("value", "<%=ViewState[currentInterval]%>");
                sliceIndex = sliceControl.slider("value");
            }
        });

        function InitWidgits() {
            var datePicker = $("#DaySelect");
            datePicker.datepicker({});

            var now = new Date();
            var utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
            var numValidDays = 7;
            var millisecondsInADay = 24 * 60 * 60 * 1000;

            datePicker.datepicker("option", "minDate", new Date(utc.getTime() - numValidDays * millisecondsInADay));
            datePicker.datepicker("option", "maxDate", utc);

            try {
                sliceControl.slider("destroy");
            } catch (e) { }
            sliceControl.slider({
                min: 0,
                ticks: 1,
                stop: function (event, ui) { $("#TimeSelect").trigger("onchange", null); },
                slide: function (event, ui) { OnSelectedSliceChanged(ui.value); },
                create: function (event, ui) {
                    sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>");
                        sliceControl.slider("value", sliceIndex);
                    }
                });

                    $("#TimeSelect").prop("readonly", "readonly");
                    $("#DaySelect").prop("readonly", "readonly");
            }
        $(document).ready(function () {
            // bind your jQuery events here initially
            InitWidgits();
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            // re-bind your jQuery events here
            InitWidgits();
        });
    </script>
    [Code for Table of Data]
   </ContentTemplate>
  </asp:UpdatePanel>
 </form>
</body>
4

3 に答える 3

0

多くの JQuery と更新パネルがあります。ツールチップなど、機能させるために行っていることは次のとおりです。

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack) { ... }
    RegisterScripts(...);
}

private void RegisterScripts(...)
{
    string script = string.Empty;

    if (onWindowLoad)
    {
        script = "$(window).bind('load', function() { $('#myDiv').tooltip({...}); });";
    }
    else
    {
        script = "$(function() { $('#myDiv').tooltip({...}); });";
    }
    System.Web.UI.ScriptManager.RegisterStartupScript(Page, Page.GetType(), scriptKey, script, true);
}

通常、"$(function()..." は機能します (DOM が解析されるときに発生します) が、"$(window).bind" を使用する必要がある場合もあります (ページが読み込まれた後に発生します)。

詳細については、こちらをご覧ください: http://forum.jquery.com/topic/jquery-window-bind-load-function-vs-onready

于 2013-08-01T06:26:06.703 に答える