jQuery Mobile get button that opened Popup

Question

I have a listview, when I click a link in the listview it launches a popup. For simplification purposes I have omitted the listview and am starting with just a single button.

I want to retrieve attributes from the button that caused the popup to show, in my example the attribute named customAttr. I then want to insert the value into popupBasic.

Here is my very basic sample jQuery Mobile code:

<a href="#popupBasic" data-rel="popup" customAttr="value">Basic Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>

jsFiddle: http://jsfiddle.net/cPRCU/2/

Normally when I work with jQuery (non-Mobile) I am more involved with the click event/opening of popup's/dialogs. I would like to be able to read the button that caused the popup to show, how can I do this?

Answer 1

Adding a click handler to the button seems to work. In this handler, modify the popup before it gets shown:

$('a[data-rel="popup"]').click(function () {
    var link = $(this);
    var data = link.attr('customAttr')
    var popup = $(link.attr('href')); // assume href attr has form "#id"
    popup.append(($('<p />').text(data)));
});

This is a generic handler which supports a page with multiple buttons/popups. If some buttons should not have this behaviour, I would add a class to the desired button, and make the a[data-rel="popup"] selector more specific.

See fiddle: http://jsfiddle.net/cPRCU/3/

Answer 2

I did it on a listview itself as it would be more useful to you.

For a ListView

You have to register a click event for the <a> tags in your listview as below first.

$('#mylist a').bind('click', function(event){
});

meanwhile, make sure to store the data inside the anchor tag as below. data-customattr everything is small here.

e.g.

<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>

Now you can read the value of data-customattr inside the click event as below

$(this).data('customattr')

Now I assume that you have a id for the <p> tag inside the popup. Something as below

  <p id="mypopup">This is a completely basic popup, no options set.</p>

using the ID you can replace the popup's content.

finally putting all together something like below

$('#mylist a').bind('click', function(event){
    console.log($(this).text());
   $('#mypopup').html($(this).data('customattr'));
});

Checkout this live fiddle for the working example http://jsfiddle.net/gFTzt/5/

For a button

If you insist on a example using button then declare a button with an ID as below

<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>

As mentioned above register a click event and read the customattr value.

 $('#mybutton').bind('click',function(){
        alert($(this).data('customattr'));
 });

Check out this live fiddle example for both button and listview http://jsfiddle.net/gFTzt/5/

using .attr()

Here I've used the data to get the value. without data attribute we can directly get the value from the anchor tag as below.

E.g. we have a anchor tag as below.

<a href="#popupBasic" customattr="value1">Basic Popup 1</a>

we can read the value1 using the .attr() as below.

$(this).attr('customattr')

Here is a Live fiddle example.