How to pass button text to another page?

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.

`load the content accordingly.` Where does the content come from? Some sort of request to a server? Local storage? — Dunhamzzz, May 22 '12 at 13:31
Format of the file? You can't just "Load content" if I don't know exactly where it's coming from. Post your code so far. — Dunhamzzz, May 22 '12 at 13:34
@Dunhamzzz Actually, just think like this: There's a lot of `a` tags with `data-role='button'` and when the user clicks one `button`, I need to "pass" the innerHTML of that button to another `div data-role='page'>` element. — Roshnal, May 22 '12 at 13:36

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

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, " "));
}

edited May 23 '17 at 12:27

Community

1
1

answered May 22 '12 at 13:37

Jack

10,943
13
50
65

I didn't know of a event called 'pageshow'.. For example, if I wanted to display the `btn` value (i.e. "Hello") in a `
` element in page 2, what should I insert inside the function? – Roshnal May 22 '12 at 13:40
pageshow is a JQM event, http://jquerymobile.com/demos/1.1.0/docs/api/events.html. Here's a link to a SO question on reading the query string values in javascript http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript – Jack May 22 '12 at 13:50
Thanks for the links, but can you please show me (preferably a code snippet to your existing code) how I can get the _btn="Hello"_ part? I read the JQM doc, but its a bit hard to understand for a newbie like me :) – Roshnal May 22 '12 at 14:41

score 1 · Answer 2 · answered May 22 '12 at 13:28

1

well you might be having a unique value associated with your each button then on click fire same function on each button, in that function check the value ans as according direct to the page. or else you can use html5's localStorage/sessionStorage for storing values passing between pages. for more details visit here

answered May 22 '12 at 13:28

Neji

6,591
5
43
66

Yeah :). Thanks for your answer, but will localstorage work in BlackBerry? I'm making a BB WebWorks app.. – Roshnal May 22 '12 at 13:34
if it supports html5 then it will definately. – Neji May 22 '12 at 13:47
and hey you can check that here http://mobilehtml5.org/ . if u liked it plz accept it:) – Neji May 22 '12 at 13:54
Wow thanks for the link man! :) I'll check the other answer also, and choose the best/easiest one as correct.. But you got +1 from me. – Roshnal May 22 '12 at 14:36

score 0 · Answer 3 · answered May 23 '12 at 08:20

You can use global variable for this.

<a href="#" onclikc="some_function('Button 1')">Button 1</a>

function some_function(data){



global_varible = data;

}

In page2

$( document ).delegate("#page2", "pagecreate", function() { 
       var page2_varible = global_varible;
}

How to pass button text to another page?

3 Answers3

Linked