Jquery Mobile List Click

아래 목록에서 Jquery로 모바일 목록보기를 만들었습니다. 제가 도움이 필요한 것은 특정 목록 요소를 클릭 할 때입니다 - 지금은 새 페이지로 이동하고 resteraunt id를 표시하도록 설정했습니다. 내가 시도하고 싶은 것은 클릭 한 특정 listview 엔트리의 동일한 정보가 새 페이지에 렌더링된다는 것입니다. 즉, 클릭 된 목록 요소에서 이전에 가지고 있던 모든 정보가 새 페이지에 렌더링됩니다. 간단한 단락. 이 동적 listviews 주위에 내 머리를 얻으려고 나는 문제가 어디 메신저. 아무도 도와 줄 수 있습니까? 정말 고맙겠습니다. 데이터베이스 정보가 완벽하게 읽혀졌습니다!Jquery Mobile List Click

<html> 
<head> 
<meta charset="utf-8" /> 
<title>Find A Deal</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <style> 
     img.fullscreen { 
      max-height: 100%; 
      max-width: 100%; 
     } 
     </style> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script type="text/javascript"> 
    $(document).on('pagebeforeshow', '#index', function(){ 
     $("#list").empty(); 
     var url="http://localhost/test/json3.php"; 
     $.getJSON(url,function(json){ 
      //loop through deals 
      $.each(json.deals,function(i,dat){ 
       $("#list").append("<li><a id='"+dat.restaurantid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>"); 
       $(document).on('click', '#'+dat.restaurantid, function(event){ 
        if(event.handled !== true) // This will prevent event triggering more then once 
        { 
         listObject.itemID = $(this).attr('id'); 
         $.mobile.changePage("#index2", { transition: "slide"}); 
         event.handled = true; 
        } 
       });    
      }); 
      $("#list").listview('refresh'); 
     }); 
    }); 

    $(document).on('pagebeforeshow', '#index2', function(){  
     $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID); 
    }); 

    var listObject = { 
     itemID : null 
    }  
</script> 
</head>  
<body>  
<div data-role="page" id="index"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Current Deals</h1> 
    </div> 

    <div data-role="content"> 
     <div class="content-primary"> 
      <ul id="list" data-role="listview" data-filter="true"></ul> 
     </div> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li> 
       <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<!--New Page --> 

<div data-role="page" id="index2"> 
<div data-role="header"> 
     <h1> Find A Deal </h1> 
    </div> 

    <div data-role="content"> 
     <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a> 
    </div> 

    <footer data-role="footer" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="#index" data-icon="grid">My Deals</a></li> 
      </ul> 
     </nav> 
    </footer> 
</div> 
</body> 
</html>

출처

2013-02-13 user2025934

게시 한 코드를 기반으로하는 아래의 예에서 선택한 ID는 페이지 색인에서 페이지 색인 2로 전달됩니다.

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Find A Deal</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <style> 
      img.fullscreen { 
       max-height: 100%; 
       max-width: 100%; 
      } 
     </style> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <script type="text/javascript"> 
      $(document).on('pagebeforeshow', '#index', function() { 
       $("#list").empty(); 
       for (var i = 0; i < 5; i++) { 
        $("#list").append (
         $(["<li><a id='id_",i ,"'><h1>H1_label_",i,"</h1><p>P_label_",i,"</p></a></li>"].join("")). 
         on('click', ['#id_',i].join (""), function(e){ 
          if(e.handled !== true) { 
           listObject.itemID = this.id;         
           $.mobile.changePage("#index2", { transition: "slide"}); 
           e.handled = true; 
          } 
         }) 
        ); 
       } 
       $("#list").listview('refresh'); 
      }); 

      $(document).on('pagebeforeshow', '#index2', function() { 

       //selected id on page transition 
       alert(['selected id: ',listObject.itemID].join("")); 
      }); 

      var listObject = { 
       itemID: null 
      } 
     </script> 
    </head> 

    <body> 
     <div data-role="page" id="index"> 
      <div data-role="header" data-position="fixed"> 
       <h1>Current Deals</h1> 

      </div> 
      <div data-role="content"> 
       <div class="content-primary"> 
        <ul id="list" data-role="listview" data-filter="true"></ul> 
       </div> 
      </div> 
      <div data-role="footer" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li> 
          <a href="http://localhost/findadeal/index.html" data-icon="home">Home</a> 
         </li> 
         <li> 
          <a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <!--New Page --> 
     <div data-role="page" id="index2"> 
      <div data-role="header"> 
       <h1> Find A Deal </h1> 
      </div> 
      <div data-role="content"> 
       <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal</a> 
       <p></p> 
      </div> 
      <footer data-role="footer" data-position="fixed"> 
       <nav data-role="navbar"> 
        <ul> 
         <li> 
          <a href="index.html" data-icon="home">Home</a> 
         </li> 
         <li> 
          <a href="#index" data-icon="grid">My Deals</a> 
         </li> 
        </ul> 
       </nav> 
      </footer> 
     </div> 
    </body> 
</html>

출처

2013-02-13 20:04:15

죄송합니다. 자신이 잘못 설명하고 있다는 느낌이 들었습니다. 사용자가 원래 목록의 요소 중 하나를 클릭하면 새로운 페이지가로드됩니다. 이 새 페이지에서 선택한 목록 항목과 관련된 "dat.restaurantid, dat.name 및 dat.dname"은 데이터베이스에서 가져와 단락 형식으로 새 페이지에 표시됩니다 (

). 그게 상황을 더 잘 설명해 주나요? 사과! – user2025934

내 게시물을 업데이트했습니다. 선택한 목록 항목 ID는 페이지 색인에서 색인 2로 전달됩니다. 동일한 방법으로 원하는 모든 정보를 페이지 색인에서 페이지 색인 2로 전달할 수 있습니다. pagebeforeshow 이벤트가 index2 페이지에 대해 트리거되면 선택된 ID를 기반으로 특정 ID를 기반으로 특정 데이터를 표시 할 수 있습니다. –

목록보기의 데이터를 렌더링하고 목록의 각 클릭/터치 시작에서 다른 페이지의 데이터를 표시합니다.

// 제 기능

function render(){   
    var html=""; 
    html += "<li id="+index+"><a href='#'><img src='images/new-iaav-72.png' class='ui- corner-none' style='width:50px;height:56px'>"; 

    html += "<div style='margin-left:-10%;margin-top:-2%'><h1>"+title +"</h1> </div>";   
    html += "</a></li>";       
    $("#xyz div:jqmData(role=content) #ul1").append (html); 

    func1 = function() {showDetails(index,title,descrp,image_large);}; 
    document.getElementById(index).addEventListener("click", func1);

} 번째 페이지에 데이터를 렌더링 할

// 번째 함수.

function showDetails(){ 

    if(image_large!="") 
    $('#setDetailImage').attr("src",image_large); 
else   
    $('#setDetailImage').attr("src",'images/defaultDog.png'); 

$('#setDetailTitle').text(title); 
$('#setDetailDescription').html(descrp).text(); 

}

출처

2013-10-14 17:51:59 Saurabh

Jquery Mobile List Click

답변

관련 문제