显示标记Listview属于相同的类型ID

时间:2017-02-24 13:19:47

标签: javascript php jquery html

在我的应用程序中,我有三页首页显示标记类型listview(商场,超市等),第二页显示标记listview属于同一类型,第三页显示详细信息每个标记。

我已成功显示类型页面,但未显示相同type_ID的listview个标记!!

page 1 type listview

page 2 markers listview

  

(DB中的地标表)

**L_ID , name , image, Type_ID**
|1    , B_mall        , .jpg , 1|
|2    , c_mall        , .jpg , 1|
|3    , D_supermarket , .jpg , 2|
  

php文件查询

<?php
    $dbhost = '127.0.0.1';
    $dbuser = 'root';
    $dbpass = '';
    $dbname = 'maalem';
    $sql = "SELECT * FROM landmarks where Type_ID=:id";

    try {
        $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $con->query('SET NAMES utf8');
        $stmt = $con->prepare($sql);  
        $stmt->bindParam("id", $_GET["Type_ID"]);
        $stmt->execute();
        $markers = $stmt->fetchAll(PDO::FETCH_OBJ); 
        $con = null;
        echo '{"items":'. json_encode($markers) .'}'; 
        } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }

?>
  

输入js文件

 var serviceURL = "http://localhost/map/";            //192.168.1.157                                


var type;

$('#typeListPage').bind('pageinit', function(event) {
    gettypeList();
});

function gettypeList() {
    $.getJSON(serviceURL + 'gettype.php', function(data) {
        $('#typeList li').remove();
        type = data.type;
        $.each(type, function(index, type) {
            $('#typeList').append('<li><a href="marker.html?Type_ID=' + type.Type_ID + '">' +
                    '<img src="' + type.Icon + '"/>' +
                    '<h4>' + type.type_title + '</h4></a></li>');
        });
        $('#typeList').listview('refresh');
    });
}
  

标记js文件

 var serviceURL = "http://localhost/map/";                                           
 var markers;    
 $('#markerListPage').bind('pageinit', function(event) {
    getmarkerList();
});

function getmarkerList() {
    $.getJSON(serviceURL + 'getmarkers.php', function(data) {
        $('#markerList li').remove();
        markers = data.items;
        $.each(markers, function(index, landmarks) {
            $('#markerList').append('<li><a href="markerdetail.html?L_ID=' + landmarks.L_ID + '">' +
                    '<img src="pics/' + landmarks.Image + '"/>' +
                    '<h4>' + landmarks.Title + '</h4></a></li>');
        });
        $('#markerList').listview('refresh');
    });
}
  

marker.Html文件

 <!DOCTYPE HTML>
<html>
   <header>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
   </header>
   <body>
      <div id="markerListPage" data-role="page" >
         <div data-role="header" >
            <h1>markers</h1>
            <a href="index.html" data-rel="back" class="ui-btn-left ui-btn  ui-btn-icon-notext ui-corner-all ui-icon-back"></a>
         </div>
         <div data-role="content">
            <ul id="markerList" data-role="listview"  data-filter="true"></ul>
         </div>
      </div>
   </body>
</html>

1 个答案:

答案 0 :(得分:1)

 var serviceURL = "http://localhost/map/";                                           
 var markers;    
 $('#markerListPage').live('pageshow', function(event) {
 var id = getUrlVars()["Type_ID"];
 $.getJSON(serviceURL + 'getmarkers.php?Type_ID=' + id, getmarkerList);

});

function getmarkerList(data) {
        $('#markerList li').remove();
        markers = data.items;
        $.each(markers, function(index, landmarks) {

            $('#markerList').append('<li><a href="markerdetail.html?L_ID=' + landmarks.L_ID + '">' +
                    '<img src="pics/' + landmarks.Image + '"/>' +
                    '<h4>' + landmarks.Title + '</h4></a></li>');
        });
        $('#markerList').listview('refresh');

}