CODEWITHSUNDEEP
cordovajquery-mobile
user2386771
user2386771

Reputation: 177

obtaining the popup upon clicking on the listiem in jquery mobile

I have a listview which is created dynamically.

Upon clicking on any list element i need to show a pop up with text box.

How can i do that using jquery mobile..

I am creating listview like below

div data-role="page" id="storedlist">
        <h1></h1>
    </div>
    <div data-role="content">
        <ul id="storedList">
        </ul>
    </div>
</div>

and appending listelements like below

$('#storedList').append('<li><a href="#">'+key["value"]+'</a></li>');

How can i show a pop up upon clicking on list element?

Thanks:)

Upvotes: 0

Views: 1465

Answers (2)

Omar
Omar

Reputation: 31732

You can read text of any element - even if it was created dynamically - and append the text wherever you want.

The below Code/Demo will append the text of the clicked list item and put it inside a textbox.

Demo

JS

$(document).on('click', 'li a', function () {
 var text = $(this).text();
 $('#popup input').empty();
 $('#popup input').val(text);
 $('#popup').popup('open');
});

HTML

<div data-role="page">
 <div data-theme="a" data-role="header">
  <h1>Page</h1>
 </div>
 <div data-role="content">
  <ul data-role="listview">
   <li><a href="#">Acura</a></li>
   <li><a href="#">Audi</a></li>
   <li><a href="#">BMW</a>
  </ul>
 </div>
 // Popup
 <div data-role="popup" id="popup" data-overlay-theme="a" data-theme="c" data-dismissible="true" style="width:400px;" class="ui-corner-all">
  <div data-role="header" data-theme="a" class="ui-corner-top">
   <h1>List to Text!</h1>
  </div>
  <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
   <h3 class="ui-title">Reserved for dynamic text</h3>
   <input type="text" name="test" id="test" value="" /> 
  </div>
 </div>
</div>

Upvotes: 1

Aaron Springer
Aaron Springer

Reputation: 233

It's not completely clear what you're asking.

The code to bind to the individual elements of a list view is:

$("#storedList").children().on()

To show a popup on click this could easily be modified to

$("#storedList").children().on("vclick", function () {
  $("#popup").popup("open");
}

I've created a JSFiddle that illustrates how to bind a click handler to the listview elements. It also illustrates how to can access the text field of the element that was clicked. This way if you need the "key[value]" you can use that in the construction of the popup you want to show.

http://jsfiddle.net/ccg55/4/

Upvotes: 0

Related Questions