JQuery GETは不要なHTMLを取得します

Question

私はphp cartクラスを使用しています。ユーザーがクリックして商品を追加したときにdivを更新するjqueryが追加されました。

私が抱えている問題は、製品が追加されたときに、製品のリストがHTMLページ（スクリーンショット）に複製されていることです。

デフォルトのページ：

---

そして、すべての製品が追加されたときにこれが結果です：

---

あなたが見ることができるようにカートが更新されます製品の重複セットが表示されます。

ここで私が使用していますjQueryの：

<script type="text/javascript"> 
function getItem(id) 
{ 
$.ajax({ 
type: "GET", 
url: 'index2.php', 
data: "action=add&id=" + id, 
success: function(data) { 
     $('#info').html(data); 
} 

}); 

} 
</script> 

とID情報とdivの間でのPHP：

<div id="info"> 
<?php 
if(!empty($items)){ 
    echo ' 
    <table style="border:2px solid #cc0000;width:400px"> 
    <tr> 
     <td><strong>Item</strong></td> 
     <td><strong>Price</strong></td> 
     <td><strong>Quantity</strong></td> 
     <td><strong>Total</strong></td> 
     <td></td> 
    </tr>'; 

    $total = 0; 
    foreach($items as $id=>$qty) { 
     foreach($products as $product) { 
      if($product['id'] == $id) 
       break; 
     } 
     if(!isset($product['name'])) 
      continue; 

     echo ' 
     <tr> 
      <td>' . $product['name'] . '</td> 
      <td>$' . $product['price'] . '</td> 
      <td>' . $qty . '</td> 
      <td>$' . ($product['price'] * $qty) . '</td> 
      <td><a href="?action=remove&id=' . $id . '">[x Remove]</a></td> 
     </tr>'; 

     $total += $product['price'] * $qty; 
    } 

    echo ' 
    <tr> 
     <td><a href="?action=empty">[Empty Cartt]</a></td> 
     <td colspan="4" align="right"><strong>Grand Total: $' . $total . '</strong></td> 
    </tr> 
    </table>'; 
} 
else{ 
    echo '<p style="color:#990000;">Your shopping cart is empty.</p>'; 
} 
?> 
</div> 

は、私がこれを引き起こしているかわからないが。

解決方法はありますか？

Answer 1

ページ全体のコピーを内部にレンダリングしているようです。繰り返しのヘッダーに注意してください。

解決策は、index2.php（またはどのエンドポイントが最適か）が情報テンプレートのみを含むこと、または意図的にビュー全体を再描画していることを確認することです（親コンテナのhtmlを設定する必要があります。内側のもの）。

Answer 2

あなたが好きな、同じ時間に、同じIDを持つただ一つのdivをしたtahtシュルを作るために、代わりにreplaceWith()を使用してみてください、同じidたびに別のdivの内側#info div要素を挿入している：

$('#info').replaceWith(data); 

これが役に立ちます。