Calling a JavaScript function returned from an Ajax response

Question

I have a system where I send an Ajax command  which returns a script block with a function in it  After this data is correctly inserted in the DIV  I want to be able to call this function to perform the required actions   Is this possible

User · Answer

It is fully possible  and there are even some fairly legitimate use cases for this  Using the Prototype framework it s done as follows   new Ajax Updater  items     items url         parameters    evalJS  true        See documentation of the Ajax updater  The options are in the common options set  As usual  there are some caveats about where  this  points to  so read the fine print   The JavaScript code will be evaluated upon load  If the content contains function myFunc    you could really just say myFunc   afterwards  Maybe as follows   if  window  myFunc       myFunc     This checks if the function exists  Maybe someone has a better cross-browser way of doing that which works in Internet nbsp Explorer nbsp 6

User · Answer

I ve tested this and it works  What s the problem  Just put the new function inside your javascript element and then call it  It will work

User · Answer

That seems a rather weird design for your code - it generally makes more sense to have your functions called directly from a  js file  and then only retrieve data with the Ajax call   However  I believe it should work by calling eval   on the response - provided it is syntactically correct JavaScript code

User · Answer

With jQuery I would do it using getScript

User · Answer

That seems a rather weird design for your code - it generally makes more sense to have your functions called directly from a  js file  and then only retrieve data with the Ajax call   However  I believe it should work by calling eval   on the response - provided it is syntactically correct JavaScript code

User · Answer

A checklist for doing such a thing    the returned Ajax response is eval ed   the functions are declared in form func name   function           Better still  use frameworks which handles it like in Prototype  You have Ajax updater

User · Answer

I think to correctly interpret your question under this form   OK  I m already done with all the Ajax stuff  I just wish to know if the JavaScript function my Ajax callback inserted into the DIV is callable at any time from that moment on  that is  I do not want to call it contextually to the callback return    OK  if you mean something like this the answer is yes  you can invoke your new code by that moment at any time during the page persistence within the browser  under the following conditions   1  Your JavaScript code returned by Ajax callback must be syntactically OK  2  Even if your function declaration is inserted into a  lt script gt  block within an existing  lt div gt  element  the browser won t know the new function exists  as the declaration code has never been executed  So  you must eval   your declaration code returned by the Ajax callback  in order to effectively declare your new function and have it available during the whole page lifetime   Even if quite dummy  this code explains the idea    lt html gt       lt body gt           lt div id  div1  gt           lt  div gt           lt div id  div2  gt               lt input type  button  value  Go   onclick  go      gt           lt  div gt           lt script type  text javascript  gt              var newsc     lt script id  sc1  type  text javascript  gt function go     alert  GO      lt   script gt                var e   document getElementById  div1                e innerHTML   newsc              eval document getElementById  sc1   innerHTML            lt  script gt       lt  body gt   lt  html gt    I didn t use Ajax  but the concept is the same  even if the example I chose sure isn t much smart  -   Generally speaking  I do not question your solution design  i e  whether it is more or less appropriate to externalize   generalize the function in a separate  js file and the like  but please take note that such a solution could raise further problems  especially if your Ajax invocations should repeat  i e  if the context of the same function should change or in case the declared function persistence should be concerned  so maybe you should seriously consider to change your design to one of the suggested examples in this thread   Finally  if I misunderstood your question  and you re talking about contextual invocation of the function when your Ajax callback returns  then my feeling is to suggest the Prototype approach described by krosenvold  as it is cross-browser  tested and fully functional  and this can give you a better roadmap for future implementations

User · Answer

PHP side code Name of file class sendCode php   lt  php class  sendCode    function   construct  dateini  datefin                 echo  this- gt printCode  dateini  datefin                  function printCode  dateini  datefin             code    alert   code Coming from AJAX   this- gt dateini  and   this- gt datefin         Insert all the code you want to execute     only javascript or Jquery code   dont incluce  lt script gt  tags             return  code           new sendCode   POST  dateini     POST  datefin       Now from your  Html page you must trigger the ajax function to send the data          lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt       Date begin   lt input type  text  id  startdate  gt  lt br gt  Date end    lt input type  text  id  enddate  gt  lt br gt   lt input type  button  value  validate   onclick  triggerAjax     gt    Now at our local script js we will define the ajax  function triggerAjax           ajax               type   POST               url   class sendCode php               dataType   HTML               data                      dateini       startdate   val                    datefin       enddate   val                        success  function data                           globalEval data      here is where the magic is made by executing the data that comes from    the php class   That is our javascript code to be executed

