Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
jQuery Mobile: Sending data from one page to the another
jQuery Mobile provides several methods to pass data between pages. The most common approaches include URL parameters, localStorage, and sessionStorage.
Method 1: Using URL Parameters
Pass data through the URL query string when navigating between pages.
HTML Link with Parameters
<a href="new.html?structure=123&type=mobile">Go to New Page</a>
JavaScript to Extract Parameters
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
$(document).on("pageinit", "#new", function(event) {
// Get URL parameters
var url = $(this).data("url");
if (url) {
var params = url.split("?")[1];
if (params) {
var structureValue = params.split("&")[0].replace("structure=", "");
console.log("Structure value:", structureValue);
}
}
});
// Alternative method using URLSearchParams (modern browsers)
$(document).on("pageinit", "#new", function(event) {
var urlParams = new URLSearchParams(window.location.search);
var structure = urlParams.get('structure');
var type = urlParams.get('type');
console.log("Structure:", structure);
console.log("Type:", type);
});
</script>
</body>
</html>
Method 2: Using localStorage
Store data in localStorage before navigation and retrieve it on the destination page.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// On the source page - store data
$("#sendDataBtn").click(function() {
var dataToSend = {
structure: "123",
name: "Mobile App",
timestamp: new Date().getTime()
};
localStorage.setItem("pageData", JSON.stringify(dataToSend));
console.log("Data stored:", dataToSend);
});
// On the destination page - retrieve data
$(document).ready(function() {
var storedData = localStorage.getItem("pageData");
if (storedData) {
var data = JSON.parse(storedData);
console.log("Retrieved data:", data);
// Use the data
console.log("Structure:", data.structure);
console.log("Name:", data.name);
// Optional: clear the data after use
localStorage.removeItem("pageData");
}
});
</script>
</body>
</html>
Method 3: Using jQuery Mobile Data Attributes
Pass data using jQuery Mobile's built-in data handling.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
// Store data before page transition
$(document).on("pagebeforeshow", "#sourcePage", function() {
var dataObject = {
structure: "123",
category: "mobile"
};
// Store in page data
$("#targetPage").data("customData", dataObject);
});
// Retrieve data on target page
$(document).on("pageshow", "#targetPage", function() {
var receivedData = $(this).data("customData");
if (receivedData) {
console.log("Received structure:", receivedData.structure);
console.log("Received category:", receivedData.category);
}
});
</script>
</body>
</html>
Comparison of Methods
| Method | Data Persistence | URL Visible | Best For |
|---|---|---|---|
| URL Parameters | Page reload safe | Yes | Simple data, bookmarkable links |
| localStorage | Browser session | No | Complex objects, sensitive data |
| Data Attributes | Single navigation | No | Temporary data transfer |
Complete Working Example
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// Function to get URL parameter by name
function getUrlParameter(name) {
var results = new RegExp('[\?&]' + name + '=([^]*)').exec(window.location.href);
if (results == null) {
return null;
}
return decodeURI(results[1]) || 0;
}
// Usage example
$(document).ready(function() {
// Get parameter from URL
var structure = getUrlParameter('structure');
var type = getUrlParameter('type');
console.log("Structure ID:", structure);
console.log("Type:", type);
// Display the received data
if (structure) {
console.log("Processing structure with ID:", structure);
}
});
</script>
</body>
</html>
Structure ID: 123 Type: mobile Processing structure with ID: 123
Conclusion
Use URL parameters for simple, bookmarkable data. Choose localStorage for complex objects or when data needs to persist across page reloads. jQuery Mobile's data attributes work well for temporary data transfer between pages.
Updated on: 2026-03-15T23:18:59+05:30
245 Views
Advertisements