jQuery load call doesn t execute JavaScript in loaded HTML file

Question

This seems to be a problem related to Safari only   I ve tried 4 on Mac and 3 on Windows and am still having no luck   I m trying to load an external HTML file and have the JavaScript that is embedded execute   The code I m trying to use is this       myBtn   click function             myDiv   load  trackingCode html          trackingCode html looks like this  simple now  but will expand once if I get this working     lt html gt   lt head gt       lt title gt Tracking HTML File lt  title gt       lt script language  javascript  type  text javascript  gt          alert  outside the jQuery ready              function                 alert  inside the jQuery ready                     lt  script gt   lt  head gt    lt body gt   lt  body gt   lt  html gt    I m seeing both alert messages in IE  6  amp  7  and Firefox  2  amp  3   However  I am not able to see the messages in Safari  the last browser that I need to be concerned with - project requirements - please no flame wars    Any thoughts on why Safari is ignoring the JavaScript in the trackingCode html file   Eventually I d like to be able to pass JavaScript objects to this trackingCode html file to be used within the jQuery ready call  but I d like to make sure this is possible in all browsers before I go down that road

User · Answer

I wrote the following jquery plugin for html loading function  http   webtech-training blogspot in 2010 10 dyamic-html-loader html

User · Answer

You are loading an entire HTML page into your div  including the html  head and body tags   What happens if you do the load and just have the opening script  closing script  and JavaScript code in the HTML that you load   Here is the driver page    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt        lt head gt           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt           lt title gt jQuery Load of Script lt  title gt           lt script type  text javascript  src  http   www google com jsapi  gt  lt  script gt           lt script type  text javascript  gt              google load  jquery    1 3 2             lt  script gt           lt script type  text javascript  gt                document  ready function                        myButton   click function                             myDiv   load  trackingCode html                                                   lt  script gt       lt  head gt       lt body gt           lt button id  myButton  gt Click Me lt  button gt           lt div id  myDiv  gt  lt  div gt       lt  body gt   lt  html gt    Here is the contents of trackingCode html    lt script type  text javascript  gt      alert  Outside the jQuery ready          function             alert  Inside the jQuery ready              lt  script gt    This works for me in Safari 4   Update  Added DOCTYPE and html namespace to match the code on my test environment   Tested with Firefox 3 6 13 and example code works

User · Answer

I realize this is somewhat of an older post  but for anyone that comes to this page looking for a similar solution     http   api jquery com jQuery getScript    jQuery getScript  url    success data  textStatus               url - A string containing the URL to which the request is sent    success data  textStatus  - A callback function that is executed if the request succeeds              getScript  ajax test js   function       alert  Load was performed

User · Answer

If you want to load both the HTML and scripts  here s a more automated way to do so utilizing both   selector  load   and jQuery getScript    This specific example loads the HTML content of the element with ID  quot toLoad quot  from content html  inserts the HTML into the element with ID  quot content quot   and then loads and runs all scripts within the element with the  quot toLoad quot  ID     quot  content quot   load  quot content html  toLoad quot   function data        var scripts     data  find  quot script quot         if  scripts length              scripts  each function                 if    this  attr  quot src quot                        getScript   this  attr  quot src quot                               else                   eval   this  html                                           This code finds all of the script elements in the content that is being loaded  and loops through each of these elements  If the element has a src attribute  meaning it is a script from an external file  we use the jQuery getScript method of fetching and running the script  If the element does not have a src attribute  meaning it is an inline script  we simply use eval to run the code  If it finds no script elements  it solely inserts the HTML into the target element and does not attempt to load any scripts  I ve tested this method in Chrome and it works  Remember to be cautious when using eval  as it can run potentially unsafe scripts and is generally considered harmful  You might want to avoid using inline scripts when using this method in order to avoid having to use eval

User · Answer

A other version of John Pick s solution just before  this works fine for me    jQuery ajax              success  function data  textStatus  jqXHR           jQuery selecteur  html jqXHR responseText          var reponse   jQuery jqXHR responseText          var reponseScript   reponse filter  script           jQuery each reponseScript  function idx  val    eval val text

User · Answer

Well I had the same problem that only seemed to happen for Firefox  and I couldn t use another JQuery command except for  load   since I was modifying the front-end on exisitng PHP files     Anyways  after using the  load   command  I embedded my JQuery script within the external HTML that was getting loaded in  and it seemed to work  I don t understand why the JS that I loaded at the top of the main document didn t work for the new content however

User · Answer

You ve almost got it  Tell jquery you want to load only the script       myBtn   click function             myDiv   load  trackingCode html script

User · Answer

I was able to fix this issue by changing   document  ready   to window onLoad

User · Answer

This doesn t seem to work if you re loading the HTML field into a dynamically created element      body   append   lt div id  loader  gt  lt  div gt         loader   load  htmlwithscript htm      I look at firebug DOM and there is no script node at all  only the HTML and my CSS node   Anyone have come across this

User · Answer

Test with this in trackingCode html    lt script type  text javascript  gt         function             show alert            function show alert                alert  Inside the jQuery ready                        lt  script gt

User · Answer

I ran into this where the scripts would load once  but repeat calls would not run the script   It turned out to be an issue with using  html   to display a wait indicator and then chaining  load   after it      Processes scripts as expected once per page load  but not for repeat calls     id   html   lt img src wait gif gt    load  page html      When I made them separate calls  my inline scripts loaded every time as expected      Without chaining html and load together  scripts are processed as expected every time     id   html   lt img src wait gif gt         id   load  page html      For further research  note that there are two versions of  load    A simple  load   call  without a selector after the url  is simply a shorthand for calling   ajax   with dataType  html  and taking the return contents and calling  html   to put those contents in the DOM   And the documentation for dataType  html  clearly states  included script tags are evaluated when inserted in the DOM   http   api jquery com jquery ajax   So  load   officially runs inline scripts   A complex  load   call has a selector such as load  page html  content     When used that way  jQuery purposefully filters out script tags as discussed in articles like this one  https   forum jquery com topic the-load-function-and-script-blocks 14737000000752785  In this case the scripts never run  not even once

User · Answer

images   load location href    images  function          getScript  js productHelper js

User · Answer

Tacking onto  efreed answer     I was using  load  mypage html  theSelectorIwanted   to call content from a page by selector  but that means it does not execute the inline scripts inside   Instead  I was able to change my markup so that   theSelectorIwanted became it s own file and I used  load  theSelectorIwanted html   function           and it ran the inline scripts just fine    Not everyone has that option but this was a quick workaround to get where I wanted

[jquery] jQuery .load() call doesn't execute JavaScript in loaded HTML file

Examples related to jquery

Examples related to ajax

Examples related to safari