2015-01-07 127 views
1

我正在獲取JSON數據(在給定距離內可用的酒店列表)。我以JSON格式獲得以下信息,酒店名稱,從當前位置到酒店的距離,房間數量。在給定的距離內可能有不止一家酒店。我們必須打印所有這些信息ListView像下面一樣。我想將酒店下圖中的所有信息合併到一個列表視圖中。如何將多個信息添加到JQuery Mobile列表視圖

enter image description here

當我們點擊酒店的任何列表,它會跳轉到酒店網站或更多細節奉獻酒店頁面。

Javascript代碼是。

<script> 
      $(document).ready(function(){ 
       $("#btnReg").click(function(){ 
        $("#listOfHotelOption").empty(); 
        var distance = document.getElementById('distance_id').value; 
        var output=""; 
        $.ajax({ 
          url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
          type:"GET", 
          dataType:"json", 
          data:{type:"login", Distance:distance}, 
          ContentType:"application/json", 
          success: function(response){ 
          console.log(response) 
           $.each(response, function(index,value){ 

           output+="<li>"+value.Hotel.Name+" "+value.Hotel.Distance+" " +value.Hotel.Rooms+"</li>"; 
           }); 
          $("#listOfHotelOptions").append(output).listview().listview('refresh'); 
         }, 
          error: function(err){ 
          alert(JSON.stringify(err)); 
         } 
        }) //ajax 
       }); //click 
      }); //ready 
    </script> 

**My server site code is** 

<?php 
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request 
mysql_connect("localhost","root","1234"); 
mysql_select_db("hotels"); 
if(isset($_GET['type'])) 
{ 
    if($_GET['type']=="login"){ 
     $distanceInKM=$_GET['Distance'];  
     $query="Select * from Hotels where Distance<='$distanceInKM'"; 
     $result=mysql_query($query); 
     $totalRows=mysql_num_rows($result); 
     if($totalRows>0){ 
      $recipes=array(); 
      while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){ 
       $recipes[]=array('Hotel'=>$recipe); 
      } 
      $output=json_encode(($recipes)); 
      echo $output; 
     } 
    } 
} 
else{ 
    echo "Invalid format"; 
} 
+0

要格式化的列表項目看起來像你有照片嗎? – Tasos

+0

@Tasos,抱歉請忽略之前的評論,我正在嘗試輸出+ =「

  • 」+「\""+uu+"\"」+「」+ value.Hotel.Name +「have」+ value.Hotel.Rooms +「available」+「
  • 」;也每個列表顯示點擊能夠和重定向到dedecated酒店頁面.. – geeks

    回答

    1

    我準備了一個演示從列表項抓取數據,並接近你想要達到

    演示

    http://jsfiddle.net/0m3pxznf/

    jQuery的搶數據的格式從你使用的列表項目<li data-whatever="abcdcd" ...等,並抓住他們點擊。

    $(document).on("click", "#hotels >li", function() { 
    var hotelname = $(this).closest("li").attr('data-hotel'); 
    var rooms = $(this).closest("li").attr('data-rooms'); 
    alert(hotelname + "--" + rooms) 
    }) 
    

    的Html

    <li data-hotel="taj" data-rooms="10"><a> 
        <img src="http://s30.postimg.org/9evb4kq65/album_bb.jpg"> 
         <h2>Hotel:<span class="hotel">Taj</span><span class="avail">Available Rooms:<span class="rooms">10</span></h2> 
         <p>Distance:<span class="distance">10km</span></p> <img src="http://s21.postimg.org/3qio5rxeb/album_p.jpg" class="sideimg"></a> 
    
    </li> 
    

    的CSS

    .sideimg{ 
    position: absolute; 
    right:0 !important; 
    top: 0 !important; 
    max-height: 5em !important; 
    max-width: 5em !important; 
    } 
    
    .ui-listview>li h2 { 
    margin-top: -5px !important; 
    } 
    .ui-listview>li p { 
    margin-top:10px !important; 
    } 
    
    .hotel, .rooms { padding-left: 5px; } 
    
    
    .avail { padding-left: 15px; } 
    

    結果

    enter image description here

    如果你想將用戶重定向到酒店網站然後將列表中的項目data-url="the-url"並抓住它的點擊功能和使用window.location.href = theurlvariable;

    +0

    非常感謝你.. – geeks

    +0

    @neelabhsingh沒問題。請參閱最後一個註釋以重定向到酒店網站 – Tasos

    +0

    K,這與我們昨天討論的相同,現在我需要打印特定酒店的所有信息並放入單個列表視圖,並且當我們單擊列表時它將重定向到專用酒店頁面或酒店網站 – geeks

    相關問題