CODEWITHSUNDEEP
asp.netjqueryupdatepanel
webnoob
webnoob

Reputation: 15934

ASP.NET UpdatePanel stopping JQuery from working

I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:

Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);

which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?

Details: ASP.NET 2, IIS7

Thanks in advance.

Upvotes: 0

Views: 1653

Answers (3)

user1780336
user1780336

Reputation: 119

I used update panel just only to stop the whole page refresh in asp.net which even included the jquery.But after using the update panel somewhat the problem was solved but created another problem. jquery script was not working inside the updatepanel.

This issue is now solved.

Example: In case of jquery Date picker, Usual call of Jquery script appears like this :

<script type="text/javascript">
    $(function() {
        $("#datepickers").datepicker({
                showOn: "button",
                 buttonImage:   "images/calendar.gif",
                 buttonImageOnly: true
                 });
          });
</script>

Even I had used the same code as 

Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);',    true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);

Solution Appears here: http://kopila.com.np/ But it didnt worked for me.Later I came to know that The jquery script wont work after partial postback i.e.our ajax request.If we try to call any JQuery script inside the update panel do whatever script wont work after the first ajax request.

Example: When you are using asp.net update panel call it again as follows:

<script type="text/javascript">
        function pageLoad(sender, args) {

            if (args.get_isPartialLoad()) {

                $("#datepickers").datepicker({
                    showOn: "button",
                    buttonImage: "images/calendar.gif",
                    buttonImageOnly: true
                }); 

            }

        }
</script>

For More Details Go to: http://kopila.com.np

Upvotes: 1

webnoob
webnoob

Reputation: 15934

I sorted this by not using the document.ready in jQuery. Instead I used:

function pageLoad(sender, args) { //code }

I haven't seen any adverse effects yet so hopefully this will sort my issue.

Upvotes: 1

James Westgate
James Westgate

Reputation: 11464

The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.

To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.

Upvotes: 1

Related Questions