JQuery AJAX Timeout Issue

jQuery ajax default timeout is unlimited (=0).

Set/Detect Timeout on JQuery AJAX – http://stackoverflow.com/questions/5225597/set-timeout-for-ajax-jquery

http://stackoverflow.com/questions/4148830/anyone-know-the-jquery-default-timeout-value

Browser will have default timeout which controls the request/ response. For IE Refer – http://support.microsoft.com/kb/181050

Online editor to try html/script/css – http://jsfiddle.net/tSW7M/

script.aculo.us – JS libraries

script.aculo.us provides JS libraries for animation, drag and drop, Ajax controls, DOM utilities, and unit testing. Good to know.

http://script.aculo.us/

ASP.NET AJAX Techniques – Link

http://www.codeproject.com/KB/ajax/IntroAjaxASPNET.aspx

ASP.NET callbacks for AJAX using ICallbackEventHandler interface, AJAX Pro (http://ajaxpro.codeplex.com/) some interesting techniques which are good to know even though we have some latest and simple AJAX techniques like JQuery AJAX.

AJAX Sample

1. JQuery – AJAX

 

jQuery.ajaxSetup( options ) – A set of key/value pairs that configure the default Ajax request. All options are optional.

Ex:
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”,
data: myData
});

Sets the defaults for Ajax requests to the url “/xmlhttp/”, disables global handlers and uses POST instead of GET. The above Ajax request then sends some data without having to set anything else.

Note: Global callback functions should be set with their respective global Ajax event handler methods-.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather than within the settings object for $.ajaxSetup().

Show a loading message before AJAX request starts

Ex:
$(“#loading”).ajaxStart(function(){
$(this).text(‘Triggered ajaxStart handler.’);
//$(this).show();
});

2. Microsoft AJAX Toolkit Sample

 

<div id=”OverlayContent”>

Content will be shown here!

</div>

<div class=”data”>

<div class=”bums clearfix”>

<div class=”bum”>

<a href=”#” class=”bumoverlay” data-bumid=”556119″>

<img src=”default_large.jpg”/>

</a>

</div>

<div class=”bum”>

<a href=”#” class=”bumoverlay” data-bumid=”556119″>

<img src=”default_large.jpg”/>

</a>

</div>

</div>

<div class=”lists clearfix”>

<div class=”list”>

<a href=”#” class=”listoverlay” data-listid=”2″ data-uid=”10″>

<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>

</a>

</div>

<div class=”list”>

<a href=”#” class=”listoverlay” data-listid=”3″ data-uid=”10″>

<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>

</a>

</div>

</div>

</div>

<script>

var OverlayControl = function() { }

OverlayControl.prototype = {

Key : ‘MediaContent’,

ShowbumOverlay : function(e, element) {

var aid = element.getAttributeNode(‘data-bumid’).value;

var r = new Sys.Net.WebRequest();

r.set_url(‘/Modules/abc.asmx/GetData?’);

r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘bum;’ + aid));

r.set_httpVerb(‘POST’);

r.set_userContext(this);

r.add_completed(e.ResponseHandler);

r.invoke();

},

ShowlistOverlay : function(e, element) {

//alert(this.childNodes[0].getAttributeNode(‘data-uid’).value);

var listid = element.getAttributeNode(‘data-listid’).value;

var uid = element.getAttributeNode(‘data-uid’).value;

var r = new Sys.Net.WebRequest();

r.set_url(‘/Modules/abc.asmx/GetData?’);

r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘list;’ + listid + “;” + uid));

r.set_httpVerb(‘POST’);

r.set_userContext(this);

r.add_completed(e.ResponseHandler);

r.invoke();

},

HideOverlay : function(e, element) {

var target = $(‘#OverlayContent’);

target[0].innerHTML = “Content will be shown here!”;

},

ResponseHandler: function(executer, args) {

var ele = executer.get_webRequest().get_userContext();

//try

//{

if (executer.get_responseAvailable())

{

var result = executer.get_xml();

var target = $(‘#OverlayContent’);

if (document.all)

target[0].innerHTML = result.documentElement.firstChild.text;

else // Firefox  

target[0].innerHTML = result.documentElement.firstChild.textContent;

}

//}

//finally {

// userContext._requestingData = false;

//}

}

};

var overlayCtrl = new OverlayControl();

// Attach event (mouseover, mouseout) & event handler to every bum <a> tag

var bums = $(‘.bumoverlay’);

for(i=0;i <>

var currentbum = bums[i];

$addHandler(currentbum , “mouseover”,

// javascript closures implementation in for-loops – http://www.mennovanslooten.nl/blog/post/62

function(overlayCtrl, currentbum ) {

return function() {

overlayCtrl.ShowbumOverlay.apply(currentbum , [overlayCtrl, currentbum ]);

}

}(overlayCtrl, currentbum )

);

$addHandler(currentbum , “mouseout”,

function(overlayCtrl, currentbum ) {

return function() {

overlayCtrl.HideOverlay.apply(currentbum , [overlayCtrl, currentbum ]);

}

}(overlayCtrl, currentbum )

);

}

// Attach event (mouseover, mouseout) & event handler to every list <a> tag

var lists = $(‘.listoverlay’);

for(i=0;i <>

var currentlist = lists[i];

$addHandler(currentlist, “mouseover”,

function(overlayCtrl, currentlist) {

return function() {

overlayCtrl.ShowlistOverlay.apply(currentlist, [overlayCtrl, currentlist]);

}

}(overlayCtrl, currentlist)

);

$addHandler(currentlist, “mouseout”,

function(overlayCtrl, currentlist) {

return function() {

overlayCtrl.HideOverlay.apply(currentlist, [overlayCtrl, currentlist]);

}

}(overlayCtrl, currentlist)

);

}

</script>