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?

Xyan is right, I found a different dev had added a clause which checked the url path but the casing on the url was being ignore, my code wasn't being reached. I recommend adding alerts to your JS to ensure its not being called and work from there. — Adam, May 19 '16 at 08:24

score 53 · Accepted Answer · edited Feb 25 '16 at 18:50

53

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.

edited Feb 25 '16 at 18:50

Ciara

384
2
12

answered Mar 06 '12 at 15:43

El Ronnoco

11,753
5
38
65

3

It should be `Sys.WebForms.PageRequestManager.getInstance().add_endRequest(doSomething);` – ShankarSangoli Mar 06 '12 at 15:44
Is the 'Sys.WebForms.PageRequestManager' C# or javascript? – Theomax Mar 06 '12 at 15:46
2

It's Javascript - it's a routine of the Microsoft Ajax JS libraries which are loaded – El Ronnoco Mar 06 '12 at 16:01
@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`... – El Ronnoco Mar 06 '12 at 16:55
This is not working. Where should I need to put this? – Krunal May 05 '14 at 10:29
@Krunal It needs to go in JavaScript which is executed when the page first loads – El Ronnoco May 05 '14 at 11:41
@ElRonnoco I'm working on an asp.net MVC application. Should I put this on root template? – Krunal May 05 '14 at 12:08
@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. – El Ronnoco May 06 '14 at 15:42
@ElRonnoco Thanks for your response. I already posted it here.. http://stackoverflow.com/questions/23453249/jquery-range-slider-not-working-after-ajax-call-after-updating-jquery-to-1-10-2?noredirect=1#comment36052556_23453249 – Krunal May 07 '14 at 04:45
1

BeginRequest worked for me instead: window.Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(**Javascript function here **) – Lee Mar 21 '18 at 12:01

score 30 · Answer 2 · answered Mar 06 '12 at 15:45

30

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

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

answered Mar 06 '12 at 15:45

tedski

2,271
3
27
48

function pageLoad() doesn't appear to do anything. – Theomax Mar 06 '12 at 15:47
and you have an `` on the page? – tedski Mar 06 '12 at 15:50
Yes, the page has a ScriptManager – Theomax Mar 06 '12 at 15:55

pharophy · Answer 3 · 2012-05-11T00:49:02.813

17

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.

edited May 11 '12 at 00:49

answered May 10 '12 at 20:48

pharophy

771
2
8
16

1

Hi dcreight, in the page add the following: ` ` 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. – pharophy Apr 10 '13 at 01:06
1

Thank you very much! Needed it for jQueryUI Accordion in an UpdatePanel. Was trying for hours until I found this. – Andi Krusch Jul 11 '13 at 08:17

Pranay Rana · Answer 4 · 2012-03-06T15:54:16.813

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 
}

Do you mean register the javascript I want to excutue again? — Theomax, Mar 06 '12 at 15:45
@aspdotnetuser - yes liket that or as suggested in below answer you can do it easily — Pranay Rana, Mar 06 '12 at 15:47

score 3 · Answer 5 · edited Jul 06 '16 at 21:23

3

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>

edited Jul 06 '16 at 21:23

Robert

10,403
14
67
117

answered Jun 02 '16 at 20:18

Ernest

2,039
24
19

Reginardo Tribuzi Lula Júnior · Answer 6 · 2016-08-30T23:28:43.203

2

This code below works nice to solve this problem. As indicated in link posted before (http://encosia.com/document-ready-and-pageload-are-not-the-same/), when you have an asp.NET with updatePanels you shall use function pageLoad(). When you have only one page and in each postback it will be fully reloaded, the $(document).ready() is the right option.

Example using pageLoad:

    function pageLoad() {

        $(".alteraSoVirgula").keyup(function () {
            code here
        })
    }

edited Aug 30 '16 at 23:28

answered Aug 30 '16 at 16:56

Reginardo Tribuzi Lula Júnior

73
1
7

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 Aug 30 '16 at 17:18
Yes, very nice job. – Mike_OBrien Aug 31 '16 at 04:29

score 0 · Answer 7 · answered Jul 07 '16 at 06:07

I was also facing the same problem but i found the jQuery $(document).ready event handler works when page loads, but after ASP.Net AJAX UpdatePanel Partial PostBack it does not get called. so use Sys.Application.add_load(function(){}); instead of $(document).ready. This works perfectly for me :)

<script> Sys.Application.add_load(function() { //Your code }); </script>

score 0 · Answer 8 · answered Jan 23 '21 at 15:31

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

//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_endRequest(function (sender, e) {
        if (sender._postBackSettings.panelsToUpdate != null) {
            PreRoles();
        }
    });
};

function PreRoles() {
    // Add codes that should be called on postback
}

score -2 · Answer 9 · answered Nov 09 '14 at 11:05

-2

Most of the times, this is happening because of the Updatepanle. Just put postback triggers to the button and it will solve this.

answered Nov 09 '14 at 11:05

Kasun Koswattha

2,302
2
12
20

Document.Ready() is not working after PostBack

9 Answers9

Linked