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.

why don't you use $.ajax instead of pure xhr? using xmlhttp is your requirement? if not you can use [$.ajax](http://api.jquery.com/jquery.ajax/), Secondly Please make sure you have used delegate for dynamic elements .click() does not properly work when you are using ajax. — Talha Habib, Apr 11 '16 at 06:27
Initialize the `multi-select` widget after `document.getElementById("and").innerHTML = xmlhttp.responseText;` — Rayon, Apr 11 '16 at 06:27
where are choosen.css, choosen.js and multiselect.js included? do they need any initialization code for the selected element to work — Velimir Tchatchevsky, Apr 11 '16 at 06:32

score 1 · Answer 1 · answered Apr 11 '16 at 06:34

1

you have to intialize choosen again after the ajax is complete and content is loaded in your html page.it is not working correctly becuase when choosen was initialized the html was not there in the DOM.

answered Apr 11 '16 at 06:34

Gaurav Srivastava

3,232
3
16
36

score 0 · Accepted Answer · answered Apr 11 '16 at 06:37

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>

score -1 · Answer 3 · edited May 23 '17 at 12:31

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

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

3 Answers3