防止搜索时刷新Ajax

Question

I have this code which permits me to reload the content of a page every few seconds.

function()
{
$('#lista').show().load('listaupdate.php').fadeIn("slow");}, 3000);

Now, the issue is, i have a search form there, but, how should i prevent refreshing when searching?

Or it can refresh ok, but after the search has been done, and after the results were given. It's the same issue with pagination, if i go to page 2, then it refreshes and takes me to page 1.

How can i solve this? Thanks

search form:

<form action="listasearch.php" method="post">
<select name="kategoria">
  <option value="dyqani_pergjegjes">Dyqani Përgjegjës</option>    
</select> 
<input type="text" name="search">
 <input type="submit">
</form>

Answer 1

The way I see this you have two options:

1. Option 1 : Make the listaupdate.php return just the data and make AJAX call to it, rather than load and the build the markup in the complete handler (the idea is there it no point to reload the whole page, including the search form - just the data that needs updating). See http://api.jquery.com/jQuery.get/

2. Option 2 - cancel updates when search field is being used by the user ( frankly not the better solution, but still). Do something like :

   var interval = setInterval(function(){
   $('#lista').show().load('listaupdate.php').fadeIn("slow");}, 3000);
   

listen for some search-related event (make one of your own if focus deosn't fit the case):

$('input[name="search"]').on("focus", function(event){
     interval = clearInterval(interval);
});

// restart it when search is done
$("form").submit( function(event){
         interval = setInterval(function(){
        $('#lista').show().load('listaupdate.php').fadeIn("slow");}, 3000);
  });