How to cancel all the old XHR (http / ajax ) requests on state change (url change) - AngularJS Interceptor

I am working on an AngularJS app which earlier was a jquery based web app. Still some global utilities are using jquery and we haven't yet converted that fully to AngularJS.

The whole app workflow is now handled with state changes using Angular UI Router. So, on state change, we will send the XHR requests for partial templates which will be filled on content area and also other functionalities required for the new state.

Now, we face an issue.  If we switch the navigation fast.. ie. if we change state fast, the html of the old state is first showing on the content area, even though it is not relevant any more.

So, I did some google search and found some useful posts.

Cancelling Ajax requests in AngularJS Applications

Interceptors in AngularJS and Useful Examples

Aborting An AJAX Request In AngularJS Using httpi

Here is the summary of what I got from these posts and others:

1. We can create a custom interceptor for AngularJS http requests. With this custom interceptor, we can add some custom functionalities for the following states:
a. request - On request success
b. requestError - On request failure
c. response - On response success
d. responseError - On response failture

2. Jquery Ajax has a ajaxSend function. In that we can get the xhr object.


So, lets do this step by step. I am not going to tell how to create the interceptor because which is clearly given in the above posts.

First we need to save all the requests so that we can cancel them later if needed.

So, first lets create an empty object.

In currentRequests, I have created two objects, http and ajax, for handling angular http requests, and jquery ajax requests respectively.

First, we will save the jquery ajax requests using the ajaxSend function.

Here we will get xhr as a parameter. So, we just need to save it. I am saving url also as the key, in case it is required at a later point.


Now, we have to save the Angular http requests.For the we have to check the request property of our  custom Interceptor. request function has a config parameter which contains all the info for the http request. In that, timeout property is the one we are interested in. If we check the angular code, we can see that, timeout is a promise which if resolved will do xhr abort. So, to use this, we we create a custom deferred object using $q and we will save the deferred object.

In this code, we are creating the deferred object, deferred. Promise object of the deferred is passed to config.timeout property. We will save our deferred object in currentRequests object.


Now that we have saved all the requests, we just need to loop through each xhr objects and just abort it.

I haven't finalized on it. Please add your suggestions/corrections in the comments.

You can see the gist here  - GlobalAjaxInterceptor

Read More

JavaScript in UpdatePanel

Javascript events don't work after the UpdatePanel does a partial page update.

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

Soln1: Re-subscribe to the events I need after every update. I use $(document).ready() for the initial load, then this snippet below to re-subscribe every update.

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
// re-bind your jquery events here
});

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.

Soln2: Use jQuery's live() event subscriber
$(document).ready(function () {
$("#Button2").live("click", function () {
alert("test");
});

});


Soln3:


where bind is the jquery function

Where bind is the jquery function

Read More

Issue when using AsyncFileUpload control

I tried to use AsyncFileUpload control in a page. The AsyncFileUpload control was placed inside the first view of a multiview control. The page required a querystring parameter, and if the parameter is not present, the second view of the multiviewcontrol will be shown. This check is made on the Page Load event. This causes issue on the fileupload process. It was giving error, since on the postback, it gets another view. So, I did like this.

on the event "OnClientUploadStarted", I gave a value to a hidden element, and on page load, a checking is made, to see, if the value is given for the hidden element. If the value is given, the view1 itself will be shown without checking the availability of querystring parameter.

Don't know if that is the correct method. Anyhow, it worked.

Read More

Showing JavaScript confirmation after Client Validation

Some time we use javascript to display alert or confirmation box on button click. But, if we are using ajax validation on that page, that will work only after post back if we click ok on the confirmation box. So, to display the confirmation box, only if the page is valid, Check this link

Read More

Ajax and UpdatePanel performance improvement

Most of the newbie programmers like me are ajaxifying a site by putting updatepanels all over the site. Now, I came to know that, putting updatepanel will not help you to improve your site's speed. We are using it, since it is very easy. You can understand why ajax updatenpanels should be avoided from the following link

Why UpdatePanel Dangerous



If you still want to use updatepanel, check the following link to speed up the updatepanel performance.

Speeding up UpdatePanel



Also, you can use a dll, scriptreferenceprofiler, to find the ajax scripts used in a page and combine them, so that, only that script requests will be used in that specific page, which reduces the loading time. You can understand how to use it from the following msdn video.

Script Combining

You can download ScriptReferenceProfile from the following url
Download

Use them as follows

Add reference to the dll.
<%@ Register Assembly="ScriptReferenceProfiler" Namespace="ScriptReferenceProfiler" TagPrefix="cc1" %>

Read More

Display updateprogress in the clicked position

On the following example, progress bar(UpdateProgress1) is displayed on the position of the button which got clicked


function pageLoad()

     {     

           var manager = Sys.WebForms.PageRequestManager.getInstance();
   
          
       manager.add_beginRequest(OnBeginRequest);
   
    }

    function OnBeginRequest(sender, args)
    {
 
          var postBackElement = args.get_postBackElement();
          var position = $("#"+postBackElement.id).offset();
         
         
          $("#<%=UpdateProgress1.ClientID%>").css({'position' : 'absolute', 'z-index' : '1002', 'overflow' : 'auto','top' : position.top,'left' : position.left}).fadeIn(100);

}

Read More