Question

may ajax append 2 same results on the table when i accidentally double click on the button. is there a way to stop ajax from returning 2 or more result when i click the search button? i tried to abort the ajax but the result is the same. im just a newbie in ajax so help me guys

$("#btn_searchadmin").click(function(){

    var adminname = $("#tb_admin").val();
    var ajax;


    if(ajax){

      ajax.abort();
    }

     ajax = $.ajax({
                    type: "post",
                    url: "manage_deped_searchadmin.php",
                    dataType:'json',
                    cache:false,
                    data:{'adminname': adminname},


                    beforeSend: function(data){

                      $('#tbl_search').html('');


                    },

                    success: function(data){

                      $("#btn_searchadmin").bind('click');

                      $.each(data, function(i, item) {

                        $('#tbl_search').append("<tr><td>"+data[i].adminfname+"</td>  <td>"+data[i].adminlname+"</td>");

                      });
                    }
          });

  });

Answer 1

There are two basic approaches to this. I will give you a text answer rather than code.

• Disable the button as soon as it is clicked, and re-enable it when the ajax has responded (eg in the complete handler);
• Leave the button enabled but abort any unresolved previous ajax call resulting from an earlier click.

Both of these approaches are valid and which you choose depends entirely on the application.

• Choose approach 1 if a second ajax call must be disallowed until the first has completed.
• Choose approach 2 if a second ajax call should be allowed to override an earlier one.