User · Answer

My usual ajax calling function   function xhr new targetId  url  busyMsg  finishCB        var xhr       if busyMsg     undefined          document getElementById targetId  innerHTML   busyMsg       try   xhr   new ActiveXObject  Msxml2 XMLHTTP          catch e                try   xhr   new ActiveXObject  Microsoft XMLHTTP              catch e2                        try   xhr   new XMLHttpRequest                  catch e3    xhr   false                         xhr onreadystatechange   function                 if xhr readyState    4                        if xhr status    200                                var target   document getElementById targetId                  target innerHTML   xhr responseText                  var scriptElements   target getElementsByTagName  script                    var i                  for i   0  i  lt  scriptElements length  i                        eval scriptElements i  innerHTML                   if finishCB     undefined                      finishCB                              else                 document getElementById targetId  innerHTML    Error code      xhr status                        xhr open  GET   url  true       xhr send null          return xhr      Some explanation  targetId is an  usually div  element ID where the ajax call result text will goes  url is the ajax call url  busyMsg will be the temporary text in the target element  finishCB will be called when the ajax transaction finished successfully  As you see in the xhr onreadystatechange   function         all of the  lt script gt  elements will be collected from the ajax response and will be run one by one  It appears to work very well for me  The two last parameter is optional

User · Answer

If your AJAX script takes more than a couple milliseconds to run  eval   will always run ahead and evaluate the empty response element before AJAX populates it with the script you re trying to execute   Rather than mucking around with timing and eval    here is a pretty simple workaround that should work in most situations and is probably a bit more secure  Using eval   is generally frowned upon because the characters being evaluated as code can easily be manipulated client-side   Concept   Include your javascript function in the main page  Write it so that any dynamic elements can be accepted as arguments  In your AJAX file  call the function by using an official DOM event  onclick  onfocus  onblur  onload  etc   Depending on what other elements are in your response  you can get pretty clever about making it feel seamless  Pass your dynamic elements in as arguments  When your response element gets populated and the event takes place  the function runs    Example  In this example  I want to attach a dynamic autocomplete list from the jquery-ui library to an AJAX element AFTER the element has been added to the page  Easy  right   start php   lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Demo lt  title gt   lt  -- these libraries are for the autocomplete   function -- gt   lt link rel  stylesheet  type  text css  href  http   ajax googleapis com ajax libs jqueryui 1 11 4 themes ui-lightness jquery-ui css  gt   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  gt  lt  script gt   lt script type  text javascript  gt   lt  --    this is the ajax call function editDemoText ElementID initialValue        try   ajaxRequest   new XMLHttpRequest          catch  e        try   ajaxRequest   new ActiveXObject  Msxml2 XMLHTTP          catch  e        try   ajaxRequest   new ActiveXObject  Microsoft XMLHTTP          catch  e        return false              ajaxRequest onreadystatechange   function             if   ajaxRequest readyState    4                 var ajaxDisplay   document getElementById  responseDiv                ajaxDisplay innerHTML   ajaxRequest responseText                              var queryString     ElementID   ElementID   amp initialValue   initialValue      ajaxRequest open  GET    ajaxRequest php  queryString  true       ajaxRequest send null             this is the function we wanted to call in AJAX      but we put it here instead with an argument  ElementID  function AttachAutocomplete ElementID           this list is static  but can easily be pulled in from         a database using PHP  That would look something like this                 list               r   mysqli query  mysqli link   SELECT element FROM table           while    row   mysqli fetch array  r                 list        str replace           row  element                               list   rtrim  list                   var availableIDs     Demo1   Demo2   Demo3   Demo4              ElementID  autocomplete   source  availableIDs             -- gt   lt  script gt   lt  head gt   lt body gt   lt  -- this is where the AJAX response sneaks in after DOM is loaded -- gt   lt  -- we re using an onclick event to trigger the initial AJAX call -- gt   lt div id  responseDiv  gt  lt a href  javascript void 0    onclick  editDemoText  EditableText   I am editable      gt I am editable  lt  a gt  lt  div gt   lt  body gt   lt  html gt    ajaxRequest php   lt  php    for this application  onfocus works well because we wouldn t really     need the autocomplete populated until the user begins typing echo   lt input type   text   id       GET  ElementID       onfocus   AttachAutocomplete      GET  ElementID          value       GET  initialValue         gt  n     gt

