Johan Sundman Johan Sundman - 1 year ago 39
HTML Question

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

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

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

};,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.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.pathname;
window.history.pushState({path:urlPath},'','./'); // an empty url push (!REMOVE THE DOT WHEN THE SITE IS HOSTED PROPERLY)
return; // exit's the function

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



<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>


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