Returning Dynamic Content In A PhoneGap App
This is probably known to many but I was looking into this for fellow co-workers and I figured I would blog it so I don't forget it in the future. PhoneGap is great at making an HTML page into an mobile application. The thing with HTML is, it's static. You can't do direct database calls on load. Here is a quick solution I have found that seems to work. If other's have found a better solution, please post it.
index.html
1<!doctype html>
2<html>
3 <head>
4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
5 <title>My App</title>
6 <script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
7 <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
8
9 <script type="text/javascript">
10 jQuery(document).ready(function() {
11 $.ajax({
12 url:"http://www.ryanvikander.com/test.cfc?method=getdata",
13 success: function(data){
14 var content = $("#content");
15
16 content.html(data);
17 },
18 error: function(e){
19 console.log(e);
20 }
21 });
22 });
23 </script>
24
25 </head>
26 <body>
27 <div id="title_bar">Test</div>
28 This is a test
29 <div id="content"></div>
30 </body>
31</html>
2<html>
3 <head>
4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
5 <title>My App</title>
6 <script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
7 <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
8
9 <script type="text/javascript">
10 jQuery(document).ready(function() {
11 $.ajax({
12 url:"http://www.ryanvikander.com/test.cfc?method=getdata",
13 success: function(data){
14 var content = $("#content");
15
16 content.html(data);
17 },
18 error: function(e){
19 console.log(e);
20 }
21 });
22 });
23 </script>
24
25 </head>
26 <body>
27 <div id="title_bar">Test</div>
28 This is a test
29 <div id="content"></div>
30 </body>
31</html>
So really all I am doing is making a call to a cfc on load that returns some content and then adds that content to a div. Pretty simple.
TweetBacks
:)