Question

I have a ASP.net page that is jquery heavy.

on this page I have a gridview inside a updatepanel so I can make a asynch update.

<asp:GridView ID="gvMail" runat="server" GridLines="None" 
AutoGenerateColumns="false" Width="100%" OnRowDataBound="mail_RowDataBound"
CssClass="gridview" DataKeyNames="id">


<HeaderStyle HorizontalAlign="Left" />
<RowStyle ForeColor="#0072BC" HorizontalAlign="Left" CssClass="draggable" />

</asp:GridView>

</ContentTemplate>
</asp:UpdatePanel>

<!-- Hidden Link button for Async call back -->
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<asp:LinkButton ID="btnLoadData" onclick="btnLoadData_Click" runat="server" 
 Text="Fill GridView" CssClass="none"></asp:LinkButton> <!-- hidden-->

<a href="javascript: AsyncUpdateGridView()">A sync update</a>
<!-- testing purposes only-->

</ContentTemplate>
</asp:UpdatePanel>

so with this little hack i click hte linkbutton to update the gridview which works fine. Eventually the AsyncUpdateGridView() which just calles the _dopostback method of the hidden linkbutton will be in Javascript.

The problem I have, is my GridView has columns which are Jquery DatePickers and Jquery fancy Drop Down Box’s. They are loaded with this javascript call:

  function OnLoadPage() {
            $(".jqueryselector").selectbox({
                effect: "fade"
            });

            $(".jquerydatepicker").datepicker({ dateFormat: 'dd-mm-yy' });
        }

        $(document).ready(function () {
            OnLoadPage();
        }

The reason I made the OnLoadPage() function was because I tried calling that after I did the _DoPostBack call after the update.

However this doesnt work. So now when the page fist loads, all the jquery datepicker, drop down boxs and other fancy things I have work in the GridView. But after the asynch Callback it reloads with all the default html.

Answer 1

$(document).ready is not executed after ajax panel call has finished and html block is updated. You need to register to events provided by asp.net ajax for this. You can use begin_request and end_request for executing some javascript before and afterr ajax call, If you want to call the javascript function after the completion of ajax call you need to use end_request and for before ajax call you need begin_request, More about them over here

   function OnLoadPage() {
        $(".jqueryselector").selectbox({
            effect: "fade"
        });

        $(".jquerydatepicker").datepicker({ dateFormat: 'dd-mm-yy' });
    }


Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);


Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);


function BeginRequestHandler(sender, args)
{

}

function EndRequestHandler(sender, args)
{
     OnLoadPage();
}