Document.Ready() is not working after PostBack

Question

I have a page that contains a user control within an update panel. $(document).ready(function() ) { is called and executes the code correctly when the page firsts loads but if the user clicks a button (within the user control), the document.ready() doesn't get called (document.load, onload also don't work)

I have researched this on the net and found similar problems but nothing that can explain why this isn't working. What other causes can there be for document.ready not working?

Solution 1

This will be a problem with partial postback. The DOM isn't reloaded and so the document ready function won't be hit again. You need to assign a partial postback handler in JavaScript like so...

function doSomething() {
   //whatever you want to do on partial postback
}

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

The above call to add_endRequest should be placed in the JavaScript which is executed when the page first loads.

Solution 2

Instead of $(document).ready you could use function pageLoad(){}.

It's automatically called by the ScriptManager on a page, even on a postback.

Solution 3

I've run into this a while ago, as El Ronnoco said, it has to go with the DOM not being reloaded. However you can simply change $(document).ready(function() { to

Sys.Application.add_load(function() {

This will force it to run on every postback.

You can use function pageLoad() as well, but you can only have one pageLoad function, whereas with Sys.Application.add_load, you can add as many handlers as you wish.

Solution 4

Bestest way is

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(LoadScript);
     </script>
 you hemla code gose here 
</ContentTemplate>
    </asp:UpdatePanel>

Javascript function

<script type="text/javascript">

        function LoadScript() {
            $(document).ready(function() {

                   //you code gose here 
                                    });
         }
</script>

or

Its under UpdatePanel than you need to register client script again using

ScriptManager.RegisterClientScript

or

$(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
    loadscript();

});


$(document).ready(loadscript);

function loadscript()
{
  //yourcode 
}

Solution 5

This is an example that worked for me in the past:

<script>
function MyFunction(){ 
    $("#id").text("TESTING");
}
//Calling MyFunction when document is ready (Page loaded first time)
$(document).ready(MyFunction); 

//Calling MyFunction when the page is doing postback (asp.net)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
</script>

View more solutions

Comments

[ShankarSangoli]

It should be Sys.WebForms.PageRequestManager.getInstance().add_endRequest‌​(doSomething);

[Theomax]

Do you mean register the javascript I want to excutue again?

[Theomax]

Is the 'Sys.WebForms.PageRequestManager' C# or javascript?

[Pranay Rana]

@aspdotnetuser - yes liket that or as suggested in below answer you can do it easily

[Theomax]

function pageLoad() doesn't appear to do anything.

[tedski]

and you have an <asp:ScriptManager runat="server" /> on the page?

[Theomax]

Yes, the page has a ScriptManager

[El Ronnoco]

It's Javascript - it's a routine of the Microsoft Ajax JS libraries which are loaded

[El Ronnoco]

@aspdotnetuser Sorry - that's because I'd put doSomething() as the argument to add_endRequest - I believe that add_endRequest only accepts a single function reference as argument. Obviously putting doSomething() as the argument would pass the return value of doSomething to add_endRequest...

[pharophy]

Hi dcreight, in the page add the following: <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/path/to/file.js" /> </Scripts> </asp:ScriptManager> Then in the external file (file.js), do the following: Sys.Application.add_load(function() { //insert code here to do on every postback }); The problem with using the function pageLoad() {} approach is that you can only have one of these in a page, vs my approach above you can add as many add_load functions as you want. If you still have trouble please send the error or sample code.

[Andi Krusch]

Thank you very much! Needed it for jQueryUI Accordion in an UpdatePanel. Was trying for hours until I found this.

[Krunal]

This is not working. Where should I need to put this?

[El Ronnoco]

@Krunal It needs to go in JavaScript which is executed when the page first loads

[Krunal]

@ElRonnoco I'm working on an asp.net MVC application. Should I put this on root template?

[El Ronnoco]

@Krunal - I'm not sure about that, I don't do MVC I'm afraid. I don't even know if you will have Sys.WebForms.PageRequestManager in an MVC project. Your issues sounds like it could be completely different. I would advise posting a new question.

[Krunal]

@ElRonnoco Thanks for your response. I already posted it here.. stackoverflow.com/questions/23453249/…

[Mike_OBrien]

Your answer does touch on some of the same ideas as the other answers that have been submitted(and the accepted answer) but it contains a lot of extra fluff that is specific to wherever you originally wrote this code. To get more positive feedback on your answer I would suggest removing anything that is not specific to the question being asked and add an explanation as to why your solution fixes the problem.

[Mike_OBrien]

Yes, very nice job.

[Lee]

BeginRequest worked for me instead: window.Sys.WebForms.PageRequestManager.getInstance().add_beg‌​inRequest(**Javascri‌​pt function here **)