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);
}
});
}