How to craft simple defer on success of JQuery statement

Question

I'm trying to craft a simple way to defer subsequent JQuery/JavaScript code execution until after this statement is performed and the variable cache[url] has the object returned to it by the .load() operator:

cache[url] = $('<div class="bbq-item"/>').appendTo('.bbq-content').load(url);

This statement occurs in the middle of a hashchange listener function:

$(window).on( 'hashchange', function(e) {
    etc.

...and I cannot move the code dependent on the success of the .load() outside of it.

It does not rely on external PHP, JSON, or anything that the typical AJAX "deferred" and "when" operators seem to thrive upon in the examples I've found online; this is pure DOM interrogation and manipulation via Javascript/JQuery.

I've tried wrapping the code that needs to follow it (and is dependent on its success) by wrapping it in a simple "if" clause, like this:

if (cache[url] = $('<div class="bbq-item"/>').appendTo('.bbq-content').load(url)) {
    [...code that is dependent on success of the .load()...]
}

...but that doesn't always work, as the loading takes longer than the evaluation in some cases, it seems.

What would be the best strategy to accomplish this?

@Tom _"It will be an object."_ Yes, what would be expected properties , values of object ? jQuery object reference to created element `'
'` ? — guest271314, Oct 01 '15 at 03:19
You'd need to see the larger context; the HTML is valid and the result of the JQueryBBQ routines in the code allow the result of this to be a JQuery object. — Tom, Oct 01 '15 at 03:20
@Daemedeor _"divs aren't selfclosing...... so its invalid html...."_ See http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — guest271314, Oct 01 '15 at 03:25
@Tom _"need to see the larger context; the HTML is valid and the result of the JQueryBBQ routines in the code allow the result of this to be a JQuery object."_ ? Yes. `cache[url] = $('
').appendTo('.bbq-content').load(url);` is synchronous , `.load()` is asynchronous . Caching `'
'` to array item would occur immediately , `.load()` may not be complete immediately — guest271314, Oct 01 '15 at 03:28
@Daemedeor _"can make the element in jquery that isn't the issue and just because it can be done, doesn't mean it should"_ ? Is comment attempting to indicate `$("
")` should not be used to create new element ? _"may not complete immediately" means its async"_ Yes — guest271314, Oct 01 '15 at 03:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91043/discussion-between-guest271314-and-daemedeor). — guest271314, Oct 01 '15 at 03:33
If *this is pure DOM interrogation and manipulation*, then why use `.load ()`, which is an ajax shorthand method? — Roamer-1888, Oct 01 '15 at 17:40

Daemedeor · Answer 1 · 2015-10-01T01:40:44.247

2

According to the documentation located here (http://api.jquery.com/load/), you can pass a callback function .load( url [, data ] [, complete ] ) into load and then call it so it would like this:

 $('<div class="bbq-item"/>').appendTo('.bbq-content').load(url, function(responseText, textstatus){
   cache[url] = responseText;
   if(textStatus === "success" || textStatus === "notmodified"){
      [...code that is dependent on success of the .load()...]
   }
 });

Edit: this is the closest you can get since load always returns something into cache[url]... otherwise you won't know if its successful or not.

As a note: you'll always get the if test passing because setting a variable will always pass truthy to the conditional so doing if(cache[url] = $.load()) will always evaluate

edited Oct 01 '15 at 01:40

answered Oct 01 '15 at 00:18

Daemedeor

1,013
10
22

Yes, I'm aware of that. However, putting the success-dependent code into an internal result function like that produces undesirable results elsewhere in the application. – Tom Oct 01 '15 at 01:28
1

@Tom However, there is no other way to tell if its successfull or not since its async method. If putting that code into the callback breaks the rest of the app, maybe there is a time to evaluate how that logic flow works and rework it, I can help and update the answer if you post the entire flow but as far as your question goes, this is the only type of answer you can get – Daemedeor Oct 01 '15 at 01:58
This is about the best I can do: `var returnObject = '';` `while (!isObject(returnObject)) { returnObject = $('
').appendTo('.bbq-content').load(url);}` `cache[url] = returnObject;` – Tom Oct 01 '15 at 03:21
With this function: `function isObject (item) { return (((typeof item) === "object") && (!Array.isArray(item)) && (item !== null)); }` – Tom Oct 01 '15 at 03:22
@Tom if there's no absolute on way, i suppose or you could do timeout, but i'm telling you, this seems ill advised, very very ill advised – Daemedeor Oct 01 '15 at 03:29
@Tom `var returnObject = ''; while (!isObject(returnObject)) { returnObject = $('
').appendTo('.bbq-content').load(url);} cache[url] = returnObject;` ? This will not return results described at Question . `.load()` complete function is asynchronous. `returnObject = $('
').appendTo('.bbq-content').load(url);` will not wait until `.load()` completes before setting `.bbq-item` element as `returnObject` – guest271314 Oct 01 '15 at 03:53
I discovered the cause of the problem. The loaded content includes an , and successive code depends upon successful loading of the . The onLoad() in the function in question doesn't account for loaded images, just processed code that's been queued. So I added an onload="myfunction()" operator to the image tag, with appropriate responsive code in myfunction() to signal my routine that everything has in fact loaded, and that works...EXCEPT on Firefox, see here: https://stackoverflow.com/questions/32927064/onload-event-in-img-tags-firing-prematurely-in-firefox-not-other-browsers – Tom Oct 05 '15 at 17:33

How to craft simple defer on success of JQuery statement

1 Answers1