1

I have result page where result is loaded with ajax and I have jq ui slider for price and checkboxes which change result live. On every change the result is loaded but when I start clicking fast on checkboxes and sliders it call's result every time and at some point it stops working. Placing some timer after every change is not the solution I am looking for.

Yovo
  • 629
  • 3
  • 8
  • 16
  • So what is the solution you're looking for? One that allows people to frantically click everywhere? You should show your code and clarify what you want. – Fosco Jun 08 '11 at 18:48

2 Answers2

1

You need to use a timer, but not one for each change, just 1 global timer. Each time a checkbox is checked, slider is moved, etc, set a timeout of, say, 500ms to submit your ajax request. But each time a change is made, also clear the existing timer, and set a new one.

This way, the submission only occurs after 500ms of inactivity. If the user goes click happy, the timer is cleared every time and only after they stop clicking around does the ajax get submitted.

myForm.find( 'input, textarea, select' ).bind( 'change', function( )
{
   var self = $(this);

   self.attr( 'changed', 'changed' ); // -- mark as modified

   clearTimeout( $(document).data( 'ajaxTimer' )); // -- prevent previous changes from being submitted
   $(document).data( 'ajaxTimer', setTimeout( submitData, 500 )); // -- start new timer for submission
} );

function submitData( )
{
   var allInputs = myForm.find( 'input, textarea, select' );
   var changedInputs.filter( '[changed]' );

   allInputs.removeAttr( 'changed' ); // -- mark all as submitted

   changedInputs.each( function( )
   {
      // gather values here
   } );

   // build your AJAX request here
}
KOGI
  • 3,959
  • 2
  • 24
  • 36
  • maybe this is the solution but I should crawl all input every time to see changes. This is how I see it. Is there any other way to see changes ? – Yovo Jun 08 '11 at 19:16
  • You don't have to crawl all inputs every time. Just the one time to bind the events. When you submit the values, you can either submit them all and let the server decide which ones to use, or you can record the previous value and only submit ones that have changed. Better yet, you can add an attribute to each element indicating if it's been modified or not. See above for an example... – KOGI Jun 08 '11 at 19:25
0

As stated in this answer: Stop AJAX Request using jQuery, you can assign request to some variable and then, if this variable is set, you can stop the already pending request before making another call.

This way, the result that will take effect will be the latest one and there should be no confusion.

I paste here the answer I referenced:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

Then you can abort the request:

request.abort();
Community
  • 1
  • 1
Tadeck
  • 132,510
  • 28
  • 152
  • 198
  • How can I check If ajax call has started. I tried if(request!=""){request.abort();} but it does not work very properly. – Yovo Jun 09 '11 at 10:40
  • @Yovo Try using `if(typeof request!='undefined'){` as condition. – Tadeck Jun 09 '11 at 11:06
  • thanks but I tried several methods like this one and it always break at some point. I call one same function every time and I try to cill it if it is in progress so I belive there is another way to do this If you have any idea how i would like to here it. – Yovo Jun 09 '11 at 12:45