Question

I’m developing a mobile app using Dreamweaver CS6 (with PhoneGap), jQuery Mobile and JavaScript that will collect user-inputted form data, transform the data into a JSON object and transmit it to a python web service. The purpose of the mobile app is to let users create a food order which is then sent to the restaurant. I wanted to inquire with the SO community on what would be an elegant way of handling the logic of creating the order. Currently, the logic is defined by the JavaScript in the HTML page, example below (truncated for brevity):

JavaScript:

    var burgerType; //defines burger type eg.cheeseburger,hamburger
    var burgerQueue = new Array(); //holds completed burgers

    //detects if cheeseburger
    $("#cheeseburger").click(function() {
        burgerType="cheeseburger";
    });

    //detects if hamburger
    $("#hamburger").click(function() {
        burgerType="hamburger";
    });

HTML:

  <div data-role="content">
    <ul data-role="listview" data-theme="e" id="burgers">
      <li id="cheeseburger"><a href="#toppings">Cheeseburger</a></li>
      <li id="hamburger"><a href="#toppings">Hamburger</a></li>
    </ul>
  </div>

Screenshot: Clicking on a burger takes you to a screen that let’s you choose the toppings, didn’t include it because don’t think it’s relevant.

I realize this is probably a very poor way of handing the logic because if the restaurant menu changes I would have to modify the app, republish it to their respective markets (Play,iTunes, etc), and have users update it. The last thing I’d wanna do is frustrate users by having to constantly update the app due to bugs or changes. I know I could partially separate the logic out of the HTML by using an external javascript library residing in the application directory, but that doesn’t help with the constant update issue. I would’ve made the app link directly to a mobile app page on a web server (so the changes I make are immediately seen without updating the app) but I read on another SO post the Apple gatekeepers don’t publish apps that are basically just a webpage wrapped in an app. I’m looking at the django web framework and thinking it may be what I want, but not sure which is why I’m inquiring with the coding gurus here at SO to get ideas on what I should be doing.

To recap: trying to dynamically generate a user-interface and coding logic using jQuery/JavaScript without frustrating users with constant updates. (Kinda like how jQuery let’s you hotlink to their CDN-hosted libraries). I realize this might be confusing, I’ll clarify any questions asked.

Answer 1

You can bind a single event to multiple elements:

$("#burgers").on("click", "a" function() {
    var li = $(this).parent();
    burgerType = li.attr("id");

    $.mobile.changePage("#toppings");
    return false;
});

Then you just need to generate the list elements from data, probably based on an ajax call. For that sort of thing I usually make the ajax call in the background on app startup, and have the previous result of that call saved so that connecting for updates doesn’t slow down app startup.