的jQuery/AJAX將數據追加到DIV而不是更新第二表格上目前的結果提交

Question

嗨，大家好我是相當新的AJAX編程，但我設法讓我的代碼部分的功能，我想它的方式。我希望你們能夠幫助我解決這個問題，並且我想提前感謝你們提供的所有幫助，我只是通過這個網站購買閱讀材料。

目前，我有：

1. 具有兩個輸入字段甲形式（的onClick）通過AJAX將數據發送到一個PHP腳本返回的總線的細節的陣列。

2. 我已成功地追加總線信息到$（「＃主」）DIV成功。

什麼，我需要幫助...

第一個AJAX調用的作品也是如此任何呼叫之後。但是，每次我再次提交表單時，在第一次成功調用之後，結果不會隨新信息一起更新。相反，新的搜索結果添加到以前的結束和我結束了公交車，而不僅僅是我在搜索字段中指定的一個長長的清單。

<script type="text/javascript"> 
$(document).ready(function() { 
$("#date").datepicker({ 
    showOtherMonths: true, 
    selectOtherMonths: true,  
    changeMonth:true, 
    changeYear:true, 
    numberOfMonths:1, 
    showButtonPanel:true, 
    showOn: "button", 
    buttonImage: "images/calendar.gif", 
    buttonImageOnly: true, 
    dateFormat:'yy-mm-dd' 
}); 

$('#search1').click(function(){ 
    var date = $('#date').val(); 
    var location = $('#location').val(); 
    var datastring = 'date=' + date + '&location=' + location; 
    $.ajax({ 
     type: "POST", 
     cache: "true", 
     url: "search.php", 
     datatype:"json", 
     data: datastring, 
     success: function(data){ 
      $main = $('#main'); 

      for ($i = 0, $j = data.bus.length; $i < $j; $i++) { 

        $("#main").append('<div>' + data.bus[$i].number + '</div>'); 
        $("#main").append('<div>' + data.bus[$i].capacity + '</div>'); 
        $("#main").append('<div>' + data.bus[$i].time + '</div>'); 
        $("#main").append('<div>' + data.bus[$i].seats + '</div>'); 
       } 
     } 
    }); 

    return false; 
    }); 
}); 

</script> 

這是HTML的樣子時，我用不同的搜索參數提交表單三次：

2 
55 
09:00:00 
20 

4 
54 
09:00:00 
43 

3 
55 
09:00:00 
16 

如何更新的第一個電話，讓我只能用一組總線的結束可以刷新/更新的細節？

---解決-------- 這是我落得這樣做：

1. AJAX的成功：

    success: function(data){ 
   
        $('#main').html('') 
   
        for ($i = 0, $j = data.bus.length; $i < $j; $i++) { 
         var html = '<div id="bus_detail">'; 
         html += '<div id="capacity">' + data.bus[$i].capacity + '</div>'; 
         html += '<div id="time">' + data.bus[$i].time + '</div>'; 
         html += '<div id="seats">' + data.bus[$i].seats + '</div>'; 
         $('#main').append(html); 
         } 
       } 
   

感謝@mightyplow爲尖端

Answer 1

另一種方法是使用一個$（「主」）。該appendings之前的HTML（「」）添加新的信息=）

Answer 2

您附加的所有結果主股利。 你可以創建一個新的使用

VAR newContent =使用document.createElement（ 'DIV'）;

，使用的appendings $這個新的div（newContent）.append ...

終於說出$（ '＃主'）。HTML（$（newContent）的.html（））

這樣你就可以將所有的新信息放在一個臨時div中，然後覆蓋main-div。

希望幫助！