Executing script injected by innerHTML after AJAX call

Question

There s a div called  Content     lt div id  content  gt  lt  div gt    It should be filled with data from a PHP file  by AJAX  including a  lt script gt  tag  However  the script inside this tag is not being executed    lt div id  content  gt  lt  -- After AJAX loads the stuff that goes here -- gt      lt script type  text javascript  gt         code     lt  script gt      lt  -- More stuff that DOES work here -- gt   lt  div gt

User · Answer

My conclusion is HTML doesn t allows NESTED SCRIPT tags  If you are using javascript for injecting HTML code that include script tags inside is not going to work because the javascript goes in a script tag too  You can test it with the next code and you will be that it s not going to work  The use case is you are calling a service with AJAX or similar  you are getting HTML and you want to inject it in the HTML DOM straight forward  If the injected HTML code has inside SCRIPT tags is not going to work     lt  DOCTYPE html gt  lt html lang  en  gt  lt head gt  lt meta charset  utf-8  gt  lt  head gt  lt body gt  lt  body gt  lt script gt document getElementsByTagName  body   0  innerHTML     lt script gt console log  hi there   lt  script gt  n lt div gt hello world lt  div gt  n  lt  script gt  lt  html gt

User · Answer

If you are injecting something that needs the script tag  you may get an uncaught syntax error and say illegal token  To avoid this  be sure to escape the forward slashes in your closing script tag s   ie   var output      lt   script gt      Same goes for any closing tags  such as a form tag

User · Answer

This worked for me by calling eval on each script content from ajax  done      ajax     done function  data                 div content script   each function  index  element    eval element innerHTML              Note  I didn t write parameters to   ajax which you have to adjust   according to your ajax

User · Answer

I had a similiar post here  addEventListener load on ajax load WITHOUT jquery  How I solved it was to insert calls to functions within my stateChange function  The page I had setup was 3 buttons that would load 3 different pages into the contentArea  Because I had to know which button was being pressed to load page 1  2 or 3  I could easily use if else statements to determine which page is being loaded and then which function to run  What I was trying to do was register different button listeners that would only work when the specific page was loaded because of element IDs    so     if  page1 is being loaded  pageload   1     run function registerListeners1  then the same for page 2 or 3

User · Answer

I used this code  it is working fine  var arr   MyDiv getElementsByTagName  script   for  var n   0  n  lt  arr length  n        eval arr n  innerHTML   run script inside div

User · Answer

Here is a function you can use to parse AJAX responses  especially if you use minifiedjs and want it to execute the returned Javascript or just want to parse the scripts without adding them to the DOM  it handles exception errors as well  I used this code in php4sack library and it is useful outside of the library   function parseScript  source        var source    source      var scripts   new Array            Strip out tags     while source toLowerCase   indexOf   lt script    gt  -1    source toLowerCase   indexOf   lt  script    gt  -1            var s   source toLowerCase   indexOf   lt script            var s e   source indexOf   gt    s           var e   source toLowerCase   indexOf   lt  script   s           var e e   source indexOf   gt    e               Add to scripts array         scripts push source substring s e 1  e               Strip from source         source   source substring 0  s    source substring e e 1                 Loop through every script collected and eval it     for var i 0  i lt scripts length  i              try             if  scripts i                                          try               IE                   execScript scripts i                     catch ex              Firefox                 window eval scripts i                                                  catch e                   do what you want here when a script fails             window alert  Script failed to run -   scripts i              if  e instanceof SyntaxError  console log  e message   -   scripts i                                   Return the cleaned source     return source

User · Answer

This  just works  for me using jQuery  provided you don t try to append a subset the XHR-returned HTML to the document   See this bug report showing the problem with jQuery    Here is an example showing it working    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    lt html lang  en  gt    lt head gt        lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt        lt title gt test 1 4 lt  title gt        lt script type  text javascript  charset  utf-8  src  jquery 1 4 2 js  gt  lt  script gt        lt script type  text javascript  charset  utf-8  gt           var snippet     lt div gt  lt span id  a  gt JS did not run lt   span gt  lt script type  text javascript  gt                  a   html  Hooray  JS ran                  lt   script gt  lt   div gt              function                    replaceable   replaceWith   snippet                     lt  script gt    lt  head gt    lt body gt        lt div id  replaceable  gt I m going away  lt  div gt    lt  body gt    lt  html gt    Here is the equivalent of the above  http   jsfiddle net 2CTLH

User · Answer

JavaScript inserted as DOM text will not execute  However  you can use the dynamic script pattern to accomplish your goal  The basic idea is to move the script that you want to execute into an external file and create a script tag when you get your Ajax response  You then set the src attribute of your script tag and voila  it loads and executes the external script   This other StackOverflow post may also be helpful to you  Can scripts be inserted with innerHTML

User · Answer

Here is the script that will evaluates all script tags in the text   function evalJSFromHtml html      var newElement   document createElement  div      newElement innerHTML   html     var scripts   newElement getElementsByTagName  script      for  var i   0  i  lt  scripts length    i        var script   scripts i       eval script innerHTML           Just call this function after you receive your HTML from server  Be warned  using eval can be dangerous   Demo  http   plnkr co edit LA7OPkRfAtgOhwcAnLrl p preview

User · Answer

If you load a script block within your div via Ajax like this    lt div id  content  gt       lt script type  text javascript  gt      function myFunction             do something           myFunction         lt  script gt   lt  div gt        it simply updates the DOM of your page  myFunction   does not necessarily get called    You can use an Ajax callback method such as the one in jQuery s ajax    method to define what to execute when the request finishes    What you are doing is different from loading a page with JavaScript included in it from the get-go  which does get executed    An example of how to used the success callback and error callback after fetching some content       ajax       type   GET       url   response php       timeout  2000      success  function data              content   html data         myFunction               error  function  XMLHttpRequest  textStatus  errorThrown          alert  error retrieving content            Another quick and dirty way is to use eval   to execute any script code that you ve inserted as DOM text if you don t want to use jQuery or other library

User · Answer

Another thing to do is to load the page with a script such as     lt div id  content  onmouseover  myFunction     this  prop   onmouseover   null     gt   lt script type  text javascript  gt  function myFunction         do something   myFunction     lt  script gt   lt  div gt    This will load the page  then run the script and remove the event handler when the function has been run  This will not run immediately after an ajax load  but if you are waiting for the user to enter the div element  this will work just fine     PS  Requires Jquery

[javascript] Executing <script> injected by innerHTML after AJAX call

Examples related to javascript

Examples related to html

Examples related to ajax