Question

Here’s what I want to do: a unique HTML page that contains:

• a lot of <ul><li></li></ul> to show menu then submenu then subsubmenu, to choose a product
• a dialog to ask for a fixed number of products (1, 2 and 5)
• a JavaScript that handles AJAX

Here’s how this will work: the customer “navigates” through all the categories and products, and if he wants one, I show a dialog with product description that asks him how many products he wants (1, 2 or 5).

(1) When the customer clicks 1, 2 or 5 I make and AJAX request that says to the server “add this product to the basket” (= all is kept on the server side). NB: it’s all JSON.

(2) When the customer clicks on the basket, I go to a new page that shows what’s in the basket and an option to validate it.

Two questions:

• there’s no sample of “changing dynamically” modal dialogs with jQuery mobile. Is it the same principle that jQuery has (ie I just have to modify a little bit my script to make it work on a mobile phone)?
• there’s no sample of AJAX exchanges in JSON format (it’s all about loading full HTML webpage, not only pure data exchanges). Same question: is it the same principle that jQuery has?

Answer 1

there’s no sample of “changing dynamically” modal dialogs with jQuery
mobile. Is it the same principle that jQuery has (ie I just have to
modify a little bit my script to make it work on a mobile phone)

I don’t believe jQuery itself has a dialog either, instead I think you are referring to the jQuery UI dialog. That said the principle is essentially the same, you can reuse the same dialog to display different content by just changing the content in between uses. The main thing you will probably need to be aware of is that for content that is enhanced by jquery mobile you may need to call the appropriate widgets refresh or create method. In addition while i’m not sure if it is officially documented you often need to do so in the pageshow (or at least before the page is shown) event.

For example say you are changing items in a JQM listeview you may need to do something like the following to get the new content to be enhanced

$(document).delegate('#yourDialog','pageshow', function(page,ui) {
   $('#yourListView').listview('refresh');
})

there’s no sample of AJAX exchanges in JSON format (it’s all about
loading full HTML webpage, not only pure data exchanges). Same
question: is it the same principle that jQuery has?

There is no sample because it works exactly the same, JQM requires a version of the jQuery library so those functions are all still there (and of course you don’t actually need jQuery to perform ajax calls). You can conduct regular ajax requests and do as you wish in response.