CODEWITHSUNDEEP
javascriptjquerysafari
Will Cavanagh
Will Cavanagh

Reputation:

JavaScript error in Safari, only sometimes

I have a webpage that is using jQuery to hide divs on the page load and show them later based on user interactions.

In my $(document).ready() I execute a bunch of code to hide these divs and to bind a function to the click() handler from jQuery for the regions that trigger showing these divs. It also grabs some values out of the HTML to be used by scripts later. The latter is what's causing an issue.

This code works fine in Firefox and Chrome/Chromium (we're still working on the CSS for IE, but the JS works as far as I can tell). In Safari, it works flawlessly about 70% of the time. Every few page loads however, a line in my $(document).ready() gives me an error and stops the JS from executing, also halting the drawing of HTML for the rest of the page.

the line is:

    var itemCount = document.getElementById('itemCount').innerHTML;

The debug console in Safari says "Null Value". The thing is, I see the following in my HTML (from the "view source" of the page after it failed to load right):

    <div id="itemCount" style="display:inline">0</div>

and it is the only item with this id (obviously.)

I'm thinking that somehow the JS is getting run before the document is actually ready, and was thinking I'd try testing to see if document.getElementById('itemCount') returns null and wait for a bit if it does, but I don't know if this would work, or if there is a less ugly solution.

Let me know if I'm missing something obvious, or being dumb some other way.

Upvotes: 2

Views: 2266

Answers (2)

Crescent Fresh
Crescent Fresh

Reputation: 116980

Seems to be an old bug. See ticket 1319 and ticket 4187.

See this potential workaround:

After some experimenting and deleting 99% of this post :) - adding an empty style tag dinamically magically fixes the problem:

(function(){
    if (!/WebKit/i.test(navigator.userAgent)) return;
    var el = document.createElement("style");
    el.type = "text/css";
    el.media = "screen, projection";
    document.getElementsByTagName("head")[0].appendChild(el);
    el.appendChild(document.createTextNode("_safari {}"));
})();

Upvotes: 0

Warren Young
Warren Young

Reputation: 42343

From the way your code is written, I think there must be some other error on the page that is causing this. Your first code block should be:

var itemCount = $('#itemCount').html();

...and the second:

<span id="itemCount">0</span>

A <div> set to be displayed inline is a <span>. A <span> set to be a block-level element is a <div>. That's the only reason there are the two tags. They're otherwise identical. Use the right one for the task.

Not that I expect either of these changes to change your symptom. I just suspect you have other...questionable things on your page, and that's what's really causing the problem. Wild guess: move the <script> block containing the ready() handler to the bottom of the document's <body>.

If you're not already using Safari 4, by all means do so. Turn on the Develop menu in the advanced preferences, then say Develop > Show Web Inspector before loading your page. If there are errors, it will do a better job of showing you why than Safari 3.

Upvotes: 1

Related Questions