Functions returned in Ajax response not found

Question

I am using an AJAX response to insert new Javascript into a page.

<div id="content">Content</div>
    <a href="javascript:void(0);" onclick="getPage(this);">Link</a>
    <script>
     function getPage(obj){
      request = new asyncRequest()
      request.open("POST", "testContent.php", true)
      request.setRequestHeader("Content-type",
      "application/x-www-form-urlencoded")
    
      request.onreadystatechange = function()
      {
       if (this.readyState == 4)
       {
         if (this.status == 200)
         {
           if (this.responseText != null)
           {
             document.getElementById('content').innerHTML =
               this.responseText
               scripts = document.getElementById('content').getElementsByTagName('script')
               for (var i = 0; i<scripts.length; i++){
                eval(scripts[i].innerHTML)
               }
           }
           else alert("Communication error: No data received")
         }
         else alert( "Communication error: " + this.statusText)
       }
      }
      params = 'page=' + obj.text
      request.send(params)
     }
          function asyncRequest()
          {
            try {var request = new XMLHttpRequest()}
            catch(e1){
          try{request = new ActiveXObject("Msxml2.XMLHTTP")}
          catch(e2){
              try{request = new ActiveXObject("Microsoft.XMLHTTP")}
              catch(e3){request = false}
           }
            }
            return request
          }
    </script>

The AJAX response is as follows:

<button onclick='buttonClick();'>Button</button>
<script>
    function buttonClick(){alert();}
    buttonClick(); //This works
</script>

I get an alert when the response is processed. But when I click the button, I get an error message.

testAjax.php:1 Uncaught ReferenceError: buttonClick is not defined
at HTMLButtonElement.onclick (testAjax.php:1)

The function works and definitely exists, but it can't be called by onclick.

If I don't eval the scripts, none of it works. I don't even get an alert after the response loads. — Chad Skiles, Feb 21 '20 at 14:56
@epascarello thanks for clarification, had something like that in mind. But there are certainly better ways than this, e.g. ``s — Jonas Wilms, Feb 21 '20 at 14:59
@ChadSkiles Try the answer here instead of eval https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml — epascarello, Feb 21 '20 at 14:59
I have used innerText as well, but they both have the same effect. I know that the code is executed, because of the test call within the ajax response. — Chad Skiles, Feb 21 '20 at 15:03

Functions returned in Ajax response not found

0 Answers0