[转]jQuery Mobile: Get data passed to page via changePage mobile.changePage
本文转自:http://stackoverflow.com/questions/15840611/jquery-mobile-get-data-passed-to-page-via-changepage
Solution
Send them like this:
$.mobile.changePage('page2.html',{ dataUrl :"page2.html?parameter=123", data :{'paremeter':'123'}, reloadPage :true, changeHash :true});
And read them like this:
$("#index").live('pagebeforeshow',function(event, data){var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);});
More examples can be found here: jQuery Mobile: document ready vs page events, just look for chapter: Data/Parameters manipulation between page transitions.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="apple-mobile-web-app-status-bar-style"content="black"/>
<title></title>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script>
$(document).on('pagebeforeshow',"#index",function(){
$(document).on('click',"#changePage",function(){
$.mobile.changePage('second.html',{ dataUrl :"second.html?paremeter=123", data :{'paremeter':'123'}, reloadPage :false, changeHash :true});});});
$(document).on('pagebeforeshow',"#second",function(){var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);});</script></head><body><!-- Home --><divdata-role="page"id="index"><divdata-role="header"><h3>
First Page
</h3></div><divdata-role="content"><adata-role="button"id="changePage">Test</a></div><!--content--></div><!--page--></body></html>
second.html
<!DOCTYPE html><html><head><meta charset="utf-8"/>
<meta name="viewport"content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable"content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style"content="black"/><title></title>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head>
<body><!-- Home --><div data-role="page"id="second"><div data-role="header"><h3>
Second Page
</h3></div><divdata-role="content"></div><!--content--></div><!--page--></body></html>
More info
If you want to learn more about this topic take a look at this article. You will find several solutions with examples.
[转]jQuery Mobile: Get data passed to page via changePage mobile.changePage的更多相关文章
- jQuery数据缓存$.data 的使用以及源码解析
一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQu ...
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...
- jQuery Ajax Post Data Example
http://www.formget.com/jquery-post-data/ jQuery Ajax Post Data Example Fugo Of FormGet jQuery $.post ...
- 深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
- JQuery.Ajax()的data参数类型
假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='un ...
- jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
- The requested page cannot be accessed because the related configuration data for the page is invalid
当在VS2013下开发web site时,调试时都是在IIS Express中进行的,没有问题.当部署到IIS中,出现:The requested page cannot be accessed be ...
- [Project] Simulate HTTP Post Request to obtain data from Web Page by using Python Scrapy Framework
1. Background Though it's always difficult to give child a perfect name, parent never give up trying ...
- [asp.net core]The requested page cannot be accessed because the related configuration data for the page is invalid.
bug HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the rela ...
随机推荐
- Bootstrap 组件之 Panel
一.简介 Panel 指面板.这里 有例子. 一个典型的面板的代码结构是这样的: .panel.panel-default .panel-heading .panel-title Title Text ...
- 国内物联网平台(7):Ablecloud物联网自助开发和大数据云平台
国内物联网平台(7)——Ablecloud物联网自助开发和大数据云平台 马智 平台定位 面向IoT硬件厂商,提供设备联网与管理.远程查看控制.定制化云端功能开发.海量硬件数据存储与分析等基础设施,加速 ...
- Vue v-if ToolList
可根据v-if="IsOk",动态判断标签是否展示 <template> <div id="app"> <input type=& ...
- Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义
一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛. 现在开始学习linux计 ...
- 温故而知新_C语言_define_宏
define defi ...
- UWP&WP8.1 基础控件——Image
Image是UWP和WP8.1中系统自带的图片展示器. 具有较强的性能,使用也是非常的简单. 使用方式分为在XAML中,在C#代码中. XAML中: 在XAML中使用方式非常简单. 常用XAML So ...
- 接口和抽象类有什么区别(Java基础)
接口可以多实现 Java中抽象类只能单继承 接口 相对于类来说 可以实现多个接口 抽象相对于 类来说 只能单一继承 一个类只能继承一个抽象类,但可以实现多个接口. 抽象类中可以包含抽象方法和 ...
- 三大文本处理工具grep、sed及awk
一. 用grep在文件中搜索文本 grep能够接受正则表达式,生成各种格式的输出.除此之外,它还有大量有趣的选项. 1. 搜索包含特定模式的文本行: 2. 从stdin中读取: 3. 单个g ...
- zabbix告警
邮件告警分为两大步: 第一步:配置(配置又分为三小步) 发送邮件的用户 创建用户(添加上告警媒介) 给用户添加权限(在所有组里添加) 最后显示有读写权限才算成功!!! 告警媒介类型 创建媒介类型!一般 ...
- Spring 配置RMI远程调用
项目中遇到了跨系统调用,当初想的是用webservice或者是hessian.但是这个接口用到的并不多,而且是一个非常简单的方法.所有便想到了RMI.在spring中 实现RMI非常简单. 暴露服务: ...