It's B

Category: javascript

  • WordPress AJAX using Backbone JS

    WordPress AJAX using Backbone JS

    WordPress has default backbone js included and we can use backebone.js for ajax in WordPress.

    We just need to include it. I’ve created an example of ajax using backbone.

    All you need to do is check the following link.

    https://github.com/BhargavBhandari90/wp-tips/tree/main/wp-backbone-ajax

  • 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.

     

  • Change URL without reloading page using Javascript

    Change URL without reloading page using Javascript

    This will be possible if your browser supports HTML5. You can do that by below small code.

    var title = 'Your Title',
    url   = 'https://yoursite.url';
if (typeof (history.pushState) != "undefined") {
    var obj = { Title: title, Url: url };
    history.pushState(obj, obj.Title, obj.Url);
}

    You can remove a title from the object ( `obj` ) if you don’t want to change the page title. In that case, the second parameter in pushstate function will be blank. like below:

    history.pushState(obj, '', obj.Url);

    That’s it

  • Need Help… How to use trigger event in backbone?

    So I have a script where I am trying to trigger click event by jQuery.

    Here is the syntax $( '#selector' ).trigger( 'click' ).

    But that will work if the click event function is written in jQuery.

    What if click event is written in backbone? How can I trigger click for that?

    If anyone has idea, then please reply for this.

  • Alternative for URLSearchParams

    IE doesn’t support “URLSearchParams”. So sometimes your script will not work in IEs.

    So the alternative for the “URLSearchParams” is as below.

    window.getUrlParameter = function( keyword, query_string ) {
    keyword = keyword.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp( keyword + '=([^&#]*)');
    var results = regex.exec( query_string );
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

     

    We can use the above function like this:

    Suppose you have query string like “abc=test&action=wow” and you want to search values of the particlular query string. So you can use it something like below:

    var query_string = 'abc=test&action=wow';

getUrlParameter( 'abc', query_string ); // You will get value "test"

getUrlParameter( 'action', query_string ); // You will get value "wow"