Andrew Ng
Andrew Ng

Reputation: 90

.load jquery not working in chrome

I'm working on a project and I keep running in this particular problem that .load won't work in Google Chrome. Here's the javascript:

    function link1() {
     $('#loadarea').html('loading.....');
      setTimeout('link1_go()', 850);
    }
    function link1_go() {
      $('#loadarea').load("regular.html");
      $('#loadarea').hide().fadeIn('slow');
    }

And here's the clickable div to call the action:

<div id="link1" class="clickableload" onclick="link1()">

And then there's the container to load it in:

<div id="loadarea"></div>

It's working firefox and ie but not in chrome. Any suggestions guys?

Upvotes: 0

Views: 640

Answers (2)

Jacob
Jacob

Reputation: 78920

Try changing your setTimeout call. When you use a string parameter for setTimeout, that invokes a browser's eval function, which might not do what you expect, especially if link1_go isn't a global function. Do this instead:

setTimeout(link1_go, 850);

Upvotes: 4

zequinha-bsb
zequinha-bsb

Reputation: 719

I have, lately, being very carefull when it comes to "sequence-of-events". Whenever possible, I make sure the statements are only loaded in the sequence I want. I have had no troubles in Chrome which is my primary debugging web browser.

For the case shown, I would suggest the following fix:

function link1() {
    $('#loadarea').html( function () {
        setTimeout('link1_go()', 850);
        return '<p>loading.....</p>';
    })
}

function link1_go() {
    $('#loadarea').fadeOut().load("regular.html").fadeIn('slow');
}

Since the "loadarea" is already displaying "loading ... "; a fadeout and a fadein would be more elegant then hide() and fadeIn.

Furthermore, for the present request, I would get away with link1_go completely:

function link1() {
    $('#loadarea').html( function () {
        setTimeout("$('#loadarea').fadeOut().load('regular.html').fadeIn('slow')", 850);
        return '<p>loading.....</p>';
    })
}

Upvotes: 0

Related Questions