Reputation: 90
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
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
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