jQuery mobile popup dynamic URL - jquery-mobile

Question

I have problem of dynamically URL in a popup. Here my code:
<!-- content -->
<ul data-role="listview">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li>View details</li>
<li>Share</li>
</ul>
</div><!-- /popup-menu -->
Basically, when I click link on my popup, I'll go to the page where the callee's url is.
So, if I click List 1a the popup shows, then I click View details the page direct me to URL person.php?id=1
How can I do that?
I could just create popup divs multiple times according to the number of the list, but I think it's a waste of DOM object (my last resort if I don't find any elegant solution)
Thanks

Answer 1

Since you actually need to pass only an id of a person to your popup you can achieve your goal this way:
First of all simplify your listview markup and store an id in data-id attribute of an anchor of a listview item
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul>
and add an id tag to 'View Details` anchor in your popup for easier access later on
<li><a id="details" href="#">View details</a></li>
Second on click() event store current id to a globally available variable (let's call it currentId) and programmatically open the popup.
var currentId = 0;
...
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
Third in popupbeforeposition event construct your url and assign it to appropriate anchor.
var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
And finally here is working jsFiddle for you.