My page consists of a header where all my javascript is located. Within the body of the page, there is a link that triggers an ajax http request using vanilla JavaScript (not jQuery). This request retrieves a PHP form and injects it onto my page.
The PHP form contains select dropdowns that are styled using jQuery. The issue I am facing is that when I directly include the form in the page, the select dropdown appears formatted correctly upon page load. However, when I remove the form from the page and bring it in via ajax, the styling does not apply as if the javascript is not loading.
It seems like the javascript is loaded during the initial page load but fails to work properly when the PHP form is fetched through ajax. The select dropdown loses its styling. It's almost like the javascript needs to be reloaded or something along those lines.
I am not utilizing jQuery for this ajax call, just plain old vanilla JavaScript.
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();
}