0

I'm using singe page concept jquery mobile. I then create a dynamic listview like so: 

var resultitems = '<ul data-role="listview">';
for (i = 0; i < 10; i++) {
if (msg.hotspots[i] != null) {
resultitems += '<li><a href="acura.html"><img src="' + msg.hotspots[i].imageURL + '" />' + msg.hotspots[i].title + '</a></li>';
}
}
resultitems += '</ul>';
$('#results').html(resultitems);
$('#results').trigger("create");

As you can see I have a hyperlink to acura.html now. But what I want is to activate a subpage #detailpage and load the details of the Id of the clicked item in the listview. It's no problem adding the item Id to the link, I just don't know what the link should like and how to read the id from page #detailpage.

Thanks!

Adam
  • 6,041
  • 36
  • 120
  • 208

2 Answers2

0

What your asking is basically how to pass data data from one page to another in jQuery mobile, in your case what you want to do is basically append the id of the item and then in the pageshow event of the acura.html do something based on that.

There are already a few questions here on SO that deal with this (passing data) For example you may want to look at this one How to pass button text to another page?

Community
  • 1
  • 1
Jack
  • 10,943
  • 13
  • 50
  • 65
  • I checked the link you provided. But the function getParameterByName doesnt seem to work. my url is this: http://www.test.com/mobile.html#resultpage?t=1 I tried these 2 options: 1. $(document).delegate('#resultpage', 'pageshow', function (event, ui) { alert(getParameterByName('t')); }); 2. $('#resultpage').live('pageinit', function (event) { alert(getParameterByName('t')); }); – Adam Jul 02 '12 at 23:03
  • Is it hitting the function at all? I'll try and see later if i can throw up an example or a jsfiddle. – Jack Jul 03 '12 at 00:08
  • Jup, it's hitting the function. I placed an alert in it: alert(window.location) = http://www.test.com/mobile.html#resultpage?t=1 alert(window.location.search) = '' Don't know if the latter should be empty though. – Adam Jul 03 '12 at 09:50
  • Your right that the `search` attribute is empty, try changing it to `window.location.hash`. Also it might be worth your while to look into [jquery-mobile-router](https://github.com/azicchetti/jquerymobile-router) – Jack Jul 03 '12 at 13:54
  • .hash is not empty indeed. But I tried getting the values for this querystring: http://www.mytest.com/mobileapp/index.html#detailpage?t=1&id=6 getParameterByName('t');//shows 1 as expected getParameterByName('id');//is undefined my function: function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^]*)"; var regex = new RegExp(regexS); var results = regex.exec(window.location.hash); if (results == null) return ""; else return decodeURIComponent(results[1].replace(/\+/g, " ")); } – Adam Jul 07 '12 at 20:01
  • It seems to work fine for me, here's a [jsfiddle](http://jsfiddle.net/VbDqy/1/). Alternatively you may also want to check out [jquery-mobile-router](https://github.com/azicchetti/jquerymobile-router) which is a client side routing plug-in for JQM that supports the different JQM page events. – Jack Jul 09 '12 at 13:53
0

What I did now is not load the detailpage via the href attribute, but rather change the location.hash value with javascript via the onclick method of the hyperlink. This seems to make sure that the target detailpage always can read the actual querystring parameters.

Adam
  • 6,041
  • 36
  • 120
  • 208