jquery - php + Ajax + Json page submit -
i have business functionality employee search (ajax), on submitting form. have load employee details using jquery based ajax. following search code. issue after submitting form, <div id="emp"></div>
not populated values. in employee.php
page see json object, able print employees.
i guess below form submitting, not returning page after json object created. me how can make ajax based call.
<!doctype html> <html> <head> <title></title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function () { //alert('test'); $(".js-ajax-php-json").submit(function(){ alert('test'); $.getjson("employee.php", function (jsoncontent) { alert(jsoncontent); jsonarray = jsoncontent; for(var =0;i < jsonarray.length-1;i++) { var emp = jsonarray[i]; $("#emp").html(i+" "+emp[0].lastname + " - " + emp[0].firstname+ " - " ); } }); }); }); </script> </head> <body> <form class="js-ajax-php-json" action="employee.php" method="get"> <div class="input-group"> <input type="text" class="form-control" style='width:300px' name="srch-term" id="srch-term" placeholder="enter employee name"> <span class="input-group-btn"><input type="submit" value="search" class="btn btn-success"></input></span> </div> </form> <div id="emp"></div> </body> </html>
<script type="text/javascript"> $(document).ready(function () { //alert('test'); $(".js-ajax-php-json").submit(function(e){ e.preventdefault(); //prevent form submitting. $.getjson("employee.php", function (jsoncontent) { alert(jsoncontent); jsonarray = jsoncontent; for(var =0;i < jsonarray.length-1;i++) { var emp = jsonarray[i]; $("#emp").html(i+" "+emp[0].lastname + " - " + emp[0].firstname+ " - " ); } }); }); }); </script>
you have missed preventdefault()
prevent form submitting.
Comments
Post a Comment