2013-01-23 3 views
1

안녕하세요. jquery 모바일 애플리케이션에 문제가 있습니다. 페이지를 방문하여 홈페이지로 돌아와서 일부 항목이 중복 된 경우 문제가 있습니다. 내 페이지를 다시 방문 할 때마다 항목이 점진적으로 복제됩니다.Jquery mobile duplicate images

캐시에 일종의 캐시가있는 것처럼 보입니다.

내 코드는 다음과 같습니다. 어떤 도움을 주시면 감사하겠습니다.

내가 캐시를 지우거나 캐시에서 페이지를 제거합니까 어떻게 JQuery와 모바일 버전 1.3.0을 사용하고 있지만이 또한

버전 1.2.0에 어떻게됩니까?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bucuresti Deals</title> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 
<link rel="stylesheet" href="jquery.mobile.structure-1.3.0-beta.1.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> 
<script src="jquery-1.8.3.min.js"></script> 
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> 


<style type="text/css"> 

.ui-header.ui-bar-a{ 
background-color: white; 
} 

.ui-header .ui-title { 
text-indent:-9999px; 
font-size:0px; 
background:url(../images/headerbar.png) no-repeat 50% 2px; 
height:30px; 
padding:5px 0 5px 50px; 
margin:0px; 
} 


img { 
    border:1px solid black; 

    margin-left: 10px; 

} 

#mainTable 
{ 
border:2px solid; 
border-radius:10px; 
-moz-border-radius:25px; /* Old Firefox */ 
width:100%; 

} 

th 
{ 
height:10px; 
text-align: left; 
padding-left: 10px; 
} 

#detail{ 
    vertical-align:top; 
} 



.ui-corner-all, 

.ui-corner-top, 

.ui-corner-bottom, 

.ui-corner-tl, 

.ui-corner-tr, 

.ui-corner-bl, 

.ui-header .ui-btn-corner-all, 

.ui-listview-filter .ui-btn-corner-all, 

#restau_infos .ui-btn-corner-all, 

#contact_buttons .ui-btn-corner-all, 

#notation .ui-btn-corner-all{ 

border-radius:0.2em; 

} 
</style> 

</head> 
<body> 

<div id="restaurant_detail" data-role="page" data-add-back-btn="true" data-theme="c"> 

    <div data-role="header" data-theme="c"> 
     <h1> Restaurant Information</h1> 
     <a href="index.html" class="ui-btn-right" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> 
    </div> 

    <div data-role="content"> 
    <div class="ui-grid-a" id="restau_info">  
     <div class="ui-block-a" > 
     <h1 id="name"></h1> 
     <p id="title"></p> 
     <p> Specials: </p> 
      <ul id="specials"> 
       <li id='special1'></li> 
       <li id='special2'></li> 
       <li id='special3'></li> 
       <li id='special4'></li> 
       <li id='special5'></li> 
      </ul>   
     </div>  
     <div class="ui-block-b" id="infoBlock"> 
     <p><a id="website" href="#" rel="external" data-role="button"> See our website</a></p> 
     </div> 
    </div><!-- /grid-a --> 
    <hr/> 

    <div class="ui-grid-a" id="contact_infos"> 
     <div class="ui-block-a"> 
     <h2 id="contactus"> Contact us</h2>  
     </div>  
     <div class="ui-block-b"> 
     <img src="01_maps.jpg" alt="plan jeanette"/> 
     </div> 
    </div><!-- /grid-a --> 
    <div id="contact_buttons"> 
     <a href="#" id="telephone" data-role="button" data-icon="tel"> Call us </a> 
    </div> 
    <hr/> 

    <div id="notation"> 
    <form> 
    <label for="select-choice-0" class="select"><h2> User rating </h2></label> 
     <select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" > 
      <option value="one" class="one"> Not good at all </option> 
      <option value="two" class="two">Average </option> 
      <option value="three" class="three">Pretty good </option> 
      <option value="four" class="four"> Excellent </option> 
     </select> 
    </form> 
    </div> 


    <script type="text/javascript"> 

    $('#restaurant_detail').live('pageinit',function(event){ 

     // get the establishment id from session data 
     var est_id = sessionStorage.estID; 

     var pass_url = "http:/MySite/getRestaurantDetail.php?est_id=" + est_id; 

     // Call ajax to get the restaurants in the area 

     $.ajax({ 
      type:'GET', 
      url:pass_url, 
      dataType:'jsonp', 
      jsonp: 'jsoncallback', 
      timeout: 5000, 
      success: function(data, status) 
      { 
       $.each(data, function(i,item) 
       { 


       // Set the name of the restaurant 
       $("#name").text(item.rest_name); 

       // Set the title for restaurant 
       $("#title").html('<strong>' + item.rest_title + '</strong>'); 

       // Specials 
       $("#special1").text(item.rest_special1); 
       $("#special2").text(item.rest_special2); 
       $("#special3").text(item.rest_special3); 
       $("#special4").text(item.rest_special4); 
       $("#special5").text(item.rest_special5); 

       $('#specials li:empty').remove(); 

       // Address line 1 and 2 
       $("<p id='address1'>" + item.rest_address1 + "</p>").insertAfter('#contactus'); 

       // photo 

       $('#infoBlock').prepend("<p id='photo'><img src='http://MySite/" + item.rest_photo_url + "' alt=" + item.rest_name + "/></p>"); 

       // website address 
       $("#website").attr('href',item.rest_web_url); 
       $("#webiste").css('width','20px'); 


       // telephone number 
       $("#telephone").attr('href', item.rest_tel); 

       // apply css style to span with the class of ui-icon-tel 
       $(".ui-icon-tel").css("background","url('../images/phone_icon.png') no-repeat"); 


      });   
      }, 
      error: function(data) 
      { 

      } 
     }); 

     var SelectedOptionClass = $('option:selected').attr('class'); 
     $('div.ui-select').addClass(SelectedOptionClass); 

     $('#note_utilisateur').live('change', function(){  
      $('div.ui-select').removeClass(SelectedOptionClass); 

      SelectedOptionClass = $('option:selected').attr('class'); 
      $('div.ui-select').addClass(SelectedOptionClass);  

     }); 

    }); 




