JS won't execute properly via AJAX call

Question

I been having an issue with my JS not doing as its told ! For ages i couldn't work out why but now i realise my script infact works fine, its actually related to my AJAX calling the script.

The page which gets the file and displays it - is where it displays incorrectly. If i access the script normally it is working perfectly fine.

Is there something to do with AJAX requests that can cause this issue :S ?

See here for the effect.

This image is correct:

http://i39.tinypic.com/34fdvu8.jpg

This is wrong (which is the same script just called via ajax and displayed):

http://i43.tinypic.com/2uysl6b.jpg

The red bar is fine.. the broke part is the fact the green bar comes out at 100% in the ajax request one but comes out at 20% when viewing the script directly (20% is the correct answer).

Any ideas why this might be ?

<head>
<script type="text/javascript">

    function percentage(){
        var perc = Math.round((500 / 2500) * 100);

        if(perc > 100)
        {perc = 100;}

        else if(perc < 0 )
        {perc = 0;}
        d = document.getElementById('health');
        d.style.width = perc + "%";
    };
    onload = percentage;
</script>
</head>
<body>
<div style="width:50%;background-color:red;min-height:15px;">   
         <div id="health" style="background-color:green;min-height:15px;"></div>
    </div>
</body>

Well the AJAX request works so didn't think it was that but here you go : http://www.paste.to/MzYyMzM0 It doesn't send any GET info on this particular request. — Sir, Mar 22 '12 at 05:11
Still makes no sence... you AJAX does not call percentage function, it reads something and than insert it as inner HTML. How it is related to your sample you've posted? Any chance that you actually trying to insert that sample HTML as innerHtml? — Alexei Levenkov, Mar 22 '12 at 05:24
my AJAX requests the script that contains the HTML script above. Not a function. The html page loads the function via onload. — Sir, Mar 22 '12 at 05:28

score 1 · Answer 1 · answered Mar 22 '12 at 05:53

1

Setting innerHTML will not run script associated with "onload" of "inner HTML document" that you try to insert:

no normal HTML elements can have HTML/HEAD as children - so will be ignored
some browsers will not even load scripts for innerHTML (i.e. see http://poeticcode.wordpress.com/2007/10/03/innerhtml-and-script-tags/)
there is no inner element that will even have onload event - only top level body (and img that you don't have).

You can either run "percentage" function (if it is inserted by innerHTML) after setting innerHTML, or render HTML in IFrame (will work fine since it will be complete pages), or restructure code so data and scripts are coming separately and wired properly.

answered Mar 22 '12 at 05:53

Alexei Levenkov

98,904
14
127
179

If your goal is to render complete page - yes, only IFrame will give you normal pages's behavior. If your goal is something else than likely there are other way of doing so. You probably should create new question stating what you want to achieve to get advises. – Alexei Levenkov Mar 22 '12 at 06:34
Well i just want it to the load the width of the div calculated via the JS - didn't realise i had to iframe it =/ – Sir Mar 22 '12 at 06:34

score 1 · Accepted Answer · answered Mar 22 '12 at 09:26

1

This is dangerous, but it may work for you.

$.get('http://url', function(data) {
    // .. your load logic hear

    // this line will execute all your script tags
    eval($(data).find('script').text());
})

note: you will still have to execute the function directly, since your javascript triggers that function onload (which will not be caught)

answered Mar 22 '12 at 09:26

rkw

7,287
4
26
39

How come you say its dangerous? – Sir Mar 22 '12 at 19:42

JS won't execute properly via AJAX call

2 Answers2