CSS, Java script not working properly after ajax call in php

Question

I have called an ajax function in php page which works correctly and gives output as per requirement, but after ajax call, it does not return default css and javascript property to the Input type select,

Following is the code i have used for ajax call

<script>
function ajax_call(str) {
    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("and").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("POST","ajaxpage.php?q="+str,true);
    xmlhttp.send();
}
</script>

it is returning ajaxpage.php in output, now i have one dropdown in the ajaxpage.php page , which is using choosen.css, choosen.js and multiselect.css as well as multiselect.js, but this dropdown is not working correctly and none of above css and js are working correctly because of above ajax page call, i have applied all the css and js in main page, please help me to solve this problem.

Answer 1

在ajax完成并且你的html page中加载了内容之后你必须再次选择初始化。因为当初始化选择时，你的内容不存在于DOM中，因此无法正常工作。

Answer 2

You can try using $.ajax

Below I have used your function name instead you can do in on an click/ change event. IF theResponse , the output of ajaxpage.php is the select box itself you can display it in a div in your parent page

Note: Didnt tested the code below

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 

    function ajax_call(str) {

        $.ajax({
                type: "POST",  
                url: "ajaxpage.php",  
                data: { q:str},
                success: function(theResponse) {

                    // Output from ajaxpage.php
                    alert(theResponse); // comment this

                    }  
            });
    }
});                 
</script>

Answer 3

Include the .css and .js files in the page that makes the ajax request, not in the one that would return it. Also initialize the objects affected by the scripts after the ajax request, since before it the html of the elements in question won't be loaded. Also you can use the .on method to bind functions to elements that don't yet exist in the DOM - check here for more info on the .on method Attaching click event to a JQuery object not yet added to the DOM