Nice hijax fails occasionally

Question

I use the following jquery for hijaxing. It's quite neat as it assumes the majority of links "want" hijaxing but lets those that don't "opt out" by having the class "nohijax". Why does it occasionally fail?

$("#content a:not(.nohijax), #footer a:not(.nohijax)").live("click", function () {
    $.get($(this).attr("href"), function (response) {
        $("#content").replaceWith($("#content", response));               
    });
    return false;
});

It works 100% in Chrome, 100% in IE9 on my machine, but fails infrequently in IE on other machines. The failures are not consistent. Even on a "failing" machine the hijaxing works most of the time but suddenly a clicked link will appear to "do nothing" because the old content is not replaced with the new. "Open in new tab" always works, showing that the new content is indeed sent.

I've tried to research the problem here. One has to be careful using .not() with .live() but I believe I have that right. Also the replaced element (here, a div with id="content") must not be a direct child of the body element. It isn't (there's another div in between).

If there's no obvious howler, how can I trace what's going on? (I am new to javascript and browser development). Thank you.

Andre Dublin · Answer 1 · 2013-09-16T13:36:56.067

Its good to use console.log(); to find out what data you are returning. So for example, console.log(response) will display the data in the dev tools console of your browser.

ex.

$("#content a:not(.nohijax), #footer a:not(.nohijax)").live("click", function () {
    $.get($(this).attr("href"), function (response) {

        console.log(response);

        $("#content").replaceWith($("#content", response));               
    });
    return false;
});

As for the .live function not working, I think there might be problems that IE 8 and below have with that function. You might be better off using .click(), unless the html anchors that is to be used is populated after page load.

If you are using the latest jquery 1.7 the .live() method is deprecated, but if you are not using 1.7 its recommended that you use .delegate() instead. http://api.jquery.com/live/

Thanks for your quick response Andre, it has put me on the right track and I've done a little test using .on() instead of .live(), which it supersedes as of jquery 1.7. Works nicely, but I haven't had time to check it back in the original context; I'll report back whether it fixes the problem. Thanks also for the console.log tip. Sorry I can't Vote Up your reply yet as I'm new. — EyeNine, Jan 25 '12 at 17:22

score 0 · Answer 2 · edited May 23 '17 at 12:11

This seems to have been a cache issue which I have solved with one of these techniques.

I used console.log and found that the fresh content was identical to the old. After clearing the browser cache the hijaxing worked. Having said that, it never went wrong in Chrome and I cannot see how IE thought the cached content was a match for the requested URL. It works now anyway.

In case it's useful, here is my script updated to use jquery 1.7 and .on():

$(document).on("click", "#content a:not(.nohijax), #footer a:not(.nohijax)", function () {
    $.get($(this).attr("href"), function (response) {
        $("#content").replaceWith($("#content", response)); });
    return false; });

Nice hijax fails occasionally

2 Answers2