Execute js function after ajax content have been applied to an element

Question

I have a js AJAX that fetches some content and inserts it into a html element called content_holder. And I would like to call a function right after the content have been updated with the ajax. I have tried to put a <script> element into the content that gets added but it seems like it don't get executed. So I was hoping someone here would know a solution to this. (I'm not using jQuery)

function ajax(instruction, push, url, callback){
 
 var xmlhttp; // the object for the httprequest
 
 if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
  
  
        xmlhttp.onreadystatechange = function() { // every time the readystate changes
  
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // status 200 = sucessfull page! NOT 404!  // 1 2 3 4 are states of the request (4 is when it's done)
   
       var content = xmlhttp.responseText + "<script>ajaxDone();</script>";
   
    callback(content); // goes to the callback function (from the argument "callback") and then passes the xmlhttp
            }
   
        };
        xmlhttp.open(instruction,url,true); // sends a the var q to the next php file
        xmlhttp.send('');             // Sends the request
 
 
     if(push == true){ // Change the link to the url of the ajax with

      var urlPath = window.location.protocol + "//" + window.location.host + window.location.pathname; // where the host is on
  
  
      if(url == "home.php"){ // If it's the starting page REMOVE THE ?p= !!
                var urlPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
                window.history.pushState({path:urlPath},'','./'); // an empty url push (!REMOVE THE DOT WHEN THE SITE IS HOSTED PROPERLY)  
       return; // exit's the function
      }else{}
  
  
            var newLink = "?p=" + url; // Gives us the link we want except that we don't want the .php
            newLink = newLink.substring(0, newLink.indexOf('.')); // makes a new string with character 0 to the dot! Will not include the ending of the file

           
     window.history.pushState({path:urlPath},'',newLink); // the push
  
        } 
  else{}
 
}

<p><a href="?p=toplists" onclick="if(useAjax == true){ ajax('GET', true, 'toplists.php', function(content){ document.getElementById('content_holder').innerHTML = content; }); return false;}">Top Lists</a></p>


<div id="content_holder"></div>

You need to add your (relevant) code to the question. – Andy Apr 14 '16 at 19:11 — Andy, Apr 14 '16 at 19:11

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Take a look at this topic: How to make an AJAX call without jQuery?

You can do smth like:

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       if(xmlhttp.status == 200){
           document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           //here you call whichever function you want 
       }
  .....
}

Hope it helps

edited May 23 '17 at 12:23

Community

1
1

answered Apr 14 '16 at 19:17

mp_loki

1,018
1
10
21

Thanks it works now! I already knew about it and had a function like that which also included my callback function. So i just added the new function i wanted to execute after the callback.. I'm feeling a bit stupid now – Johan Sundman Apr 14 '16 at 19:23

Execute js function after ajax content have been applied to an element

1 Answers1