1

When helping someone with a website that is rather large and have many includes I hit a bug and couldn't understand it. It was something like this

<script src=...></script>
<div ...
<script>
alert('myscript');
</script>

This page worked fine until I use that section of html and used jquery to ajax the content in. It broke the code but I don't understand why. I seen my alert. I can see the script is being access via the browser network log. I see some of the results of the first script tag but its broken.

Why does order matter? I thought as long as the dom is ready and the script is executed everything should be fine. But in this case being ajaxed in breaks it. I couldn't spend much time but it was curious to see something was dependent on timing.

--edit--
Also I notice if the script is already included on the page ajaxing in the content it will run fine

Does anyone have any idea why ajaxing in content breaks? When its not ajaxed in its fine.

Improve this question
6
  • 2
    You should post the code you used to ajax that into the page. There are some situations in which jQuery ignores scripts when injecting content. Commented Jan 26, 2013 at 23:23
  • Please show your code. How else are we to see what the problem is? Commented Jan 26, 2013 at 23:24
  • @Pointy: What are the situations? I have no access to said code. Commented Jan 26, 2013 at 23:25
  • possible duplicate of jquery html() strips out script tags Commented Jan 26, 2013 at 23:28
  • 1
    @acidzombie24 if you use the .load() variation that allows for a selector string after the url: $('#foo').load('http://what.ever #content-I-want', function() { ... }) then scripts in the selected chunk of content will not be executed. Commented Jan 26, 2013 at 23:33

1 Answer 1

Reset to default
1

Based on what you say, I give the following assessment :

40% likely -- it is about script load. Dependencies within the ajaxed script to other scripts, variables you define on the page, or even DOM content that is supposedly loaded could be not loaded at the time the script is ajaxed and executed. Try changing the order of the script tag on the page, putting the loading of the script inside a document ready event handler, or delaying the script execution with setTimeout or defer="defer" -- or if you are really cool create a boot loader that ensures every script is loaded and executed in the exact order you specify : by chaining sets of dependency free simultaneous loads, to sequences of dependent loads.

Script1 <---- depends on --- (Script 2.1, Script 2.2, Script 2.3 ) <--- depends on --- Script3.

So load 1 first, then all the 2. scripts, then 3.

40% likely -- it is about security model. The website where you are ajaxing it from, Where is that? What is its relation to the domain the page is on? Are you testing this on localhost ?If so there are more restrictions. What about on an actual server? Is the Access-Control-Allow-Origin header set appropriately on the ajax response?

20% likely -- it is a circular dependency between the script and the DOM. Say some event handler on element X closes on a scope that references element X. Then there will be a reference to X inside a reference to X so they can't both be garbage collected, so X will persist, cause a memory leak, and possibly create an unusable reference which could be breaking your code.

--edit--

Based on your comment about .html(...) I think .html or .load to run scripts is too messy, and may not even work at all. See .load() doesn't load scripts for a nice way to load scripts with ajax. Or you could jQuery.getScript(...).

Also I seem to remember having issues even with loading html nodes from plain HTML using ajax. It just seems too messy to me. If you want to transfer structured information across ajax, use JSON, then present that information on your side with javascript and HTML. So, don't grab the whole data + presentation, just grab the data, then do your own presentation on your side. It's much neater.

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

5 Comments

A memory leak will not cause such severe problems.
+1. I'll add that it is running on localhost using iis. The ajaxing in uses jquery.html(thepage) which is on the same domain (localhost) and done well after (10+sec) the page has loaded. I have no idea what the headers are set to i didnt think to look.
@icktoofay ...Right. But an unusable reference hidden inside some closed scope in an event handler, might, and might not show up on the debugger, might just silently fail.
If the element that the event handler is attached to is removed from the DOM, but because of a garbage collector that does not handle cyclic references, it and the event handler are kept, then, well, they're kept. If an appropriate event were ever fired on that element, then the event handler would be called, but there are no references from the roots to the element, so no event ever will be fired. I don't see how any problems could arise from it other than running out of memory.
What if it garbage collected the object, but a reference still existed to a reference to the memory location of that garbage collected object, that was not counted as being to that object, because the GC didn't follow the circular reference, so now a reference exists to a junk memory location that javascript doesn't know is junk, but the GC doesn't know exists, and then the event is fired on the reference and it hits a wall of badness and silently fails? Javascript is a bottomless mystery the depths of which have not been fully plumbed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.