jQuery when if/else are done

Question

If got a problem using jQuery and I don't know how to fix it. Simply said Ive got the following:

var overlay;

if(condition == "test") {
    overlay = $("<div></div>");
}
else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
}

console.log("second-log");
overlay.prependTo("body");

If the condition matches the 'if', everything works fine, the overlay is filled with content and will prepend to the body.

While the condition matches the 'else if', I get a error that overlay is undefined.

So I've putted some console.log()'s to see what my code is doing. Both console.log action are fired, but in my browser console I'm first seeing the 'second-log' and after that the 'first-log'.

My code is trying prepend before the 'if / else if' is finished, even if the condition matches.

I tried looking for a answer but I couldn't find anything at all so I hope someone here can help me out. Thanks!

jsfiddle of my code

Answer 1

You should initialize the var overlay at the beginning of your program.

Answer 2

I solve this kind of problems mostly with a callback or promises. With callback you could try this:

var overlay = $("");

testCondition = function(callback) {

  if(condition == "test") {
    overlay = $("<div></div>");
  }
  else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
  }

  callback(overlay);

}

and call this function like this:

testCondition(function(callback){
   overlay.prependTo("body");
});

Here is a fiddle

As you can check in console, the right element gets prepended ;)

Answer 3

There dosen't seem to be anything wrong with your code, I just tested it and it's working!

Your code tested - http://jsfiddle.net/9Pb7u/

If all else fails a simple fix would be to put the prependTo inside the if statements - Also make sure you add some text or styling to the div and span otherwise they probably won't be visible until you look at the source.

if(condition == "test") {
    $("<div>TEST</div>").prependTo("body");
} else if (condition == "test2") {
    $("<span>TEST 2</span>").prependTo("body");
}

Working http://jsfiddle.net/9f93d/

Answer 4

The key to the problem is in your update with the jsfiddle code. Based on your jsfiddle link, it seems to have this basic structure:

if (resource=="iframe") {
  console.log("resource is iframe");

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
    });
}

console.log("at the end - one of the above log statements should be hit");

However, I assume the problem you tried to simplify for the question is that your case for handling resource=="json" isn't being hit.

This is likely because the call to getJSON is executing asynchronously - the function inside that if block is not executing inline, when you expect it, but later, when the getJSON call has results, and after the rest of the outer function has finished execution

One way of fixing this is by changing the structure using a callback (similar to Igle's answer) to make sure your handling code isn't executed until afterwards:

function executeAfterIf() {
    console.log("at the end - one of the above log statements should be hit");
}

if (resource=="iframe") {
  console.log("resource is iframe");
  executeAfterIf();

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
        executeAfterIf();
    });
}

In this basic refactoring, executeAfterIf is the callback function called after either case of your if block is handled.

There are, of course, other patterns to handle this sort of thing; which one you choose depends on the code in the rest of your project.