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=
"https://code.jquery.com/jquery-3.7.0.min.js"
integrity=
"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous">
</script>
<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>
<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"
data-ajax-url="https://reqres.in/api/users"
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
<script src=
"https://code.jquery.com/jquery-3.7.0.min.js"
integrity=
"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous">
</script>
<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>
<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"
data-ajax-url="https://reqres.in/api/users?page=1">
Load Users
</a>
<div id="response"></div>
</body>
<script>
succeed = function (xhr) {
$('#response').text(JSON.stringify(xhr.data));
};
</script>
</html>
Output:
Similar Reads
HTML data Attribute
The HTML data Attribute is used to specify the URL of the Embedded file of the Object. It can be used with the <object> element. Syntax: <object data="URL">Attribute Values: It contains a single value URL which is used to specify the source of the object.The possible values of URL are:ab
2 min read
HTML data-* Attributes
The HTML data-* attributes allow you to store custom data directly in HTML elements, making passing information between HTML and JavaScript easier. This method improves interactivity in web applications without requiring server-side involvement or AJAX calls.Syntax<li data-book-author="Rabindra N
3 min read
What are HTML Attributes ?
HTML attributes are the entities that provide the extra information about the tags. Attributes are specified using name and value pair. Some HTML tags are used without attributes while for some tags it's important to specify attributes along with them. In paired tags attributes are specified in the
3 min read
What is Data Architecture?
Data architecture is the body of rules that defines within the firm how data is gathered, kept, managed, and utilized. The data architecture is the toolset, policies, and standards that help in managing the handling of data assets properly. Data is a vital asset in this respect so it can drive decis
15+ min read
HTML | data value attribute
The HTML data value attribute is used to Specify the machine-readable translation of the content of the element.Syntax: <data attribute> Contents... </data> Example: html <!DOCTYPE html> <html> <head> <title>data tag</title> </head> <body> <h1
1 min read
What are custom attributes in HTML5 ?
Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our information to HTML tags. These attributes store private information specific to a page or application, providing a way to add custom data to HTML elementsAny attr
3 min read
HTML list Attribute
The HTML list attribute associates an input field with a datalist element, providing a predefined list of options for user selection.Usage: This attribute is used by the <input> element.Syntax: <input list="name">Where name is a string that will work as id and will be used to link the
3 min read
HTML is Attribute
The HTML is attribute global attribute allows a standard element to adopt behavior defined by a custom built-in element, but only after the custom element is defined.Syntax<tag is="word-count"></tag>Here, the tag could be any HTML tag.HTML is Attribute ExampleExample 1: In this example,
2 min read
HTML Class Attribute
The HTML class attribute is used to assign one or more CSS classes to an HTML element. By using classes, you can group elements together and apply consistent styles across them, streamlining both design and functionality.HTML class attribute Supported Tags: It supports all HTML elements. Syntax<t
3 min read
What is Ajax ?
Imagine browsing a website and being able to submit a form, load new content, or update information without having to refresh the entire page. That's the magic of AJAX. Asynchronous JavaScript and XML (AJAX) is a web development technique that allows web pages to communicate with a web server asynch
5 min read