CODEWITHSUNDEEP
listviewjquery-mobile
Ray S.
Ray S.

Reputation: 1200

jquery mobile only one popup for many list items

I have the following code for a jquery mobile list view with popup of options for each list item.

Would like to have only one popup where the id of the link is passed to it instead of a new popuo for each list item. How can one pass the id into the popup?

    <div data-role="page">
        <div data-role="header">
             <h1>My page</h1> 
        </div>
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#thepopup" id="5" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 1</h2></a>

                </li>
                <li><a href="#purchase" id="6" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 2</h2></a>
            <p>Item 2 description</p></a>

                </li>
            </ul>
            <div data-role="popup" id="thepopup">
                <ul data-role="listview">
                    <li><a href="view.php?id=5">View details</a></li> 
HERE THE "5" SHOULD BE THE ID OF THE ITEM CLICKED ABOVE
                    <li><a href="edit.php?id=5">Edit</a></li>
                    <li><a data-rel="back" href="#">Cancel</a></li>
                </ul>
            </div>
        </div>
    </div>

Upvotes: 2

Views: 2559

Answers (1)

Omar
Omar

Reputation: 31732

First off, popup div should be a direct child of page div.

Secondly, you can call popup programmatically upon clicking a list item. Once clicked, retrieve id of clicked item and add it to links in popup, then open it.

$("li a").on("click", function (e) {

    // retrieve id
    var item_id = $(this).attr("id");

    // update links in popup with id retrieved
    // exclude cancel button [data-rel=back]
    $("#thepopup li a:not(:jqmData(rel=back))").each(function () {
        var current = $(this).attr("href").split("=");
        var href = current[0] + "=" + item_id;
        $(this).attr("href", href);
    });

    // open popup with desired transition
    $("#thepopup").popup("open", {
        "transition": "pop"
    });
});

Demo

Upvotes: 3

Related Questions