In this article we will show you the solution of jQuery on page load, versions 1.8 and 3.0 of jQuery both declared the load() method to be deprecated and removed, respectively.
Instead, use the trigger() or on() methods. .on("load", handler) and.trigger("load") should be used in place of.load(handler) and.load, respectively().
After the page has successfully loaded and been put into the DOM, the pageload event is launched. Now move to the concept of Jquery on page load.
Step By Step Guide On jQuery On Page Load :-
The jQuery load() AJAX technique is straightforward but quite effective.
Without having to load the entire page, jQuery's Load() method enables data to be loaded from the server and returned to a specified element.
The window object and the URL-related elements are compatible with this event.
Syntax
$("document").on("pageload",function(event,data){...})
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div_content").load("tk.txt", function (response,
status, http) {
if (status == "success")
alert("Content loaded successfully!");
if (status == "error")
alert("Error: " + http.status + ": "
+ http.statusText);
});
});
});
</script>
<style>
body {
text-align: center;
}
.tk {
font-size: 40px;
font-weight: bold;
color: green;
}
.tm {
font-size: 17px;
color: black;
}
#div_content {
font-size: 40px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div id="div_content">
<div class="tk">Talkerscode</div>
<div class="tm">Welcome to Talkerscode</div>
</div>
<button>Load the Page</button>
</body>
</html>
- Our code begins with HTML and HEAD tags.
- Next, the jQuery library is imported. Next, we launch our script. To run our jQuery code in a script, we use the ready() method.
- Next, we employ the .click() technique. It is used When a user clicks on an element, the click event takes place. The click() method starts the click event or adds a function that will be called whenever a click event happens.
- After that we use jQuery's text() method to retrieve the value of a div's content. All matching elements' combined text content is returned by the text() method.
- The load() method is then used. A handler for the load event is attached by the load() method. When a specific element has loaded, the load event takes place.
- Following that, we utilise an if statement where we specify a condition. After that we then end our script.
- Here, when a button is clicked, we also use jQuery to create an alert message.
- After that, to make our website interactive, we employ a CSS stylesheet. It affects the chosen elements' style characteristics by setting or returning one or more of them.
- Next, we begin writing the actual code. Using the div class, we write some statements in the body.
- Next, we design the button that loads the page when user clicks.
- With BODY and HTML elements, we finish our code.
Conclusion :-
Thus, we have successfully acquired knowledge of the jQuery on Page Load idea.
We are aware that jQuery both stated the removal and deprecation of the load() method.
Use.on("load", handler) or.trigger("load") instead of.load(handler) or.load; alternatively, can use trigger() either on() methods ().
A pageload event is started once the page has loaded and entered the DOM successfully.
I hope this article on jQuery on page load helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
