jQuery AJAX Complete

Allows you to attach an custom event handler after Ajax request complete, you can use it to show an alert message when Ajax complete or to process the data returned by Ajax.

How to use
$(document).ajaxComplete(function() {
    //your code here
});
ExamplejQuery AJAX complete
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>

<!-- CSS -->
<style type="text/css">
.left-col {
    float: left;
    width: 250px;
    height: 200px;
}

.right-col {
    float: right;
    width: 250px;
    height: 200px;
}

.result {
    margin-top: 2px;
    background-color: #000000;
    color: white;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

#retriever {
    float: left;
    width: 100px;
    position: relative;
}

#button {
    float: left;
}

#result {
    overflow: auto;
}
</style>


<!-- Javascript -->
<script>
$(document).ready(function () {
	$("#btnSend").click(function () {
		$(this).attr("disabled", true);

		$.ajax({
			type: "GET",
			url: "/backend/data/ajax1.htm",
			success: function (data) {
				$("#retriever").text(data);
			}
		});
	});
});

/** $.ajaxComplete	*/
$(document).ajaxComplete(function (event, xhr, settings) {
	//makes text returned from ajax slide to the left container
	$("#retriever").delay(500).animate({
		"left": "-=330px"
	}, "slow");

	$("#retriever").fadeOut(300, function () {
		var text = $(this).text();
		var div = $("<div/>").text(text).addClass("result").hide();

		$("#result").prepend(div);
		//fade in effect for the div just inserted
		$("#result div:first").fadeIn(1000);

		$(this).removeAttr("style").text("");
		$("#btnSend").attr("disabled", false);
	});
});
</script>

<!-- HTML -->
<div id="result" class="well left-col"></div>
<div class="right-col">
    <div id="retriever"></div>
    <div id="button">
        <input type="button" id="btnSend" value="Trigger AJAX" class="btn btn-primary btn-small">
    </div>
</div>



ExamplejQuery AJAX complete with different request url
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>

<!-- CSS -->
<style type="text/css">
.left-col {
    float: left;
    width: 250px;
    height: 200px;
}

.right-col {
    float: right;
    width: 150px;
    height: 200px;
}

.result {
    margin-top: 2px;
    background-color: #000000;
    color: white;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.retriever {
    float: left;
    width: 100px;
    position: relative;
}

#button {
    float: left;
}

#result {
    overflow: auto;
}
</style>


<!-- Javascript -->
<script>
$(document).ready(function () {
	$("#btnSend1").click(function () {
		$(this).attr("disabled", true);
		$("#retriever1").load("/backend/data/ajax1.htm");
	});

	$("#btnSend2").click(function () {
		$(this).attr("disabled", true);
		$("#retriever2").load("/backend/data/ajax2.htm");
	});

	$("#btnSend3").click(function () {
		$(this).attr("disabled", true);
		$("#retriever3").load("/backend/data/ajax3.htm");
	});
});

/** $.ajaxComplete	*/
$(document).ajaxComplete(function (event, xhr, settings) {
	var retriever, colorClass;

	if (settings.url == "/backend/data/ajax1.htm") {
		retriever = $("#retriever1");
		colorClass = "";
	} else if (settings.url == "/backend/data/ajax2.htm") {
		retriever = $("#retriever2");
		colorClass = "green";
	} else if (settings.url == "/backend/data/ajax3.htm") {
		retriever = $("#retriever3");
		colorClass = "blue";
	}

	//makes text returned from ajax slide to the left container
	retriever.delay(500).animate({
		"left": "-=400px"
	}, "slow");

	retriever.fadeOut(300, function () {
		var text = $(this).text();
		var div = $("<div/>").text(text).addClass("result " + colorClass).hide();
		var sequence = $(this).attr("id").replace("retriever", "");

		$("#result").prepend(div);
		//fade in effect for the div just inserted
		$("#result div:first").fadeIn(1000);

		$(this).removeAttr("style").text("");
		$("#btnSend" + sequence).attr("disabled", false);
	});
});
</script>

<!-- HTML -->
<div id="result" class="well left-col"></div>
<div class="right-col">
    <div id="retriever1" class="retriever"></div>
    <div id="retriever2" class="retriever"></div>
    <div id="retriever3" class="retriever"></div>
    <div id="button">
        <input type="button" id="btnSend1" value="Trigger AJAX 1" class="btn btn-primary btn-small">
        <input type="button" id="btnSend2" value="Trigger AJAX 2" class="btn btn-primary btn-small">
        <input type="button" id="btnSend3" value="Trigger AJAX 3" class="btn btn-primary btn-small">
    </div>
</div>


comments powered by Disqus