</script> 


    </div> 


</div><!-- /page --> 
</body> 
</html> 

PHP 서버 측 코드

<?php 
header('Content-type: application/json'); 

$est_id = $_GET['est_id']; 

$server = "server"; 
$username = "username"; 
$password = "pass"; 
$database = "database"; 

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error()); 
mysql_select_db($database, $con); 


$sql = 'SELECT establishments.establishment_id AS estID, 
     name AS rest_name, 
     title AS rest_title, 
     special_1 AS rest_special1, 
     special_2 AS rest_special2, 
     special_3 AS rest_special3, 
     special_4 AS rest_special4, 
     special_5 AS rest_special5, 
     website_address AS rest_web_url, 
     address AS rest_address1, 
     telephone_num AS rest_tel, 
     description AS rest_desc, 
     photo_url AS rest_photo_url 
    FROM bucurestideals1.establishments 
    WHERE establishments.establishment_id ="'.$est_id.'"'; 

$result = mysql_query($sql) or die ("Query error: " . mysql_error()); 

$records = array(); 

while($row = mysql_fetch_assoc($result)) { 
    $records[] = $row; 
} 

mysql_close($con); 

echo $_GET['jsoncallback'].'(' . json_encode($records) . ');'; 
?> 

나는 CSTE 연구진에 .live의 기능을 변경 1로이 문제를 해결 할 수 있으며

즉, 실행 된 함수의 끝에서 false를 반환했다
+0

캐시가있는 상태 여야합니다. 여러 번 시도하고 새로 고침하여 시나리오를 재현 할 수 없습니다. 여기 JSFiddle, http://jsfiddle.net/gte6F/ 거기에 그것을 시도하고 그것을 얻을보십시오. –

+0

응용 프로그램의 데이터가 데이터베이스에서 제공되므로 동일하게 작동하지 않을 수 있습니다. – user1907509

+0

사용중인 서버 측 프로그래밍 언어는 무엇입니까? –

답변

1

여러분의 문제는 페이지를 방문 할 때마다 이미 prepend() 메소드를 사용하여 DOM에있는 데이터에 데이터를 추가한다는 것입니다. 데이터를 추가하기 전에 데이터를 추가하는 요소 (infoBlock div)를 지우는 것이 좋습니다. 즉 live() 이벤트에 대한 내용을 정리하는 것이 좋습니다.

+0

나에게 $ ("# infoBlock") 같은 것을해라. empty(); – user1907509

+0

$ ("# infoBlock")과 같은 것 .html (""); .empty() 내 아이들을 infoBlock (http://api.jquery.com/empty/) –

+0

안타깝게도 운이 없다면 나는 아침에 더 가까워 질거야. 지금까지 당신에게 조언을 주셔서 감사합니다 – user1907509