Load Jquery after async ajax update in asp.net

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.

Have you tried calling the ScriptManager.RegisterStartupScript Method in your code behind when a post back occurs to reissue your OnLoadPage function? — Thomas C. G. de Vilhena
– Thomas C. G. de Vilhena, Commented Aug 15, 2012 at 1:28

Adil · Accepted Answer · 2012-08-15 02:07:37Z

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

edited Aug 15, 2012 at 2:07

answered Aug 15, 2012 at 1:39

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Over a year ago

OnLoadPage() is a javascript function.. so i cant call it in EndRequestHndler..?

Adil Over a year ago

Yes you can call it 100%. I have updated my answer and given msdn link, msdn.microsoft.com/en-us/library/bb397432.aspx

Collectives™ on Stack Overflow

Load Jquery after async ajax update in asp.net

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related