Jquery with ajax example

Step by step use JQuery with Ajax

1.  Add jquery-1.9.1.min.js or higher before call ShowUnit function
2.  give loader image: <span id="loader" style="display: none;margin: 250px 0 0 450px;position: absolute; float:left;"><img src="images/loader.gif"></span>
3.  give wrrapper div: <div id="wrapper">
4.   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>
5.  give responsed :
<div id="show_list">&nbsp;</div>

6.  close wrapper div : </div>
7.  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); }
});
 }