jQuery action when .load() is done

Question

I am trying to have an action that starts when my load() request is done, but the alert never shows up. The load() request works since I can see the content of mypage.html in my .haha div. This is the really simple code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Hello
<div class="haha"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.haha').load('mypage.html', function(xhr) {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                alert('TEST TEST'); 
            }
            alert('TEST TEST'); 
        });
    });
</script>

None of the alerts shows up.

EDIT : In my console i have this :

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
FAToolbar.js:1 Uncaught TypeError: $.cookie is not a function

Well, with the XHR status it's supposed to tell me when my request is done and ready. But nevertheless, with or whitout it, it doesnt work — Bidoubiwa, Dec 21 '15 at 10:59
you don't need to check it. adding function at the end it will works. remove the if, and the function vars. **$('.haha').load('mypage.html', function() {alert('TEST TEST')});** — Vixed, Dec 21 '15 at 11:01
I tried that in the begining. I went looking for that xhr condition because it didn't work with your sugestion. Here's the website : http://corleonesi.forumactif.org/h3-foufou — Bidoubiwa, Dec 21 '15 at 11:04
Take a look http://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script — Vixed, Dec 21 '15 at 11:17
I don't have the error message in my console anymore, but i still don't see the alerts. — Bidoubiwa, Dec 21 '15 at 11:27
Another stuff, use the last version of jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js — Vixed, Dec 21 '15 at 11:31
call jquery just one time on your page, you're calling it two times — Vixed, Dec 21 '15 at 11:39
just another little think: **you sre loading the same page in a div which is in it** $('.haha').load('/g3-testeurs', — Vixed, Dec 21 '15 at 11:50

score 4 · Accepted Answer · answered Dec 21 '15 at 10:47

4

If you check the documentation for load() you'll see that the xhr object is the third parameter passed to the callback function. Your code is most likely generating a syntax error in trying to access properties of the returned string which don't exist, which is stopping further execution. Try this:

$('.haha').load('mypage.html', function(response, status, xhr) { // note the extra params
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
        alert('TEST TEST'); 
    }
    alert('TEST TEST'); 
});

answered Dec 21 '15 at 10:47

Rory McCrossan

331,213
40
305
339

Oke so i tried it : http://corleonesi.forumactif.org/h3-foufou (sorry i can't do a jsfiddle because of the load()) It still doesn't show the alerts – Bidoubiwa Dec 21 '15 at 10:56
In my console, i have that : " Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. FAToolbar.js:1 Uncaught TypeError: $.cookie is not a function " – Bidoubiwa Dec 21 '15 at 10:57
The first is a warning, not an error, and is because you've set `async: false` somewhere in your code - I strongly suggest you remove it. The second error is because you haven't included the jQuery cookie plugin before attempting to use it. Neither of these errors are related to the code you've shown in your question though. – Rory McCrossan Dec 21 '15 at 11:12
I can see you're still getting the `$.cookie` error though. – Rory McCrossan Dec 21 '15 at 11:28
It's oke ! I found a CDN ! for the cookie plugin ! It show the alerts now. – Bidoubiwa Dec 21 '15 at 11:39
Well, now my page is blank but i'm gonna look what the new problem is :) SO MUCH THANKS. – Bidoubiwa Dec 21 '15 at 11:40

score 0 · Answer 2 · answered Dec 21 '15 at 13:49

first,the function load 's callback parameter is only called after request has completed, so you don't have to check xhr.readyState == 4.
second,you load a html via the function load,and i guess that the page mypage.html include some javascript code , and some code call the function $.cookie which is not include in the page.So the error print in you console product by you js code from the page mypage.html.

jQuery action when .load() is done

2 Answers2