jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.
In this article, we will be using the jQuery Mobile Pagecontainer load() method to load the page from the specified URL.
Syntax:
Invoking the load method:
$(".selector").pagecontainer("load");Loading an external page, enhancing its content, and inserting it into the DOM:
$(":mobile-pagecontainer").pagecontainer(
"load", "confirm.html", {
role: "dialog"
}
);Parameters: This method accepts two parameters that are illustrated below:
- url: This parameter is the URL from which to load the page. This can be an absolute or a relative URL (e.g. “about/us.html”).
-
options: This parameter is a hash that contains options that affect the behavior of the method.
- type: Its default value is “get”. The type of HTTP request to use is “get”, “post”, etc.
- data: Its default value is undefined. It is the data to send with an Ajax page request.
- reloadPage: It says whether to force a reload of the page even when it is already in the DOM. This is used only when the ‘url’ argument is a URL. Its default value is false and it is of boolean type. This property is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use property reload instead.
- reload: This says whether to force a reload of the page even when it is already in the DOM. This is used only when the ‘url’ argument is a URL. It is of boolean type and its default value is false.
- role: This is the data-role value to be used while displaying the page. Its default value is undefined.
- showLoadMsg: It says whether to display a message indicating that the page is loading. It is of boolean type and its default value is true.
- loadMsgDelay: This says the number of milliseconds by which to delay the appearance of the loading message. If the load completes within this time, no loading message is displayed. Its default value is 50.
Return Values: This method does not return any values.
CDN Link: First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
Example: This example describes the jQuery Mobile Pagecontainer load() method.
<!doctype html> <html lang="en">
<head>
<link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"/>
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page" id="GFG1">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Pagecontainer
load() Method
</h3>
<div data-role="header">
<h1>First Page</h1>
</div>
<div role="main">
<a href="#GFG2" data-transition="slide">
Go To Second Page
</a>
</div>
<input type="button" id="Button" value="Invoke the load() Method">
<div id="log"></div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Pagecontainer
load() Method
</h3>
<div data-role="header">
<h1>Second Page</h1>
</div>
<div role="main">
<a href="#GFG1" data-rel="back" data-transition="slide">
Go Back To First Page
</a>
</div>
<input type="button" id="Button" value="Invoke the load() Method">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
$("#GFG2").pagecontainer("load");
});
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/pagecontainer/#method-load