CODEWITHSUNDEEP
jquery-mobile
Michael Klenk
Michael Klenk

Reputation: 3242

jQuery Mobile - Popup in nested list view

I try to create a listview where elements with no children can have an edit button. When the user clicks to this button a popup menu should appear.

enter image description here

Here is the code inside a singe JQM page.

<div data-role="content">
<ul data-role="listview">
    <li>
        <h3>Colors</h3>
        <ul>
            <li>Blue
                <p class="edit">
                    <a href="#" onclick="openEditMenu()" data-role="button"
                        data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
                </p>
            </li>
            <li>Orange</li>
            <li>Purple</li>
        </ul>
    </li>
    <li><h3>Item</h3>
        <p class="edit">
            <a href="#" onclick="openEditMenu()" data-role="button"
                data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
        </p></li>
    </ul>
</div>
<div data-role="popup" id="popupMenu">
    <ul data-role="listview" data-inset="true" >
            <li data-role="divider" data-theme="a">Edit Element</li>
            <li><a href="#">Edit</a></li>
            ...
    </ul>
</div>
<script>
    function openEditMenu() {
        $('#popupMenu').popup('open');
    }
</script>

On the first level this works like expected. If you navigate to the second level of the nested list, the popup is not shown.

I saw that popups in JQM has to be placed on the same page. It seems that JQM does not find the popup on the subpages of the listview.

Has somebody realized successfully such a solution or it is not possible with the popup feature of JQM 1.2?

On jsfiddle you can find my example code.

Thanks for tipps or suggestions.

Upvotes: 5

Views: 6888

Answers (2)

Sunil Sharma
Sunil Sharma

Reputation: 1315

[Solved]

http://jsfiddle.net/F9awk/

function openEditMenu() {
  var nestedLiPage = $(".ui-page-active");
  $('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open');
}

Upvotes: -1

jerone
jerone

Reputation: 16871

As you said in the comments above, from the jQm documentation 'A popup div has to be nested inside the same page as the link.'.

What you could try is clone the popup and attach it to the other page. Then you have re-initialize and open it. You could try something like:

var nestedLiPage = $(".ui-page-active");
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open');

Upvotes: 3

Related Questions