jQuery AJAX success and error

When you`re using Ajax requests with success or error event handling, you could do this
$.ajax({
	url: "/backend/data/ajax1.htm",
	success: function(){
		//your code here
	},
	error: function(){
		//your code here
	}
});
but what if you have multiple ajax requests and you only want to write success or error handler once, or you want to catch error in load() method. here is what you can do 
$(document).ajaxError(function (event, jqxhr, settings) {
	//your code here
})
.ajaxError() will be triggered no matter which request is completed.

Next thing you want to know is to tell apart from each requests, you can use the parameter settings.url to distinguish different urls.
$(document).ajaxError(function (event, jqxhr, settings) {
	if (settings.url == "/backend/data/ajax1.htm") {
		//your code here
	}...
});

ExampleAjax error
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://static.pureexample.com/css/example/bootstrap.min.css" rel="stylesheet">

<!-- Javascript -->
<script>
$(document).ready(function () {
	$("#btnAjax").click(function () {
		$.ajax({
			url: "http://nosub.pureexample.com/nonexistentfile.htm"
		});
	});

	$("#btnGetjson").click(function () {
		$.getJSON("http://nosub.pureexample.com/nonexistentjsonfile.htm");
	});
});

$(document).ajaxError(function (event, jqxhr, settings) {
	if (settings.url.indexOf("nonexistentfile.htm") != -1) {
		$("#message1").fadeIn(800);
	} else if (settings.url.indexOf("nonexistentjsonfile.htm") != -1) {
		$("#message2").fadeIn(800);
	}
});
</script>

<!-- HTML -->
<div>
	<p>Simulate ajax error by using $.ajax()</p>
	<input id="btnAjax" type="button" value="do Ajax" class="btn btn-primary">
</div>

<div id="message1" class="alert alert-error" style="display:none">  
	<p><strong>Warning!</strong> An error has occurred.</p>
	url: "http://nosub.pureexample.com/nonexistentfile.htm"
</div>

<p></p>

<div>
	<p>Simulate ajax error by using $.getJSON()</p>
	<input id="btnGetjson" type="button" value="do GetJSON" class="btn btn-primary">
</div>

<div id="message2" class="alert alert-error" style="display:none">  
	<p><strong>Warning!</strong> An error has occurred.</p>	
	url: "http://nosub.pureexample.com/nonexistentjsonfile.htm"
</div>




ExampleAjax success
Source Code Expand
<link href="http://static.pureexample.com/css/example/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script>
$(document).ready(function () {
	$("#btnAjax").click(function () {
		$.ajax({
			url: "/backend/data/ajax1.htm"
		});
	});

	$("#btnLoad").click(function () {
		$("#response2").load("/backend/data/ajax2.htm");
	});
});

$(document).ajaxSuccess(function (event, jqxhr, settings) {	
	if (settings.url == "/backend/data/ajax1.htm") {
		$("#response1").text(jqxhr.responseText);
		$("#message1").fadeIn(800);
	} else if (settings.url == "/backend/data/ajax2.htm") {
		$("#message2").fadeIn(800);
	}
});
</script>

<!-- HTML -->
<div>
	<p>Simulate ajax success by using $.ajax()</p>
	<input id="btnAjax" type="button" value="do Ajax" class="btn btn-primary">
</div>

<div id="message1" class="alert alert-success" style="display:none">  
	<p><strong>Success!</strong> </p>
	Server response : <span id="response1"></span>
</div>

<p></p>

<div>
	<p>Simulate ajax success by using .load()</p>
	<input id="btnLoad" type="button" value="do Load" class="btn btn-primary">
</div>

<div id="message2" class="alert alert-success" style="display:none">  
	<p><strong>Success!</strong></p>	
	Server response : <span id="response2"></span>
</div>


comments powered by Disqus