为什么当我在 Jquery Mobile 中刷新页面时页面变空？
Why page get empty when i refresh it in Jquery Mobile?
我正在使用 Jquery Mobile.I 从 JSON 文件中获取结果并将其显示在 page.Content 通过单击显示 event.But 当我刷新页面页面得到 empty.What 是问题吗？
谢谢
我想我明白了：所以您正在页面上动态加载元素，但是当您刷新时，一切都会恢复......通过查看您到目前为止所采用的方法，这是符合预期的。
对于 Jquery 移动版，您不使用点击来动态插入元素，请尝试在整个文档上绑定 "pagebeforechange"，然后改为处理 URL。
$(document).bind( "pagebeforechange", function( e, data ) {....})
这是您尝试做的事情的示例 Jquery Mobile 1.0 ..（下面粘贴了完整的源代码）：http://demos.jquerymobile.com/1.0/docs/pages/dynamic-samples/sample-reuse-page.html
也可能想看看使用较新版本的 Jquery Mobile....这里的一些内容可能已被弃用。
解释：
所以基本上“pagebeforeshow”处理程序将在页面出现之前触发。
- 编写函数来读取和处理 URL 请求
- 调用构建请求页面元素的相关函数
此外，您可能希望对您的 link 锚点进行更多描述 "a href="#""
但为什么要 javascript 处理第一个着陆页呢？除非你打算在第一页上有大量的数据......
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>changePage JSON Sample</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
// Some sample categorized data. This data is in-memory
// for demonstration purposes, but could be loaded dynamically
// via ajax.
var categoryData = {
animals: {
name: "Animals",
description: "All your favorites from aardvarks to zebras.",
items: [
{
name: "Pets",
},
{
name: "Farm Animals",
},
{
name: "Wild Animals",
}
]
},
colors: {
name: "Colors",
description: "Fresh colors from the magic rainbow.",
items: [
{
name: "Blue",
},
{
name: "Green",
},
{
name: "Orange",
},
{
name: "Purple",
},
{
name: "Red",
},
{
name: "Yellow",
},
{
name: "Violet",
}
]
},
vehicles: {
name: "Vehicles",
description: "Everything from cars to planes.",
items: [
{
name: "Cars",
},
{
name: "Planes",
},
{
name: "Construction",
}
]
}
};
// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
category = categoryData[ categoryName ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
// The markup we are going to inject into the content
// area of the page.
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
// The array of items for this category.
cItems = category.items,
// The number of items in the category.
numItems = cItems.length;
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "<li>" + cItems[i].name + "</li>";
}
markup += "</ul>";
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl( data.toPage ),
re = /^#category-item/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
showCategory( u, data.options );
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header"><h1>Categories</h1></div>
<div data-role="content">
<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#category-items?category=animals">Animals</a></li>
<li><a href="#category-items?category=colors">Colors</a></li>
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>
</div>
</div>
<div id="category-items" data-role="page">
<div data-role="header"><h1></h1></div>
<div data-role="content"></div>
</div>
</body>
</html>
我正在使用 Jquery Mobile.I 从 JSON 文件中获取结果并将其显示在 page.Content 通过单击显示 event.But 当我刷新页面页面得到 empty.What 是问题吗？
谢谢
我想我明白了：所以您正在页面上动态加载元素，但是当您刷新时，一切都会恢复......通过查看您到目前为止所采用的方法，这是符合预期的。
对于 Jquery 移动版，您不使用点击来动态插入元素，请尝试在整个文档上绑定 "pagebeforechange"，然后改为处理 URL。
$(document).bind( "pagebeforechange", function( e, data ) {....})
这是您尝试做的事情的示例 Jquery Mobile 1.0 ..（下面粘贴了完整的源代码）：http://demos.jquerymobile.com/1.0/docs/pages/dynamic-samples/sample-reuse-page.html
也可能想看看使用较新版本的 Jquery Mobile....这里的一些内容可能已被弃用。
解释：
所以基本上“pagebeforeshow”处理程序将在页面出现之前触发。
- 编写函数来读取和处理 URL 请求
- 调用构建请求页面元素的相关函数
此外，您可能希望对您的 link 锚点进行更多描述 "a href="#""
但为什么要 javascript 处理第一个着陆页呢？除非你打算在第一页上有大量的数据......
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>changePage JSON Sample</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
// Some sample categorized data. This data is in-memory
// for demonstration purposes, but could be loaded dynamically
// via ajax.
var categoryData = {
animals: {
name: "Animals",
description: "All your favorites from aardvarks to zebras.",
items: [
{
name: "Pets",
},
{
name: "Farm Animals",
},
{
name: "Wild Animals",
}
]
},
colors: {
name: "Colors",
description: "Fresh colors from the magic rainbow.",
items: [
{
name: "Blue",
},
{
name: "Green",
},
{
name: "Orange",
},
{
name: "Purple",
},
{
name: "Red",
},
{
name: "Yellow",
},
{
name: "Violet",
}
]
},
vehicles: {
name: "Vehicles",
description: "Everything from cars to planes.",
items: [
{
name: "Cars",
},
{
name: "Planes",
},
{
name: "Construction",
}
]
}
};
// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
category = categoryData[ categoryName ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
// The markup we are going to inject into the content
// area of the page.
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
// The array of items for this category.
cItems = category.items,
// The number of items in the category.
numItems = cItems.length;
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "<li>" + cItems[i].name + "</li>";
}
markup += "</ul>";
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl( data.toPage ),
re = /^#category-item/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
showCategory( u, data.options );
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header"><h1>Categories</h1></div>
<div data-role="content">
<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#category-items?category=animals">Animals</a></li>
<li><a href="#category-items?category=colors">Colors</a></li>
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>
</div>
</div>
<div id="category-items" data-role="page">
<div data-role="header"><h1></h1></div>
<div data-role="content"></div>
</div>
</body>
</html>