Javascript: change CSS element if jquery GET failed

Question

I have a Javascript in my header that calls an external server to retrieve some information, like this:

$.getJSON("https://domain.tld/json/", function (something) {
            var results = //stuff that formats the result, not relevant here;
            window.$info = results;
    }).fail(function(){
        // here's where I need the code to make the warning appear 
        });

Then in the body I have a warning that should pop up in case the GET request failed:

<div id="warning">Warning text</div>

Problem: the javascript is in the header and I can't change the "warning" div because it has not been created yet. If I use document.getElementById("warning").style.display='block'; I get an error message saying it is null.

So how do I use the .fail() part of the jquery GET function to make the warning div appear (that is created later) in case the GET function has failed? Or is that not possible? And some 'solution' I tried (don't remember what exactly) even delayed the loading of the whole page. I'd like to avoid that as well.

Thank you for helping me out.

Have you tried wrapping your jQuery in a document ready function? That will wait for the DOM to load before executing the jQuery. — CaribouCode
– CaribouCode, Commented Oct 28, 2014 at 23:56
That did it. I didn't even have to wrap the whole jquery function in it, just the part that toggles the visibility, like: }).fail(function(){ $(document).ready(function() $("#warning").show(); }); }); — user2690888
– user2690888, Commented Oct 29, 2014 at 15:43
P.S. Ok, so comments can only be edited for 5 minutes. :) Coop, I don't know how to mark your comment as the 'correct' answer. Not possible for comments it seems. Sorry about that. And thank you all. — user2690888
– user2690888, Commented Oct 29, 2014 at 15:51
Jolly good. I've added my comment as an answer now for the befit of others. Feel free to mark it as correct if it solved your problem. — CaribouCode
– CaribouCode, Commented Oct 29, 2014 at 22:45

Alper Cinar · Accepted Answer · 2014-10-28 23:55:03Z

2

You should hide your html element initialy

<div id="warning" style="display:none;">Warning text</div>

And you can call show() method to display hidden element when get request failed

$("#warning").show();

answered Oct 28, 2014 at 23:55

Alper Cinar

8615 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CaribouCode · Accepted Answer · 2014-10-29 22:44:28Z

1

Your javascript is trying to execute and look for things before the DOM has loaded. You can solve this problem by making sure your javascript only fires when the DOM is ready. In jQuery you do that like this:

$(document).ready(function(){
  //your code here
});

The native javascript version of this is much more complicated so I won't post that here. However you could also wait for the entire page to load before executing the code like so:

window.onload = function(){
  //your code here
}

answered Oct 29, 2014 at 22:44

CaribouCode

14.5k33 gold badges113 silver badges187 bronze badges

Collectives™ on Stack Overflow

Javascript: change CSS element if jquery GET failed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related