ASP.NET UpdatePanel preventing jQuery slider from updating

Question

I have a website that is displaying data from a database and I'm having trouble getting the jQuery widgits to update properly with the other asp.net objects.

The website structured like this:

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

A jQuery DatePicker is attached to the DateSelectTextBox. The four items on top trigger a page update by changing the data displayed in the table. The UpdateProgressText tells the user that the data is loading while the page is being updated.

At first, I had everything in an asp:UpdatePanel. When I tried to change the TimeSelect's max value, the slider's UI wouldn't update. Even if I tried creating a new jQuery Slider with the new max value in pageLoad(), which I read is called whenever a piece of the page is loaded.

Then I tried taking out everything out of the asp:UpdatePanel except for the table. The jQuery slider started updating, but the asp:UpdateProgress stopped being triggered (probably because the page loading is being triggered by one of the following: (1) one of the Drop Down Lists, (2) Date Select, or (3) Time Select and none of them were in an asp:UpdatePanel.

Is there a way to make sure the jQuery Slider updates its UI while it's in an asp:UpdatePanel?

Are there general guidelines to follow when working with jQuery, javascript, and asp:UpdatePanel? I've been looking online and there are a lot of questions on the subject, but I can't find a general guideline or solution that works for me.

Thanks!

Edit: Here is a snippet my code with the "rebinding" fix suggested below to give you an idea of the struct/contents:

<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>

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

You need to rebind your jquery event at end request.

$(document).ready(function() {
        // bind your jQuery events here initially
    });

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

    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

for more detils :-jQuery $(document).ready and UpdatePanels?

edited May 23 '17 at 12:28

Community

1
1

answered Aug 01 '13 at 06:13

Sain Pradeep

3,119
1
22
31

what do you mean by rebind? do you mean recreate? My jQuery elements are still disappearing with this code. I'll add a code snippet above. – corgichu Aug 01 '13 at 16:19
From reading this documentation on bind: http://api.jquery.com/bind/, it looks like it's for event handling. My problem is that the max value isn't updating, not that the events aren't binding. Unless you think the two are related, it might not be the same thing. – corgichu Aug 01 '13 at 16:42

score 0 · Answer 2 · answered Aug 01 '13 at 06:26

We have a lot of JQuery and update panels. Here is what we are doing to make things work, for example for a tooltip:

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);
}

Usually "$(function()..." works (happens on DOM being parsed), but sometimes you must use "$(window).bind" (happens after the page has loaded).

For more info check here: http://forum.jquery.com/topic/jquery-window-bind-load-function-vs-onready

score 0 · Accepted Answer · answered Aug 13 '13 at 23:12

0

No real solution worked to get the UpdatePanels and jQuery widgits to work together. I just ended up getting rid of all the UpdatePanels and now everything works as they should.

answered Aug 13 '13 at 23:12

corgichu

2,580
3
32
46

ASP.NET UpdatePanel preventing jQuery slider from updating

3 Answers3