User · Answer

Note  eval   can be easily misused  let say that the request is intercepted by a third party and sends you not trusted code  Then with eval   you would be running this not trusted code   Refer here for the dangers of eval        Inside the returned HTML Ajax JavaScript file  you will have a JavaScript tag  Give it an ID  like runscript  It s uncommon to add an id to these tags  but it s needed to reference it specifically    lt script type  text javascript  id  runscript  gt      alert  running from main     lt  script gt    In the main window  then call the eval function by evaluating only that NEW block of JavaScript code  in this case  it s called runscript    eval document getElementById  runscript   innerHTML     And it works  at least in Internet nbsp Explorer nbsp 9 and Google Chrome

User · Answer

I ve tested this and it works  What s the problem  Just put the new function inside your javascript element and then call it  It will work

User · Answer

This does not sound like a good idea    You should abstract out the function to include in the rest of your JavaScript code from the data returned by Ajax methods   For what it s worth  though   and I don t understand why you re inserting a script block in a div   even inline script methods written in a script block will be accessible

User · Answer

This does not sound like a good idea    You should abstract out the function to include in the rest of your JavaScript code from the data returned by Ajax methods   For what it s worth  though   and I don t understand why you re inserting a script block in a div   even inline script methods written in a script block will be accessible

User · Answer

I tried all the techniques offered here but finally the way that worked was simply to put the JavaScript function inside the page   file where it is supposed to happen and call it from the response part of the Ajax simply as a function          function data        afterOrder        This Worked on the first attempt  so I decided to share

User · Answer

I tried all the techniques offered here but finally the way that worked was simply to put the JavaScript function inside the page   file where it is supposed to happen and call it from the response part of the Ajax simply as a function          function data        afterOrder        This Worked on the first attempt  so I decided to share

User · Answer

Federico Zancan s answer is correct but you don t have to give your script an ID and eval all your script  Just eval your function name and it can be called   To achieve this in our project  we wrote a proxy function to call the function returned inside the Ajax response   function FunctionProxy functionName       var func   eval functionName       func

User · Answer

Note  eval   can be easily misused  let say that the request is intercepted by a third party and sends you not trusted code  Then with eval   you would be running this not trusted code   Refer here for the dangers of eval        Inside the returned HTML Ajax JavaScript file  you will have a JavaScript tag  Give it an ID  like runscript  It s uncommon to add an id to these tags  but it s needed to reference it specifically    lt script type  text javascript  id  runscript  gt      alert  running from main     lt  script gt    In the main window  then call the eval function by evaluating only that NEW block of JavaScript code  in this case  it s called runscript    eval document getElementById  runscript   innerHTML     And it works  at least in Internet nbsp Explorer nbsp 9 and Google Chrome

User · Answer

I think to correctly interpret your question under this form   OK  I m already done with all the Ajax stuff  I just wish to know if the JavaScript function my Ajax callback inserted into the DIV is callable at any time from that moment on  that is  I do not want to call it contextually to the callback return    OK  if you mean something like this the answer is yes  you can invoke your new code by that moment at any time during the page persistence within the browser  under the following conditions   1  Your JavaScript code returned by Ajax callback must be syntactically OK  2  Even if your function declaration is inserted into a  lt script gt  block within an existing  lt div gt  element  the browser won t know the new function exists  as the declaration code has never been executed  So  you must eval   your declaration code returned by the Ajax callback  in order to effectively declare your new function and have it available during the whole page lifetime   Even if quite dummy  this code explains the idea    lt html gt       lt body gt           lt div id  div1  gt           lt  div gt           lt div id  div2  gt               lt input type  button  value  Go   onclick  go      gt           lt  div gt           lt script type  text javascript  gt              var newsc     lt script id  sc1  type  text javascript  gt function go     alert  GO      lt   script gt                var e   document getElementById  div1                e innerHTML   newsc              eval document getElementById  sc1   innerHTML            lt  script gt       lt  body gt   lt  html gt    I didn t use Ajax  but the concept is the same  even if the example I chose sure isn t much smart  -   Generally speaking  I do not question your solution design  i e  whether it is more or less appropriate to externalize   generalize the function in a separate  js file and the like  but please take note that such a solution could raise further problems  especially if your Ajax invocations should repeat  i e  if the context of the same function should change or in case the declared function persistence should be concerned  so maybe you should seriously consider to change your design to one of the suggested examples in this thread   Finally  if I misunderstood your question  and you re talking about contextual invocation of the function when your Ajax callback returns  then my feeling is to suggest the Prototype approach described by krosenvold  as it is cross-browser  tested and fully functional  and this can give you a better roadmap for future implementations

