forked from jquery-archive/jquery-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
pages-dynamic-data.html
129 lines (96 loc) · 4.65 KB
/
pages-dynamic-data.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Scripting pages</title>
<link rel="stylesheet" media="only all" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
<script>
function myFakeTemplater( data, type ){
// Dumb check to see if response is JSON
if( data.indexOf( "{" === 0) ){
//convert server JSON response to data
var obj = $.parseJSON( data );
//return string markup
return '<div data-role="page">' +
'<div data-role="header"><h1>' + obj.title + '</h1></div>' +
'<div data-role="content">' + obj.content + '</div>' +
'</div>';
} else {
// Otherwise, return it, as it's probably HTML
return data;
}
};
//set the loadPage default filter to run through myFakeTemplater
$.mobile.loadPage.defaults.filterResponseText = myFakeTemplater;
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Generating pages from a data source</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile's loadPage method includes a <code>filterResponseText</code> option for filtering the data that is returned from the server after an page is loaded, before it is injected into the DOM. You can use this method to transform the server response in a variety of ways, whether it's replacing image paths, or implementing client-side templating system.</p>
<p>To use the <code>filterResponseText</code> option, simply define it as a function that has a single argument representing the raw Ajax response text, and that returns a string (presumably, that same data, modified in some way)</p>
<pre><code>
$.mobile.loadPage.defaults.filterResponseText = function( data ){
return data.replace( "e", "EEEOOO" );
};
</code></pre>
<p>The following linked page is configured to return HTML or JSON, depending on whether it is requested through regular HTTP or Ajax.</p>
<p><a href="pages-dynamic-data-example.php" data-role="button">View Dynamic Page</a><p>
<p>In the head of this page, the following script handles the templating for that page's JSON response</p>
<pre><code>
function myFakeTemplater( data, type ){
// Dumb check to see if response is JSON
if( data.indexOf( "{" === 0) ){
//convert server JSON response to data
var obj = $.parseJSON( data );
//return string markup
return '<div data-role="page">' +
'<div data-role="header"><h1>' + obj.title + '</h1></div>' +
'<div data-role="content">' + obj.content + '</div>' +
'</div>';
} else {
// Otherwise, return it, as it's probably HTML
return data;
}
};
//set the loadPage default filter to run through myFakeTemplater
$.mobile.loadPage.defaults.filterResponseText = myFakeTemplater;
</pre></code>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Pages & Dialogs</li>
<li><a href="page-anatomy.html" data-ajax="false">Anatomy of a page</a></li>
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="page-titles.html" data-ajax="false">Page titles</a></li>
<li><a href="page-links.html" data-ajax="false">Linking pages</a></li>
<li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="page-dialogs.html" data-ajax="false">Dialogs</a></li>
<li><a href="page-cache.html" data-ajax="false">Preload & cache pages</a></li>
<li><a href="page-navmodel.html" data-ajax="false">Ajax, hashes & history</a></li>
<li data-theme="a"><a href="page-scripting.html" data-ajax="false">Scripting pages</a></li>
<li><a href="pages-themes.html" data-ajax="false">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>