jQuery Forum

Hi,

I'm trying to figure out what's the best way to use jQuery Mobile with PhoneGap to interact with a server.

So far I've read:
http://forum.jquery.com/topic/restful-resources-rails-3-and-jquery-mobile
http://fuelyourcoding.com/getting-started-with-jquery-mobile-rails-3/
http://blog.digitalbackcountry.com/2011/12/passing-data-between-pages-in-jquery-mobile/
http://jquerymobile.com/test/docs/pages/page-navmodel.html
and haven't found a definitive answer.  Or more likely am too lost to piece the information together.

Right now I've setup jQuery Mobile to:
- be multiple HTML pages
- before a page loads, it'll request JSONP data from the server and insert the data with the appropriate tags into the DOM
- refresh the list/page with the new list data

Things are working great since my first request is just a list of available "projects".  The second request will require the client to tell the server to return a list of "lists" for a given "project" (or a list of "tasks" for a given "list" and etc.).

So I'm stuck on what architecture works best with jQuery Mobile.  And then I'm stuck on what's the best way to implement it.

So the first part of the question: which URL structure to use when retrieving JSON data
Option 1: Rails-ish RESTful URLs (sorry I'm not sure if it's just considered RESTful or if it's the "Rails way")
/projects/{:project_id}/lists
/lists/{:list_id}/tasks
Option 2: Basic GET with query parameters
/projects?id={:project_id}
/lists?id={:list_id}

[I'd prefer to use option 1 if possible since it's how Rails handle things normally.]

The second part of the question: does jQuery Mobile have something in place to keep track of the current states (project id, list id, etc).  I've read bits and pieces of the HASH/AJAX navigation system and router plugins, but still haven't been able to wrap my head around it.  From what I can understand it seems like these systems are meant to work on the server and not as an app on a phone, but doing that might give Apple heartache. pages.  Of course I'm sure I'm lacking some basic understanding somewhere.

Right now I'm thinking I need to keep track of the project id, list id, and etc in some custom javascript global object so I know how to form my JSON request URLs (whether RESTful or with query parameters) and what to display in projects.html, lists.html, and items.html since they're bascially the only pages local to the phone.

Sorry for the long post, but any advice will be greatly appreciated.  And of course, if I'm missing some standard way of doing this, I'm more than ready to read up on it if you direct me where to look.

Thanks again for your time!

Oh BTW, here's how the models eventually play out:
"project" has many "lists"
"list" has many "tasks"

Hi,

I've looked over the documentation and searched this forum (as well as others like StackOverflow), but still haven't been able to figure this out.

I'm a noob so I'm guessing I'm missing something fairly trivial...

Here's what I know:
in jQuery Mobile you can have multiple pages by either:
a. in one html file, have multiple page divs
b. have multiple html files

Using one html file with multiple page divs, I was able to get page transitions working by merely adding [data-transition="slide"] as an attribute to the link.  (That's so awesome by the way.)
I then wanted to break the pages out into multiple html files so it'll be easier to maintain.  The pages link just fine, but the transitions are no longer there.

Should [data-transition="slide"] be all I need to get page transitions working between multiple html files as well?
If not, then what else do I need to add?
I've tried adding [rel="external"] and replacing the href with "./page2.html" and "page2.html#foo".

Here's some more background information:
1. all the html files are in the same directory
2. I'm using PhoneGap as well
3. right now it's just one page div in each html file

From what I've read I'm not sure if jQuery Mobile automatically fetches the next page with AJAX, loads it into the DOM, and then transitions to the next page (hopefully with some animated transition).  Or if I'm suppose to handle the fetching, loading, and transitioning thru javascript myself.

This example site looks like it's using multiple html pages and it has transitions:
https://mobile.united.com/Booking?GUID=ec20637e-fba7-4316-803a-41f6c938f693/
so it seems like it should be possible.  Of course I'm not sure if inspecting the URL and the page source is any indication of them actually using multiple html files or not.

I've only used basic sample code from the jQuery website, but I can post them if it'll help.  It seems like I'm just missing some high level work flow understanding of how jQuery Mobile is expecting me to tell it how to transition to the next html file.

Thank you for your time.