[fw-general] Ajax and ZF - How to clear Ajax responded data when click the button again

[Enkhbilguun Erdenetsogt]

Hello,

I'm trying Zend Framework with Ajax. Currently, I can get data from DB 
and print on the browser, but I have got a new problem.
I have a 'Get Data' html button, and when I click that button ajax gets 
some data from my database through Zend Controller. The problem is when 
I click the 'Get Data' button again, my ajax script doing the same 
function and printing the same data after the previous one. I just want 
to remove the previous printed data when I click the button again.
Also I would like to use fadeIn()/fadeOut() visual effect when the data 
is printed on the browser.

Please help me friends :-)
Any comment will be greatly appreciated.


Here is my Ajax code in my view script:
===============
<h2>Find Items using JSON and JQuery</h2>

<input type="text" id="volume" value="" />
<a href="#" id="calculate">Calculate</a>

<div id="wrap">
   <ul id="items">
       <li id="ai92">AI92: </li>
       <li id="ai80">AI80: </li>
       <li id="diesel">Diesel: </li>
   </ul>
</div>


<script type="text/javascript">
   $(function()
   {
       $("#calculate").click(function()
       {
           if($("#volume").val().length == 0){
               alert('Can't be empry!');
           } else {
               getPriceJson($("#volume").val());
           }
           return false;
       });
   });

   function getPriceJson(volume)
   {
       $.post(
       "/async/getprice",
       {
           "volume" :    volume
       },
      
       function(response)
       {
           $("#ai92").append("<a href='#'>"+response.ai92+"</a>");
           $("#ai80").append(response.ai80);
           $("#diesel").append(response.diesel);
       }, 'json');
   }
</script>


---
Sincerely,
Enkhbilguun Erdenetsogt
<<attachment: enkhbilguun.vcf>>