Step by step use JQuery with Ajax
- Add jquery-1.9.1.min.js or higher before call ShowUnit function
- give loader image: <span id="loader" style="display: none;margin: 250px 0 0 450px;position: absolute; float:left;"><img src="images/loader.gif"></span>
- give wrrapper div: <div id="wrapper">
- give <center> <p>Project Name : <select name="sel_project1" id="sel_project1" onChange="return ShowUnit('show_list',this.value); "> <option value="">Select</option> <?php echo $projectOption; //fetch project list dynamically?> </select></p>
- give responsed : <div id="show_list"> </div>
- close wrapper div : </div>
- Add below code in js file or in between javascript tag
function ShowUnit(div,prid)/*give function name according to your code*/
{
$.ajax({ url: "show_units.php", //type response file name here
type: "POST", //method get/post
dataType: "html",
data :{prid: prid,ar1:$("#sel_area").val(),typ:$("#sel_type").val()} ,
beforeSend: function (){
$("#loader").css("display","block");//show loader image
$("#wrapper").css("opacity","0.2");/*set opacity from 1 to 0.2 of wrapper div when loading data or showing loader image*/
},
success: function (data, textStatus, xhr){
$("#"+div).html(data);//get response on given div id
$("#loader").css("display","none");/*after showing data hide loader image div*/ $("#wrapper").css("opacity","1");/*after showing data set opacity to 1 of wrapper div*/
},
error: function(xhr,textStatus,errorThrown){
$("#"+div).html(textStatus); }
});
}
{
$.ajax({ url: "show_units.php", //type response file name here
type: "POST", //method get/post
dataType: "html",
data :{prid: prid,ar1:$("#sel_area").val(),typ:$("#sel_type").val()} ,
beforeSend: function (){
$("#loader").css("display","block");//show loader image
$("#wrapper").css("opacity","0.2");/*set opacity from 1 to 0.2 of wrapper div when loading data or showing loader image*/
},
success: function (data, textStatus, xhr){
$("#"+div).html(data);//get response on given div id
$("#loader").css("display","none");/*after showing data hide loader image div*/ $("#wrapper").css("opacity","1");/*after showing data set opacity to 1 of wrapper div*/
},
error: function(xhr,textStatus,errorThrown){
$("#"+div).html(textStatus); }
});
}