What is data-ajax attribute?
Last Updated :
03 Oct, 2023
The data-ajax attribute is a custom HTML attribute used for storing AJAX-related information in an element, guiding JavaScript interactions, and AJAX requests for dynamic content loading or updates.
The data-ajax attribute allows to activation of unobtrusive AJAX. Unobtrusive AJAX is an add-on on jQuery libraries that minimizes the requirement of writing a long script for making AJAX requests. The data-ajax attribute must be set to true to send unobtrusive AJAX requests
Callbacks provided by data-ajax:
There are various callbacks provided by data-ajax like below:
- Data-ajax: Must be set to true to activate unobtrusive Ajax on the target element.
- data-ajax-confirm: display in a confirmation window before a request is submitted.
- data-ajax-method: specifies HTTP request method (“Get” or “Post”).
- data-ajax-begin: name of the JavaScript function to call immediately before the page is updated.
- data-ajax-complete: JavaScript function to call when response data has been instantiated but before the page is updated.
- data-ajax-failure: JavaScript function to call if the page update fails.
- data-ajax-success: JavaScript function to call after the page is successfully updated.
- data-ajax-update: ID of the DOM element to update by using the response from the server.
- data-ajax-url: URL to make the request to.
Required Libraries:
We need to import AJAX library to the page using below CDN url Or you can also install it using files.
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"
integrity=
"sha512-DedNBWPF0hLGUPNbCYfj8qjlEnNE92Fqn7xd3Sscfu7ipy7Zu33unHdugqRD3c4Vj7/yLv+slqZhMls/4Oc7Zg=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
Syntax:
The data-ajax attribute must be specified on anchors and forms in HTML . It must be set to true to activate unobtrusive AJAX.
<form method="post" data-ajax="true" data-ajax-method="post">
<FORM_CONTENT>
</form>
<a class="btn btn-primary" data-ajax="true" data-ajax-update="#response" data-ajax-url="/content">Load</a>
Example 1: Using data-ajax-complete: In this example we will send form data to sample API using Post request. The data-ajax attribute is set to true and we have also specified other data-ajax-url which is URL of API . Request method is specified using data-ajax-method. On successful completion of AJAX ‘completed()’ function is called which is specified using data-ajax-complete .
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< script src =
integrity =
"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha512-DedNBWPF0hLGUPNbCYfj8qjlEnNE92Fqn7xd3Sscfu7ipy7Zu33unHdugqRD3c4Vj7/yLv+slqZhMls/4Oc7Zg=="
crossorigin = "anonymous"
referrerpolicy = "no-referrer" >
</ script >
< title >GeeksForGeeks</ title >
< style >
body {
text-align: center;
}
h1 {
padding: 2px;
color: green;
font-weight: bolder;
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
div {
font-weight: bold;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
< h2 >data-ajax Attribute</ h2 >
< form data-ajax = "true"
data-ajax-method = "post"
data-ajax-complete = "completed"
method = "post" >
< input type = "text"
name = "name"
id = "name"
placeholder = "Name" >
< input type = "text"
name = "job"
id = "job"
placeholder = "Job" >
< button type = "submit" >Send Post Data</ button >
</ form >
< div id = "response" ></ div >
</ body >
< script >
completed = function (xhr) {
$('#response').text(xhr.responseText);
};
</ script >
</ html >
|
Output:
Example 2: Using data-ajax-success: In this example, we will load list of users from API and display them. Here we have specified data-ajax-success attribute which specifies function to call after successful AJAX . The function will display reponse in response field . We have also specified data-ajax-confirm which shows confirmation alert on submit.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet"
href =
integrity =
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha512-DedNBWPF0hLGUPNbCYfj8qjlEnNE92Fqn7xd3Sscfu7ipy7Zu33unHdugqRD3c4Vj7/yLv+slqZhMls/4Oc7Zg=="
crossorigin = "anonymous"
referrerpolicy = "no-referrer" >
</ script >
< title >GeeksForGeeks</ title >
< style >
body {
text-align: center;
}
h1 {
padding: 2px;
color: green;
font-weight: bolder;
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
div {
font-weight: bold;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
< h2 >data-ajax Attribute</ h2 >
< a class = "btn btn-primary"
data-ajax = "true"
data-ajax-method = "get"
data-ajax-confirm = "Are You Sure?"
data-ajax-success = "succeed"
Load Users
</ a >
< div id = "response" ></ div >
</ body >
< script >
succeed = function (xhr) {
$('#response').text(JSON.stringify(xhr.data));
};
</ script >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...