1

I've been trying to get this sorted all day, but really cant figure it out. I've got a page with
<div id="ajax"></div> that is populated off a tab based menu pulling in a snippet of HTML code stored in an external file that contains some javascript (mainly form validation).

I've seen in places that I need to eval() the code, but then on the same side of things people say its the last thing to do.

Can someone point me in the right direction, and provide an example if possible as I am very new to jQuery / JavaScript.

Many thanks :)

Improve this question

3 Answers 3

Reset to default
1

pulling in a snippet of HTML code stored in an external file that contains some javascript (mainly form validation).

Avoid doing this. Writing <script> to innerHTML doesn't cause the script to get executed... though moving the element afterwards can cause it to get executed, at different times in different browsers.

So it's inconsistent in practice, and it doesn't really make any sense to include script anyway:

  • when you load the same snippet twice, you'd be running the same script twice, which might redefine some of the functions or variables bound to the page, which can leave you in extremely strange and hard-to-debug situations

  • non-async/defer scripts are expecting to run at parse time, and may include techniques which can't work when inserted into an existing document (in the case of document.write this typically destroys the whole page, a common symptom when trying to load third-party ad/tracking scripts).

Yes, jQuery tries to make some of this more consistent between browsers by extracting script elements and executing them. But no, it doesn't manage to fix all cases (and in principle can't). So don't ask it to. Keep your scripts static, and run any binding script code that needs to happen in the load callback.

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

3 Comments

so is it possible to declare all of my <script></script> tags on the main page, and then callback to the validation (in this case JotForm.init(); on the page that is loaded via ajax? If so, how do you go about that?
Yes. The scripts would have to put their initialisation stuff in functions rather than running it straight away, so they didn't try to eg bind to on-page elements that don't exist yet. Then you'd call those init functions when the relevant tab had been loaded, typically done by passing a callback function to load() or in the success callback of an ajax().
Sounds like what I'm looking for. Do you have an example at all where I could see it in action? Not quite sure how to go about doing it.
1

If you fetch html via Ajax, and that html has a <script> tag in it, and you write that html into your document via something like $('#foo').append(html), then the JS should run immediately without any hassle whatsoever.

Improve this answer

Comments

0

jquery automatically processes scripts received in an ajax request when adding the content to your page. If you are having a particular problem then post some code.

See this link

dataType: "html" - Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.