Making a list view popup

Question

I am trying to make a very basic listview popup. I just cant seen to get it working. Here is the code I have so far

        <div data-role="page">
        <div data-role="content">
            <div id="map"></div>
            <a href="#filter" class="map_buttons" id="map_filter_button" data-rel="dialog">Filter</a>
            <a href="#menu" class="map_buttons" id="map_manu_button" data-rel="dialog">Menu</a>
            <a href="#report_popupMenu" class="map_buttons" id="map_report_button" data-rel="popup" data-inline="true" data-transition="slideup">Report</a>
        </div>
    </div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

<div id="report_popupMenu" data-role="popup">
    <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
        <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li  data-theme=\"b\">Choose Category.</li>
        <li data-theme=\"b\">Choose Category.</li>
    </ul>
</div>

Im using the following CDNs

I want the popup to be at the centre of the screen. What i have done has been following this site http://view.jquerymobile.com/1.3.0/docs/widgets/popup/#&ui-state=dialog but its just not working. Any help will be appreciated.

Here is the code that is being usred to load the

s from the config file

$(document).ready(function() {

var map = null;
init();
popuateCat();
function init() {
    var mapProp = {
        center : new google.maps.LatLng(51.508742, -0.120850),
        zoom : 5,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI : true,
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);

}

function popuateCat() {

    $.ajax({
        url : "configs/reportCatagories.config",
        dataType : "xml",
        success : function(data) {
        $("#report_categories").append("<li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>");
            $(data).find("Category").each(function() {
                var dataString = $(this).text();
                var cat = '<li><a href=\"#newReport\" id=\"' + dataString + '\">' + dataString + '</a></li>';
                $("#report_categories").append(cat);
            });
        }
    });

}

});

Upvotes: 0

Views: 5191

Answer 1

According to the docs, you have to place the popup div's inside the page div. Like this:

<div data-role="page">
  <div data-role="popup">
  </div>
</div>

I believe yours aren't inside the page div, check your closing div tags.

Answer 2

Working example: http://jsfiddle.net/Gajotres/QGhYN/

Attribute data-position-to="window" is added to popup div. It will center popup.

<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#report_popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div id="report_popupMenu" data-role="popup" data-position-to="window">
            <ul id="report_categories" data-role="listview" data-inset="true\" style="width:210px;">
                <li data-role=\"divider\" data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li  data-theme=\"b\">Choose Category.</li>
                <li data-theme=\"b\">Choose Category.</li>
            </ul>
        </div>
    </div>
</div>