How to add AJAX in WordPress | WordPress | Beginners Tutorial

I’ve made a video for this tutorial. Because that’s the easiest way to show how WordPress AJAX works. And this is for the beginners. So please watch the video carefully and I am sure you will definitely clear about WordPress AJAX.

And if you like the video then subscribe my channel and share this with others who wants to learn WordPress.

Abort all running ajax on click jQuery

There may be times you want to stop ajax request on some event like on click, hover etc…

In my case, I wanted to run an ajax on click, but I wanted to cancel all other ajax request to be stopped before my ajax. So after lots of finding I found one solution here.

I used the last snippet because I didn’t get how I to use the above 2 snippets.

Below is the code worked for me:

$( document ).on( 'ready', function () {

	var xhrQueue = []; 

	$(document).ajaxSend(function(event,jqxhr,settings){
	    xhrQueue.push(jqxhr); //alert(settings.url);
	});

	$(document).ajaxComplete(function(event,jqxhr,settings){
	    var i;   
	    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
	        xhrQueue.splice(i,1); //alert("C:"+settings.url);
	    }
	});

	window.ajaxAbort = function (){  //alert("abortStart");
	    var i=0;
	    while(xhrQueue.length){ 
	        xhrQueue[i++].abort(); //alert(i+":"+xhrQueue[i++]);
	    }
	};

})

Then I used ajaxAbort(); on my click event. And that’s it!!! All the previous ajax is stopped as shown in the video.