Question

I have a page. In that page’s header i have all of my javascript. In the pages body i have a link that calls an ajax http request (i use long hand xhr not jquery) and that request pulls a php form on to my page.

That form has some select dropdowns that are formatted/styled using jquery. The problem i am having is that when i put the form directly in the page the select is formated fine on page load. But when i remove the form from the page and pull it in using ajax it is as if the javascript is not loading.

So the javascript is loading when the page loads but when i pull in the php form onto the page via ajax the javascript is not working. the select dropdown is not formated/styled. It’s almost like the javascript needs to reload or something.

I am not using jquery to make the call. I am just using long hand ajax.

function getPage(str)
 {
 if (str=="")
   {
   document.getElementById("center").innerHTML="";
   return;
   } 
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()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("center").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","xhr_php/get_page.php?page="+str,true);
 xmlhttp.send();
 }

Answer 1

The jquery styling script runs, then it is done. If you want it to run again after your ajax call, put it in a function and call the function on success.

function dostuff() 
{
    $('selector').css('var', 'val');
}

The success case is when status==200 and readyState==4, fire your js css tweaks in there after you’ve inserted the HTML response.

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("center").innerHTML=xmlhttp.responseText;
        dostuff();
    }
}