User · Answer

It is fully possible  and there are even some fairly legitimate use cases for this  Using the Prototype framework it s done as follows   new Ajax Updater  items     items url         parameters    evalJS  true        See documentation of the Ajax updater  The options are in the common options set  As usual  there are some caveats about where  this  points to  so read the fine print   The JavaScript code will be evaluated upon load  If the content contains function myFunc    you could really just say myFunc   afterwards  Maybe as follows   if  window  myFunc       myFunc     This checks if the function exists  Maybe someone has a better cross-browser way of doing that which works in Internet nbsp Explorer nbsp 6

User · Answer

I think to correctly interpret your question under this form   OK  I m already done with all the Ajax stuff  I just wish to know if the JavaScript function my Ajax callback inserted into the DIV is callable at any time from that moment on  that is  I do not want to call it contextually to the callback return    OK  if you mean something like this the answer is yes  you can invoke your new code by that moment at any time during the page persistence within the browser  under the following conditions   1  Your JavaScript code returned by Ajax callback must be syntactically OK  2  Even if your function declaration is inserted into a  lt script gt  block within an existing  lt div gt  element  the browser won t know the new function exists  as the declaration code has never been executed  So  you must eval   your declaration code returned by the Ajax callback  in order to effectively declare your new function and have it available during the whole page lifetime   Even if quite dummy  this code explains the idea    lt html gt       lt body gt           lt div id  div1  gt           lt  div gt           lt div id  div2  gt               lt input type  button  value  Go   onclick  go      gt           lt  div gt           lt script type  text javascript  gt              var newsc     lt script id  sc1  type  text javascript  gt function go     alert  GO      lt   script gt                var e   document getElementById  div1                e innerHTML   newsc              eval document getElementById  sc1   innerHTML            lt  script gt       lt  body gt   lt  html gt    I didn t use Ajax  but the concept is the same  even if the example I chose sure isn t much smart  -   Generally speaking  I do not question your solution design  i e  whether it is more or less appropriate to externalize   generalize the function in a separate  js file and the like  but please take note that such a solution could raise further problems  especially if your Ajax invocations should repeat  i e  if the context of the same function should change or in case the declared function persistence should be concerned  so maybe you should seriously consider to change your design to one of the suggested examples in this thread   Finally  if I misunderstood your question  and you re talking about contextual invocation of the function when your Ajax callback returns  then my feeling is to suggest the Prototype approach described by krosenvold  as it is cross-browser  tested and fully functional  and this can give you a better roadmap for future implementations

User · Answer

I think to correctly interpret your question under this form   OK  I m already done with all the Ajax stuff  I just wish to know if the JavaScript function my Ajax callback inserted into the DIV is callable at any time from that moment on  that is  I do not want to call it contextually to the callback return    OK  if you mean something like this the answer is yes  you can invoke your new code by that moment at any time during the page persistence within the browser  under the following conditions   1  Your JavaScript code returned by Ajax callback must be syntactically OK  2  Even if your function declaration is inserted into a  lt script gt  block within an existing  lt div gt  element  the browser won t know the new function exists  as the declaration code has never been executed  So  you must eval   your declaration code returned by the Ajax callback  in order to effectively declare your new function and have it available during the whole page lifetime   Even if quite dummy  this code explains the idea    lt html gt       lt body gt           lt div id  div1  gt           lt  div gt           lt div id  div2  gt               lt input type  button  value  Go   onclick  go      gt           lt  div gt           lt script type  text javascript  gt              var newsc     lt script id  sc1  type  text javascript  gt function go     alert  GO      lt   script gt                var e   document getElementById  div1                e innerHTML   newsc              eval document getElementById  sc1   innerHTML            lt  script gt       lt  body gt   lt  html gt    I didn t use Ajax  but the concept is the same  even if the example I chose sure isn t much smart  -   Generally speaking  I do not question your solution design  i e  whether it is more or less appropriate to externalize   generalize the function in a separate  js file and the like  but please take note that such a solution could raise further problems  especially if your Ajax invocations should repeat  i e  if the context of the same function should change or in case the declared function persistence should be concerned  so maybe you should seriously consider to change your design to one of the suggested examples in this thread   Finally  if I misunderstood your question  and you re talking about contextual invocation of the function when your Ajax callback returns  then my feeling is to suggest the Prototype approach described by krosenvold  as it is cross-browser  tested and fully functional  and this can give you a better roadmap for future implementations

