[jQuery] Re: load callback doesn't wait for completion
can you post a snippet or test page of how you're using the load method? it's really hard to figure out why it might not be working without any code samples. On Sep 25, 5:07 pm, rodeored wrote: > How do I get the callback for load() to wait until the load is > complete?
[jQuery] Re: .load() callback
I've had a minor success now that it's defined inside document.ready, one of
the pages is now working, however my main nav bar (
NameText etc etc ) isn't working.
You can see the page at:
http://www.ispycreativity.com/concept07.htm
the relevant jQuery is at
http://www.ispycreativity.com/scripts/global.js
Thanks for the significant time you guys have committed to helping me =).
ricardobeat wrote:
>
>
> You are defining your watchLinks function outside document.ready, so
> it's not available. it should look like this (pay attention to the
> closing brackets/parenthesis, you had extra ones at the end):
>
> $(document).ready(function(){
> / CHECK URL
> var pageHash = window.location.hash.substr(1);
>
> if( pageHash == "" ) openPage("home");
> else openPage(pageHash);
>
> watchLinks(); //Watch the links
> pictureIt('graphics/bg/ploughedfield.jpg');
>
> // WATCH LINKS
> function watchLinks() {
> $(document).click(function(e) {
>var $linkClicked = $(e.target);
>if( $linkClicked.is("a") ) {
> var youWantToGoTo = $linkClicked.attr('href').slice(0,-4);
> openPage(youWantToGoTo); // Open destination
> window.location.hash = youWantToGoTo; // Set the url #
> return false;
>};
> });
> };
>
> });
>
> cheers,
> - ricardo
>
> On Jan 11, 10:01 am, BlueStunt wrote:
>> This still doesn't work, I've stripped it down to this:
>>
>> $(document).click(function(e)
>> {
>> var $linkClicked = $(e.target);
>> if( $linkClicked.is("a") )
>> {
>> alert("Hi");
>> return false;
>> }
>> });
>>
>> but nothing registers, the return false doesn't work and neither is there
>> an
>> alert.
>>
>> Here's the relevant jquery in full:
>>
>> $(document).ready(function()
>> {
>> //
>> CHECK
>> URL
>> var pageHash = window.location.hash.substr(1);
>>
>> if( pageHash == "" ) // If empty open HOME
>> {
>> openPage("home");
>> }
>>
>> else
>> {
>> openPage(pageHash); // Else open relevant
>> }
>>
>> watchLinks(); // Watch the links
>> pictureIt('graphics/bg/ploughedfield.jpg');
>>
>> });
>>
>>
>>
>> WATCH
>> LINKS
>> function watchLinks()
>> {
>> $(document).click(function(e)
>> {
>> var $linkClicked = $(e.target);
>> if( $linkClicked.is("a") )
>> {
>> var youWantToGoTo =
>> $linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
>> Determine destination
>> openPage(youWantToGoTo); // Open destination
>> window.location.hash = youWantToGoTo; // Set the url #
>> return false;
>> }
>> });
>> };
>> });
>> };
>>
>>
>>
>> malsup wrote:
>>
>> >> I've read through both the link you suggested
>> >>
>> andhttp://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips...
>> >> but I can't understand how I would make event delegation work for me.
>>
>> >> This is what I attempted:
>>
>> >> function watchLinks()
>> >> {
>> >> $("a").click(function(e)
>> >> {
>> >> var linkClicked = $(e.target);
>> >> if( linkClicked.is("a"))
>> >> {
>> >> var youWantToGoTo =
>> >> linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
>> >> Determine destination
>> >> openPage(youWantToGoTo); // Open destination
>> >> window.location.hash = youWantToGoTo; // Set the url #
>> >> return false;
>> >> }
>> >> });
>> >> };
>>
>> > Don't bind the anchors, bind the document:
>>
>> > $(document).click(function(e) {
>> > var $el = $(e.target);
>> > if ($el.is('a')) {
>> > var href = $el.attr('href');
>> > var hash = href.substr(0,href.length-4);
>> > openPage(hash);
>> > window.location.hash = hash;
>> > return false;
>> > }
>> > });
>>
>> --
>> View this message in
>> context:http://www.nabble.com/.load%28%29-callback-tp21389522s27240p21398423
>> Sent from the jQuery General Discussion mailing list archive at
>> Nabble.com.
>
>
--
View this message in context:
http://www.nabble.com/.load%28%29-callback-tp21389522s27240p21423890.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: .load() callback
You are defining your watchLinks function outside document.ready, so
it's not available. it should look like this (pay attention to the
closing brackets/parenthesis, you had extra ones at the end):
$(document).ready(function(){
/ CHECK URL
var pageHash = window.location.hash.substr(1);
if( pageHash == "" ) openPage("home");
else openPage(pageHash);
watchLinks(); //Watch the links
pictureIt('graphics/bg/ploughedfield.jpg');
// WATCH LINKS
function watchLinks() {
$(document).click(function(e) {
var $linkClicked = $(e.target);
if( $linkClicked.is("a") ) {
var youWantToGoTo = $linkClicked.attr('href').slice(0,-4);
openPage(youWantToGoTo); // Open destination
window.location.hash = youWantToGoTo; // Set the url #
return false;
};
});
};
});
cheers,
- ricardo
On Jan 11, 10:01 am, BlueStunt wrote:
> This still doesn't work, I've stripped it down to this:
>
> $(document).click(function(e)
> {
> var $linkClicked = $(e.target);
> if( $linkClicked.is("a") )
> {
> alert("Hi");
> return false;
> }
> });
>
> but nothing registers, the return false doesn't work and neither is there an
> alert.
>
> Here's the relevant jquery in full:
>
> $(document).ready(function()
> {
> // CHECK
> URL
> var pageHash = window.location.hash.substr(1);
>
> if( pageHash == "" ) // If empty open HOME
> {
> openPage("home");
> }
>
> else
> {
> openPage(pageHash); // Else open relevant
> }
>
> watchLinks(); // Watch the links
> pictureIt('graphics/bg/ploughedfield.jpg');
>
> });
>
>
> WATCH
> LINKS
> function watchLinks()
> {
> $(document).click(function(e)
> {
> var $linkClicked = $(e.target);
> if( $linkClicked.is("a") )
> {
> var youWantToGoTo =
> $linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
> Determine destination
> openPage(youWantToGoTo); // Open destination
> window.location.hash = youWantToGoTo; // Set the url #
> return false;
> }
> });
> };
> });
> };
>
>
>
> malsup wrote:
>
> >> I've read through both the link you suggested
> >> andhttp://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips...
> >> but I can't understand how I would make event delegation work for me.
>
> >> This is what I attempted:
>
> >> function watchLinks()
> >> {
> >> $("a").click(function(e)
> >> {
> >> var linkClicked = $(e.target);
> >> if( linkClicked.is("a"))
> >> {
> >> var youWantToGoTo =
> >> linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
> >> Determine destination
> >> openPage(youWantToGoTo); // Open destination
> >> window.location.hash = youWantToGoTo; // Set the url #
> >> return false;
> >> }
> >> });
> >> };
>
> > Don't bind the anchors, bind the document:
>
> > $(document).click(function(e) {
> > var $el = $(e.target);
> > if ($el.is('a')) {
> > var href = $el.attr('href');
> > var hash = href.substr(0,href.length-4);
> > openPage(hash);
> > window.location.hash = hash;
> > return false;
> > }
> > });
>
> --
> View this message in
> context:http://www.nabble.com/.load%28%29-callback-tp21389522s27240p21398423
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: .load() callback
> This still doesn't work, I've stripped it down to this:
>
> $(document).click(function(e)
> {
> var $linkClicked = $(e.target);
> if( $linkClicked.is("a") )
> {
> alert("Hi");
> return false;
> }
> });
>
> but nothing registers, the return false doesn't work and neither is there an
> alert.
>
> Here's the relevant jquery in full:
>
> $(document).ready(function()
> {
> // CHECK
> URL
> var pageHash = window.location.hash.substr(1);
>
> if( pageHash == "" ) // If empty open HOME
> {
> openPage("home");
> }
>
> else
> {
> openPage(pageHash); // Else open relevant
> }
>
> watchLinks(); // Watch the links
> pictureIt('graphics/bg/ploughedfield.jpg');
>
> });
>
>
> WATCH
> LINKS
> function watchLinks()
> {
> $(document).click(function(e)
> {
> var $linkClicked = $(e.target);
> if( $linkClicked.is("a") )
> {
> var youWantToGoTo =
> $linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
> Determine destination
> openPage(youWantToGoTo); // Open destination
> window.location.hash = youWantToGoTo; // Set the url #
> return false;
> }
> });
> };
> });
> };
Are you getting any errors in Firebug? Have you tried logging the
event target to the Firebug console so you can see what it is? Can
you post a link that shows this code running? Can you run a simple
test like this:
$(document).click(function() {
alert('test');
});
[jQuery] Re: .load() callback
This still doesn't work, I've stripped it down to this:
$(document).click(function(e)
{
var $linkClicked = $(e.target);
if( $linkClicked.is("a") )
{
alert("Hi");
return false;
}
});
but nothing registers, the return false doesn't work and neither is there an
alert.
Here's the relevant jquery in full:
$(document).ready(function()
{
// CHECK
URL
var pageHash = window.location.hash.substr(1);
if( pageHash == "" ) // If empty open HOME
{
openPage("home");
}
else
{
openPage(pageHash); // Else open relevant
}
watchLinks(); // Watch the links
pictureIt('graphics/bg/ploughedfield.jpg');
});
WATCH
LINKS
function watchLinks()
{
$(document).click(function(e)
{
var $linkClicked = $(e.target);
if( $linkClicked.is("a") )
{
var youWantToGoTo =
$linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
Determine destination
openPage(youWantToGoTo); // Open destination
window.location.hash = youWantToGoTo; // Set the url #
return false;
}
});
};
});
};
malsup wrote:
>
>
>> I've read through both the link you suggested
>> andhttp://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips...
>> but I can't understand how I would make event delegation work for me.
>>
>> This is what I attempted:
>>
>> function watchLinks()
>> {
>> $("a").click(function(e)
>> {
>> var linkClicked = $(e.target);
>> if( linkClicked.is("a"))
>> {
>> var youWantToGoTo =
>> linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
>> Determine destination
>> openPage(youWantToGoTo); // Open destination
>> window.location.hash = youWantToGoTo; // Set the url #
>> return false;
>> }
>> });
>> };
>
>
> Don't bind the anchors, bind the document:
>
> $(document).click(function(e) {
> var $el = $(e.target);
> if ($el.is('a')) {
> var href = $el.attr('href');
> var hash = href.substr(0,href.length-4);
> openPage(hash);
> window.location.hash = hash;
> return false;
> }
> });
>
>
--
View this message in context:
http://www.nabble.com/.load%28%29-callback-tp21389522s27240p21398423.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: .load() callback
> I've read through both the link you suggested
> andhttp://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips...
> but I can't understand how I would make event delegation work for me.
>
> This is what I attempted:
>
> function watchLinks()
> {
> $("a").click(function(e)
> {
> var linkClicked = $(e.target);
> if( linkClicked.is("a"))
> {
> var youWantToGoTo =
> linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
> Determine destination
> openPage(youWantToGoTo); // Open destination
> window.location.hash = youWantToGoTo; // Set the url #
> return false;
> }
> });
> };
Don't bind the anchors, bind the document:
$(document).click(function(e) {
var $el = $(e.target);
if ($el.is('a')) {
var href = $el.attr('href');
var hash = href.substr(0,href.length-4);
openPage(hash);
window.location.hash = hash;
return false;
}
});
[jQuery] Re: .load() callback
I've read through both the link you suggested and
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip12
but I can't understand how I would make event delegation work for me.
This is what I attempted:
function watchLinks()
{
$("a").click(function(e)
{
var linkClicked = $(e.target);
if( linkClicked.is("a"))
{
var youWantToGoTo =
linkClicked.attr('href').substr(0,$(this).attr('href').length-4); //
Determine destination
openPage(youWantToGoTo); // Open destination
window.location.hash = youWantToGoTo; // Set the url #
return false;
}
});
};
malsup wrote:
>
>
>> I currently have a problem with the site I am designing, I'm using jQuery
>> to
>> load the content via AJAX, however. The script I'm using to watch for
>> when
>> the user clicks a link is:
>>
>> function watchLinks()
>> {
>> $("a").click(function()
>> {
>> var youWantToGoTo =
>> $(this).attr('href').substr(0,$(this).attr('href').length-4); //
>> Determine
>> destination
>> openPage(youWantToGoTo); // Open destination
>> window.location.hash = youWantToGoTo; // Set the url #
>> return false;
>> });
>> };
>>
>> currently I call the function on the $(document).ready but this means
>> that I
>> cannot watch the links that are loaded dynamically.
>>
>> eg when the users loads the 'portfolio' page the watchLinks() function
>> isn't
>> active for the links which were loaded.
>>
>> I have tried setting watchLinks() as the callback but when the user
>> quickly
>> switches between pages the javascript seems to slow down to a snails pace
>> and pages don't load for a fairly long period of time.
>>
>> Is there a more efficient method?
>
>
>
> Instead of binding event listeners to the anchors use event delegation
> instead:
>
> http://www.learningjquery.com/2008/03/working-with-events-part-1
>
>
>
--
View this message in context:
http://www.nabble.com/.load%28%29-callback-tp21389522s27240p21392901.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: .load() callback
> I currently have a problem with the site I am designing, I'm using jQuery to
> load the content via AJAX, however. The script I'm using to watch for when
> the user clicks a link is:
>
> function watchLinks()
> {
> $("a").click(function()
> {
> var youWantToGoTo =
> $(this).attr('href').substr(0,$(this).attr('href').length-4); // Determine
> destination
> openPage(youWantToGoTo); // Open destination
> window.location.hash = youWantToGoTo; // Set the url #
> return false;
> });
> };
>
> currently I call the function on the $(document).ready but this means that I
> cannot watch the links that are loaded dynamically.
>
> eg when the users loads the 'portfolio' page the watchLinks() function isn't
> active for the links which were loaded.
>
> I have tried setting watchLinks() as the callback but when the user quickly
> switches between pages the javascript seems to slow down to a snails pace
> and pages don't load for a fairly long period of time.
>
> Is there a more efficient method?
Instead of binding event listeners to the anchors use event delegation
instead:
http://www.learningjquery.com/2008/03/working-with-events-part-1
[jQuery] Re: load() callback only performs once every two click
hey ricardo, thanks for the input. I found the error: i was actually
hiding the load container somewhere else in the code. *sight*...
On Tue, Dec 30, 2008 at 5:52 AM, Ricardo Tomasi wrote:
>
> I don't see any click event handlers, and from what it looks you can't
> tell visually if the load() was successful because on the 2nd time the
> background is already red.
>
> On Dec 29, 9:07 pm, "Alexandre Plennevaux"
> wrote:
>> Strange...
>>
>> i'm loading html inside a div, and have this callback:
>>
>> $('#datascape').show().load('index.php?splash=labau',{}, function(html,
>> result)
>> {
>>
>> $('#datascape').css({background: 'red'});
>>
>> });
>>
>> yet, the callback performs only once out of 2 triggering calls.
>> Firebug does log each call correctly so it seems it's a rendering
>> issue, yet it happens in FF3, IE7 and chrome.
>>
>> Does this weirdness sound familiar to you, or any idea what's going wrong?
>>
>> Thanks,
>>
>> Alexandre
[jQuery] Re: load() callback only performs once every two click
I don't see any click event handlers, and from what it looks you can't
tell visually if the load() was successful because on the 2nd time the
background is already red.
On Dec 29, 9:07 pm, "Alexandre Plennevaux"
wrote:
> Strange...
>
> i'm loading html inside a div, and have this callback:
>
> $('#datascape').show().load('index.php?splash=labau',{}, function(html,
> result)
> {
>
> $('#datascape').css({background: 'red'});
>
> });
>
> yet, the callback performs only once out of 2 triggering calls.
> Firebug does log each call correctly so it seems it's a rendering
> issue, yet it happens in FF3, IE7 and chrome.
>
> Does this weirdness sound familiar to you, or any idea what's going wrong?
>
> Thanks,
>
> Alexandre
[jQuery] Re: $.load callback calls "hide", but element doesn't hide
I realized after I posted that the hide() function might be returning as
finished as the element is being unhidden. I'm not sure why this would
be (doesn't the element's "display" property get set to "inline"
immediately? Perhaps the "display" attrib gets set in that way on
-every- size and opacity adjustment, so it was immediately unhidden
again?)... In any case, I seem to have corrected the problem by putting
everything in a chain of callbacks, as so:
$('#content_inner').fadeOut('slow',function() {
$('#indicator').show(function() {
$.ajax({
Thanks for your time. :)
-Jess
mann_jess wrote:
> Hello there,
>
> I am experiencing some problems using $.load and $.ajax to pull
> content from a url and display it in a div. I created the attached
> example page to show what I mean.
>
> I expect that when I click the link, the indicator.gif image (or
> "Loading...") will appear for a moment, then disappear as the
> "response.html" page appears.
> Instead, sometimes the indicator.gif image doesn't disappear, leaving
> both the response.html page and the indicator.gif image on the page
> indefinitely. Also, occasionally the response.html page will not
> appear (though the content will change, the "fadeIn" effect will just
> never be called) and the indicator will stay on the page forever,
> alone.
>
> I'm sure I must be doing something wrong here, but I can't figure out
> what it is. I've tried chaining the effects in a variety of orders,
> changing the effect speeds, putting different effects in the callback,
> and using $.ajax and the "success" parameter instead of $.load with a
> callback. All yield the same result.
>
> Any help, or pointers in the right direction, would be greatly
> appreciated.
>
> Thanks,
>-Jess
>
>
>
> http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/
> jquery.min.js" type="text/javascript">
>
>
>
> Click me
>
> Some example text
>
> style="display: none; float: left;" />
>
>
> $('#test_link').click(function(e) {
> e.preventDefault();
>
> link = $(this).find('a:first').attr('href');
> $('#content_inner').hide('slow',function() {
> $('#indicator').show();
> }).load(link,function() {
> $('#indicator').fadeOut();
> $('#content_inner').fadeIn('slow');
> });
> });
>
>
>
>
>
[jQuery] Re: .load() callback and hide, show DIV problem
I'm still working on this problem, (and I have poured over the jQuery
group trying to find any answers,) and I'm realizing that maybe it's
not the callback's fault.
I'm thinking it might be more of a problem with (not only me,) but the
fact that when you click on any folder in the file tree, the script
doesn't seem to know exactly which folder you clicked on? Because it
runs through the function over and over for every file within that
folder. (for example: if I have 3 files in a folder, it runs 3
times!) And that is not the behavior I want to be happening. I want
it to run ONCE no matter how many files are inside an opened folder.
When the callback is added, it just multiplies this further and it's
getting frustrating.
Is there a way to find only the clicked folder? It might have to do
with this line:
$('img.expandImage', tree.get(0)).click()
[jQuery] Re: .load() callback and hide, show DIV problem
Is there something about using .click with a callback that I don't know? Everytime do a click on a target, the callback is called increasingly multiple times thereafter.
