0

Alright so i have a bookmarklet that opens a loader img then creates/load/appends 5 included JS/CSS files.

In chrome,FF,IE,Opera it works fine. however in safari it has a problem.

Since firebug lite is pretty useless and safari developer tool did not throw any error i had to try and console.log() certain output to see where the problem is.

I've found out that the problem is with the loading of the includes or the way i check if the includes are loaded.

If you'll look closer on the code you'll see its the CSS includes. whats weirder is when i inspect element and scroll to the header it shows that the included file is there.

I know i could probably create a function to make this code more efficient but for now i didn't.

The code is a bit long so here is a gisthube link for it: https://gist.github.com/b443582b1ced537b7612

/* creating loading and appending include files for the bookmarklet*/
if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
var done = false;
var jquery_load = document.createElement("script");
jquery_load.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
jquery_load.setAttribute('id', 'yk_bookmarklet_jquery');
jquery_load.onload = jquery_load.onreadystatechange = function(){
    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
        loaded_headers++;
        console.log("Next1"); // <-- is being printed to console 
        if(loaded_headers >= total_headers){
            done = true;
            $.getJSON("xxxx",
                function(data){
                    /* more variables*/
                    window.mbm = false;
                    initMyBookmarklet(); // function that has the bookmarklet info.
                });
        }
    }
};

var CssScript = document.createElement("link");
CssScript.href = "xx;
CssScript.setAttribute('type', 'text/css');
CssScript.setAttribute('rel', 'stylesheet');
CssScript.setAttribute('media', 'all');
CssScript.setAttribute('id', 'yk_bookmarklet_css');
CssScript.onload = CssScript.onreadystatechange = function(){
    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
        loaded_headers++;
        console.log('Next2');// <-- DOES NOT print to console
        if(loaded_headers >= total_headers){
            done = true;
            $.getJSON("xxxx",
                function(data){
                    /* more variables*/
                    window.mbm = false;
                    initMyBookmarklet(); // function that has the bookmarklet info.
                });
        }
    }
};



/*appending the created elements*/
document.getElementsByTagName("head")[0].appendChild(jquery_load);
document.getElementsByTagName("head")[0].appendChild(yk_bookmarklet);

}

I know the code is a bit long so i will include a gist hub link to it: https://gist.github.com/b443582b1ced537b7612

Thanks.

Neta Meta
  • 4,001
  • 9
  • 42
  • 67
  • Could you clean this up a little? Make the question look presentable and professional? – Lightness Races in Orbit Jan 19 '13 at 03:46
  • Well you can log `this.readyState` to see what's going on if it's not entering that if statement – sachleen Jan 19 '13 at 03:47
  • lightness I've just removed the rest of the 5 and left only 2 includes. i was trying to be presentable and professional. i could make the code a bit shorter but from previous experience people required more information so i gave as much information as i could. i think the problem is somewhere in `if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {` – Neta Meta Jan 19 '13 at 03:49
  • Tried to run, got `v is not defined`. Also, if css is in header, then why do you think it didn't load? If you tell me you can "see" it didn't load, you need to tell us how to "see" it. – DG. Jan 19 '13 at 03:50
  • Did you test the value of `this.readyState` ? Try to put a console log before the if condition (in `CssScript.onload`, `CssScript.onreadystatechange`) – webextensions.org Jan 19 '13 at 03:51
  • V is defined above its '1.8.3' which is the version of jquery. i removed it in an attempt to make the code shorter. i am trying to "see" the code with the if statement i mentioned in previous comment – Neta Meta Jan 19 '13 at 03:53
  • Since your problem is a bit too specific ... if the above approach does not help ... I think you would need to provide a full working example here – webextensions.org Jan 19 '13 at 03:53
  • I've tried consoling `this.readyState` it returns empty i am thinking maybe `onreadystatechange` maybe doesnt work for CSS in safari? also what do you mean by full working example ? i mean the above is pretty much it. – Neta Meta Jan 19 '13 at 03:57

0 Answers0