|
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:
|