User · Answer

That seems a rather weird design for your code - it generally makes more sense to have your functions called directly from a  js file  and then only retrieve data with the Ajax call   However  I believe it should work by calling eval   on the response - provided it is syntactically correct JavaScript code

User · Answer

My usual ajax calling function   function xhr new targetId  url  busyMsg  finishCB        var xhr       if busyMsg     undefined          document getElementById targetId  innerHTML   busyMsg       try   xhr   new ActiveXObject  Msxml2 XMLHTTP          catch e                try   xhr   new ActiveXObject  Microsoft XMLHTTP              catch e2                        try   xhr   new XMLHttpRequest                  catch e3    xhr   false                         xhr onreadystatechange   function                 if xhr readyState    4                        if xhr status    200                                var target   document getElementById targetId                  target innerHTML   xhr responseText                  var scriptElements   target getElementsByTagName  script                    var i                  for i   0  i  lt  scriptElements length  i                        eval scriptElements i  innerHTML                   if finishCB     undefined                      finishCB                              else                 document getElementById targetId  innerHTML    Error code      xhr status                        xhr open  GET   url  true       xhr send null          return xhr      Some explanation  targetId is an  usually div  element ID where the ajax call result text will goes  url is the ajax call url  busyMsg will be the temporary text in the target element  finishCB will be called when the ajax transaction finished successfully  As you see in the xhr onreadystatechange   function         all of the  lt script gt  elements will be collected from the ajax response and will be run one by one  It appears to work very well for me  The two last parameter is optional

User · Answer

If your AJAX script takes more than a couple milliseconds to run  eval   will always run ahead and evaluate the empty response element before AJAX populates it with the script you re trying to execute   Rather than mucking around with timing and eval    here is a pretty simple workaround that should work in most situations and is probably a bit more secure  Using eval   is generally frowned upon because the characters being evaluated as code can easily be manipulated client-side   Concept   Include your javascript function in the main page  Write it so that any dynamic elements can be accepted as arguments  In your AJAX file  call the function by using an official DOM event  onclick  onfocus  onblur  onload  etc   Depending on what other elements are in your response  you can get pretty clever about making it feel seamless  Pass your dynamic elements in as arguments  When your response element gets populated and the event takes place  the function runs    Example  In this example  I want to attach a dynamic autocomplete list from the jquery-ui library to an AJAX element AFTER the element has been added to the page  Easy  right   start php   lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Demo lt  title gt   lt  -- these libraries are for the autocomplete   function -- gt   lt link rel  stylesheet  type  text css  href  http   ajax googleapis com ajax libs jqueryui 1 11 4 themes ui-lightness jquery-ui css  gt   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  gt  lt  script gt   lt script type  text javascript  gt   lt  --    this is the ajax call function editDemoText ElementID initialValue        try   ajaxRequest   new XMLHttpRequest          catch  e        try   ajaxRequest   new ActiveXObject  Msxml2 XMLHTTP          catch  e        try   ajaxRequest   new ActiveXObject  Microsoft XMLHTTP          catch  e        return false              ajaxRequest onreadystatechange   function             if   ajaxRequest readyState    4                 var ajaxDisplay   document getElementById  responseDiv                ajaxDisplay innerHTML   ajaxRequest responseText                              var queryString     ElementID   ElementID   amp initialValue   initialValue      ajaxRequest open  GET    ajaxRequest php  queryString  true       ajaxRequest send null             this is the function we wanted to call in AJAX      but we put it here instead with an argument  ElementID  function AttachAutocomplete ElementID           this list is static  but can easily be pulled in from         a database using PHP  That would look something like this                 list               r   mysqli query  mysqli link   SELECT element FROM table           while    row   mysqli fetch array  r                 list        str replace           row  element                               list   rtrim  list                   var availableIDs     Demo1   Demo2   Demo3   Demo4              ElementID  autocomplete   source  availableIDs             -- gt   lt  script gt   lt  head gt   lt body gt   lt  -- this is where the AJAX response sneaks in after DOM is loaded -- gt   lt  -- we re using an onclick event to trigger the initial AJAX call -- gt   lt div id  responseDiv  gt  lt a href  javascript void 0    onclick  editDemoText  EditableText   I am editable      gt I am editable  lt  a gt  lt  div gt   lt  body gt   lt  html gt    ajaxRequest php   lt  php    for this application  onfocus works well because we wouldn t really     need the autocomplete populated until the user begins typing echo   lt input type   text   id       GET  ElementID       onfocus   AttachAutocomplete      GET  ElementID          value       GET  initialValue         gt  n     gt

