- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to handle jQuery AJAX success event?
To handle jQuery AJAX success event, use the ajaxSuccess() method. The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
Here is the description of all the parameters used by this method −
- callback − The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.
Let’s say we have the following HTML content in result.html −
<h1>THIS IS RESULT...</h1>
Example
The following is an example showing the usage of this method −
<html>
<head>
<title>jQuery ajaxSuccess() method</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* Global variable */
var count = 0;
$("#driver").click(function(event){
$('#stage0').load('result.html');
});
/* Gets called when request starts */
$(document).ajaxStart(function(){
count++;
$("#stage1").html("<h1>Starts, Count :" + count + "</h1>");
});
/* Gets called when request is sent */
$(document).ajaxSend(function(evt, req, set){
count++;
$("#stage2").html("<h1>Sends, Count :" + count + "</h1>");
$("#stage2").append("<h1>URL :" + set.url + "</h1>");
});
/* Gets called when request completes */
$(document).ajaxComplete(function(event,request,settings){
count++;
$("#stage3").html("<h1>Completes,Count:" + count + "</h1>");
});
/* Gets called when request is stopped */
$(document).ajaxStop(function(event,request,settings){
count++;
$("#stage4").html("<h1>Stops, Count :" + count + "</h1>");
});
/* Gets called when all request completes successfully */
$(document).ajaxSuccess(function(event,request,settings){
count++;
$("#stage5").html("<h1>Success,Count :" + count + "</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage0" style = "background-color:blue;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color:blue;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color:blue;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color:blue;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color:blue;">
STAGE - 4
</div>
<div id = "stage5" style = "background-color:blue;">
STAGE - 5
</div>
<input type = "button" id = "driver" value="Load Data" />
</body>
</html>
Published on 21-Dec-2017 08:07:10
- Related Questions & Answers
- How to handle jQuery AJAX error?
- How to handle a link click event using jQuery?
- How to handle a double click event using jQuery?
- How to handle jQuery events for Ajax post after DOM is loaded?
- How to disable some jQuery global Ajax event handlers for a request?
- How to handle a mouse right click event using jQuery?
- How to handle when checkbox 'checked state' changed event in jQuery?
- What is the difference between Ajax and jQuery-Ajax methods in jQuery?
- What are jQuery AJAX Events?
- How to handle bind an event using JavaScript?
- How to override jQuery event handlers?
- How to handle action event for JComboBox in Java?
- How to handle a Button click event in tkinter?
- How to use POST method to send data in jQuery Ajax?
- How to use GET method to send data in jQuery Ajax?
Advertisements