jQuery/AJAX appends data to DIV rather than updating current results on second form submit

Hi guys I am rather new at AJAX programming but I have managed to get part of my code to function the way I would like it to. I hope you guys can help me get through this roadblock and I want to thank you guys ahead of time for all the help i have received just buy reading through this site.

Currently, I have:

1. A form with two input fields that (onClick) sends data via AJAX to a php script which returns an array of bus details.

2. I have managed to append the bus info to the $('#main') div successfully.

what i need help with...

The first AJAX call works and so does any call afterwards. However, every time i submit the form again, after the first success call has been made, the results do not update with the new information. Instead the new search results are added to the end of the previous ones and I end up with a long list of buses rather than just the ones I specified in the search field.

<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();
   开发者_C百科 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>

This is how the html looks when I submit the form three times with different search parameters:

2
55
09:00:00
20

4
54
09:00:00
43

3
55
09:00:00
16

How do I update the first call so that I only end up with one set of bus details that can be refreshed/updated?

---Solved-------- This is what I ended up doing:

1. on AJAX success:

           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);
             }
       }
   

thanks @mightyplow for the tip

you append all results to the main-div. you could create a new one with

var newContent = document.createElement('div');

, use this new div for the appendings $(newContent).append...

and finally say $('#main').html($(newContent).html())

that way you put all your new information in a temporary div and then overwrite the main-div.

hope, that helps!

another way would be to use a $('main').html('') before the appendings to clear the main-div before adding the new information =)