User · Answer

A checklist for doing such a thing    the returned Ajax response is eval ed   the functions are declared in form func name   function           Better still  use frameworks which handles it like in Prototype  You have Ajax updater

User · Answer

Just remember if you create a function the way below through ajax     function foo         console log  foo           and execute it via eval  you ll probably get a context problem  Take this as your callback function   function callback result        responseDiv   document getElementById  responseDiv        responseDiv innerHTML   result      scripts   responseDiv getElementsByTagName  script        eval scripts 0        You ll be declaring a function inside a function  so this new function will be accessible only on that scope   If you want to create a global function in this scenario  you could declare it this way   window foo   function          console log  foo         But  I also think you shouldn t be doing this     Sorry for any mistake here

User · Answer

With jQuery I would do it using getScript

User · Answer

I would like to add that there s an eval function in jQuery allowing you to eval the code globally which should get you rid of any contextual problems  The function is called globalEval   and it worked great for my purposes  Its documentation can be found here   This is the example code provided by the jQuery API documentation   function test       jQuery globalEval  var newVar   true       test       newVar     true   This function is extremely useful when it comes to loading external scripts dynamically which you apparently were trying to do

User · Answer

Just remember if you create a function the way below through ajax     function foo         console log  foo           and execute it via eval  you ll probably get a context problem  Take this as your callback function   function callback result        responseDiv   document getElementById  responseDiv        responseDiv innerHTML   result      scripts   responseDiv getElementsByTagName  script        eval scripts 0        You ll be declaring a function inside a function  so this new function will be accessible only on that scope   If you want to create a global function in this scenario  you could declare it this way   window foo   function          console log  foo         But  I also think you shouldn t be doing this     Sorry for any mistake here

User · Answer

This code work as well  instead eval the html i m going to append the script to the head  function RunJS objID      alert http request responseText   var c     var ob   document getElementById objID  getElementsByTagName  script    for  var i 0  i  lt  ob length - 1  i          if  ob i   1  text    null          c  ob i   1  text    var s   document createElement  script    s type    text javascript   s text   c  document getElementsByTagName  head   0  appendChild s

User · Answer

That seems a rather weird design for your code - it generally makes more sense to have your functions called directly from a  js file  and then only retrieve data with the Ajax call   However  I believe it should work by calling eval   on the response - provided it is syntactically correct JavaScript code

User · Answer

PHP side code Name of file class sendCode php   lt  php class  sendCode    function   construct  dateini  datefin                 echo  this- gt printCode  dateini  datefin                  function printCode  dateini  datefin             code    alert   code Coming from AJAX   this- gt dateini  and   this- gt datefin         Insert all the code you want to execute     only javascript or Jquery code   dont incluce  lt script gt  tags             return  code           new sendCode   POST  dateini     POST  datefin       Now from your  Html page you must trigger the ajax function to send the data          lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt       Date begin   lt input type  text  id  startdate  gt  lt br gt  Date end    lt input type  text  id  enddate  gt  lt br gt   lt input type  button  value  validate   onclick  triggerAjax     gt    Now at our local script js we will define the ajax  function triggerAjax           ajax               type   POST               url   class sendCode php               dataType   HTML               data                      dateini       startdate   val                    datefin       enddate   val                        success  function data                           globalEval data      here is where the magic is made by executing the data that comes from    the php class   That is our javascript code to be executed

User · Answer

