Question

I’m making an app for the BlackBerry PlayBook using jQuery Mobile, and in a page (actually a div with data-role='page'), I’ve got a lot of (say, 125) buttons each with a unique text. I’ve used the a tag with data-role='page' for this.

There’s a separate page like the above, but with different content in the same HTML file. The content in this page depends on the button clicked in the page 1.

So my question is, how can I load the page 2, along with the associated content, according to the button clicked in page 1? I need to pass the text in the middle of <a> and </a> tags to the page 2 and load the content accordingly.

Any help greatly appreciated.

Answer 1

You can use the url itself to pass the data using the query string for example and then in the pageshow event of the page being called you check that and display the appropiate content.

Button markup

<a href="#page2?btn=Hello">Button 1</a>

Bind to pageShow some time before it will get called (it shouldnt’t actually need to be in the document ready since it’s being delegated, but assuming that’s where you start your app you can place it there).

$(function() {
     $(document).delegate('#page2', 'pageshow', function (event, ui) {
                var qryStringResult = getParameterByName('btn'); //hello                     
        });  
});

Function from Artem Barger – https://stackoverflow.com/a/901144/384985

 function getParameterByName(name) 
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}