jQuery Forum

I'll take a stab at the answers.

1) You can use a dynamic page if you want (PHP, JSP, etc.). They would get processed on the server, and all the browser would see is the HTML that gets sent to it.  That said, if you want Apple's app store to distribute it, having it set up that way may get it rejected, as I've heard that they don't like leaving the content of apps up to chance like that.  I don't have direct experience with that, though. Either way, you'll need the shell HTML programs at least to create the app, and then you could potentially fill out content with dynamic pages.  I wouldn't go that route, though.

Probably the best approach is to have a single page for each basic type of page (e.g., product list, single product, list of comments, etc. with whatever you have) and internally dynamically get the JSON and modify the page to show what you want it to.

2) This would be how I would handle this (same recommendation as 1 above), one "list of posts" page, and one page that would hold the individual posts (two pages total).  Each page dynamically loads the data from the server using JSON.  [Note you may not want to use the term POST, especially in caps, because that will get confused with GET/POST parameters, since you're heading down that path with your app.]

Now the fun part starts where you have to pass parameters from one page to the next, and use that in your JSON queries. The code I use to get the parameters in this scenario is below, and I use it within the pagebeforeshow event of the page it's attached to. I have another thread out there trying to figure out if that's the right event, but it seems to work right for what I do. YMMV, and there are a lot of other ways to do this.

1. function getUrlVars() {
       var vars = [], hash;
       var hashes = document.baseURI.slice(document.baseURI.indexOf('?') + 1).split('&');
       for(var i = 0; i < hashes.length; i++)
       {
           hash = hashes[i].split('=');
           vars.push(hash[0]);
           vars[hash[0]] = hash[1];
       }
       return vars;
   }

You set them into variables by using something like     var passedParam1 = getUrlVars()["param1"];

I also use the below code to remove pages from the DOM when using AJAX transitions, which seems to fix some hard-to-debug issues (too complicated to get into, and not sure I fully understand them either).

1. $( '#pageA' ).live( 'pagehide',function(event, ui){
     $( '#pageA' ).remove();
   });

If none of the above makes sense, I'd recommend reading up on events and page transitions in the jQuery Mobile documentation, and more importantly you should start creating a shell of your site, because all of this stuff will make a lot more sense when you can see what's happening with something you built.

Hope this helps.

Thank you very much for your post, I will be honest all this is a learning curve for me (but having learnt .php and mySQL before I will get there) I do admit I don't understand all of it but I will hopefully soon :)

1. 
   <div data-role="header">
2. <h1>--Title from JSON here ---</h1>
3. </div>

I am hoping Apple will approve that approach I am not pulling entire content AND JQuery Mobile code via JSON.

I will look over your reply a little more ... gather some more and give a update on how I am going :)

If it helps, here's some sample code that works for me to refresh a list of items dynamically.  I call this function on the pagebeforeshow event for the list-home page, as well as from a refresh button event.

1. function refreshList(userId) {
       $.ajaxSetup({cache:false});
       $.getJSON('list', {user:userId}, function(json) {
           var items = [];
           $.each(json, function() {
               items.push('<li><a href="item_page.html?item=' + this.id + '" data-transition="slide"><h3>' + this.name + '</h3></a></li>');
               $("#list_holder > ul").html(items.join(''));
               $("#list_holder > ul").listview('refresh');
           });
       });
   }

In this code, 'list' in the getJSON call is a servlet, but could easily be a PHP or other dynamically generated server page, returning data with content type of application/json.

Below is the page that this loads data into.

1. <div data-role="page" id="list_home" data-title="" data-dom-cache="false">
     <div data-role="header" data-position="fixed">
       <h1>List</h1>
   </div>
     <div data-role="content">
       <div name="list_holder" id="list_holder">
         <ul data-role="listview" data-filter="true" data-filter-placeholder="Search messages...">
           <!-- dynamic list loads in here -->
         </ul>
       </div>
     </div>
     <div data-role="footer" data-position="fixed" data-id="page_footer">
         <!-- fixed footer code here -->
     </div>
   </div>