jquery mobile dialogs, passing values between pages

Question

I want to make a popup ( page dialogs ) in jquery mobile with some input fields. How would i pass data from the popup to my main page?

And does the popup need to be a complete jquery ui page ( page anatomy ), or just a

<div data-role="page"> 
...
</div>

Thanks in advance!

Answer 1

Mobile page communication(passing data between pages) can be done in following ways:

1. sessionStorage or localStorage of HTML5 Dom storage.
2. global variables.
3. jQuery.data()

Example for the usage of Jquery.data() is referred below.

http://dl.dropbox.com/u/49735179/dialog-data-transfer.html .

Hope this may help you :)

Answer 2

I haven't dug too far into jQuery mobile, but at a quick glance, it doesn't look much different than the popup dialogs from jQuery UI. In which case, you can try binding a data collector to a button in the initiation of the dialog.

$('#testdiv').dialog({ //initiate dialog
  someoption: "test", //fake stuff for example
  otheroption: "foo", // ---
  buttons: {  //define buttons for dialog
    "Ok": function() { //define "ok" button
      var userInput = $('#inputInDialog').val(); //get value of the textbox in the dialog
      $('#domOnMainPage').text(userInput); //write that value to main page
    }
  }
})

Again, I haven't got into mobile, but this is probably going to be pretty close to what you're looking for, I'm thinking.