This does not sound like a good idea    You should abstract out the function to include in the rest of your JavaScript code from the data returned by Ajax methods   For what it s worth  though   and I don t understand why you re inserting a script block in a div   even inline script methods written in a script block will be accessible

User · Answer

I solved this today by putting my JavaScript at the bottom of the response HTML   I had an AJAX request that returned a bunch of HTML that was displayed in an overlay   I needed to attach a click event to a button in the returned response HTML overlay   On a normal page  I would wrap my JavaScript in a  window onload  or    document  ready  so that it would attach the event handler to the DOM object after the DOM for the new overlay had been rendered  but because this was an AJAX response and not a new page load  that event never happened  the browser never executed my JavaScript  my event handler never got attached to the DOM element  and my new piece of functionality didn t work   Again  I solved my  executing JavaScript in an AJAX response problem  by not using    document  ready  in the head of the document  but by placing my JavaScript at the end of the document and having it run after the HTML DOM had been rendered

User · Answer

This code work as well  instead eval the html i m going to append the script to the head  function RunJS objID      alert http request responseText   var c     var ob   document getElementById objID  getElementsByTagName  script    for  var i 0  i  lt  ob length - 1  i          if  ob i   1  text    null          c  ob i   1  text    var s   document createElement  script    s type    text javascript   s text   c  document getElementsByTagName  head   0  appendChild s

User · Answer

With jQuery I would do it using getScript

User · Answer

This does not sound like a good idea    You should abstract out the function to include in the rest of your JavaScript code from the data returned by Ajax methods   For what it s worth  though   and I don t understand why you re inserting a script block in a div   even inline script methods written in a script block will be accessible

User · Answer

I would like to add that there s an eval function in jQuery allowing you to eval the code globally which should get you rid of any contextual problems  The function is called globalEval   and it worked great for my purposes  Its documentation can be found here   This is the example code provided by the jQuery API documentation   function test       jQuery globalEval  var newVar   true       test       newVar     true   This function is extremely useful when it comes to loading external scripts dynamically which you apparently were trying to do

User · Answer

Federico Zancan s answer is correct but you don t have to give your script an ID and eval all your script  Just eval your function name and it can be called   To achieve this in our project  we wrote a proxy function to call the function returned inside the Ajax response   function FunctionProxy functionName       var func   eval functionName       func

User · Answer

It is fully possible  and there are even some fairly legitimate use cases for this  Using the Prototype framework it s done as follows   new Ajax Updater  items     items url         parameters    evalJS  true        See documentation of the Ajax updater  The options are in the common options set  As usual  there are some caveats about where  this  points to  so read the fine print   The JavaScript code will be evaluated upon load  If the content contains function myFunc    you could really just say myFunc   afterwards  Maybe as follows   if  window  myFunc       myFunc     This checks if the function exists  Maybe someone has a better cross-browser way of doing that which works in Internet nbsp Explorer nbsp 6

User · Answer

With jQuery I would do it using getScript

User · Answer

I solved this today by putting my JavaScript at the bottom of the response HTML   I had an AJAX request that returned a bunch of HTML that was displayed in an overlay   I needed to attach a click event to a button in the returned response HTML overlay   On a normal page  I would wrap my JavaScript in a  window onload  or    document  ready  so that it would attach the event handler to the DOM object after the DOM for the new overlay had been rendered  but because this was an AJAX response and not a new page load  that event never happened  the browser never executed my JavaScript  my event handler never got attached to the DOM element  and my new piece of functionality didn t work   Again  I solved my  executing JavaScript in an AJAX response problem  by not using    document  ready  in the head of the document  but by placing my JavaScript at the end of the document and having it run after the HTML DOM had been rendered

User · Answer

It is fully possible  and there are even some fairly legitimate use cases for this  Using the Prototype framework it s done as follows   new Ajax Updater  items     items url         parameters    evalJS  true        See documentation of the Ajax updater  The options are in the common options set  As usual  there are some caveats about where  this  points to  so read the fine print   The JavaScript code will be evaluated upon load  If the content contains function myFunc    you could really just say myFunc   afterwards  Maybe as follows   if  window  myFunc       myFunc     This checks if the function exists  Maybe someone has a better cross-browser way of doing that which works in Internet nbsp Explorer nbsp 6

[javascript] Calling a JavaScript function returned from an Ajax response

Examples related to javascript

Examples related to ajax

Examples related to function