2011-05-02 51 views
1

下面的代碼用於調用網站模塊並構建下面列出的html代碼。看下面的問題。jquery - 爲元素添加自動刷新功能

$.ajaxSetup ({ 
    cache: false 
}); 
var loadUrl = "test_app_module.asp"; 


function update(rowIdValue) { 

    $.get(
     loadUrl, 
     { passRowId: rowIdValue }, 
     function(responseText){ 
      $("#contentUpdateRefresh").html(responseText); 


      $('#airplane div a').click(function() 
        { 
         // Asign value of the link target 
         var thisSeatStatus = $(this).parent('div').attr('class'); 
         var thisSeatStatus = $.trim(thisSeatStatus); 
         var thisSeatStatusStart = thisSeatStatus ; 

         if(thisSeatStatusStart=="available"){ 

          $(this).removeClass(); 
          $(this).addClass('selected'); 

          var thisSeat = $(this).parent('div').parent('li').attr('class'); 
          // Toggle selected class on/off 
          $(this).parent('div').removeClass(); 
          $(this).parent('div').addClass('selected'); 
          this.blur(); 

          var thisEventDtl = $("[id^=aTheDtlIdNo_]").attr('id'); 
          var thisEventDtl = thisEventDtl.replace(/aTheDtlIdNo_/, ''); 
          var thisEventDtl = $.trim(thisEventDtl); 

          var thisTetranId = $("[id^=aTetranIdNo_]").attr('id'); 
          var thisTetranId = thisTetranId.replace(/aTetranIdNo_/, ''); 
          var thisTetranId = $.trim(thisTetranId); 

          var thisSeatDesc = $(this).parent('div').parent('li').attr('class'); 
          var thisSeatDesc = $.trim(thisSeatDesc); 

          var thisSeatStatus = $(this).parent('div').attr('class'); 
          var thisSeatStatus = $.trim(thisSeatStatus); 

          seatReserve(thisTetranId,thisEventDtl,thisSeatDesc,thisSeatStatusStart); 
         } 
         else if(thisSeatStatusStart=="selected"){ 

          $(this).removeClass(); 
          $(this).addClass('available'); 

          var thisSeat = $(this).parent('div').parent('li').attr('class'); 

          $(this).parent('div').removeClass(); 
          $(this).parent('div').addClass('available'); 

          this.blur(); 

          var thisEventDtl = $("[id^=aTheDtlIdNo_]").attr('id'); 
          var thisEventDtl = thisEventDtl.replace(/aTheDtlIdNo_/, ''); 
          var thisEventDtl = $.trim(thisEventDtl); 

          var thisTetranId = $("[id^=aTetranIdNo_]").attr('id'); 
          var thisTetranId = thisTetranId.replace(/aTetranIdNo_/, ''); 
          var thisTetranId = $.trim(thisTetranId);        

          var thisSeatDesc = $(this).parent('div').parent('li').attr('class'); 
          var thisSeatDesc = $.trim(thisSeatDesc); 

          var thisSeatStatus = $(this).parent('div').attr('class'); 
          var thisSeatStatus = $.trim(thisSeatStatus); 

          seatReserve(thisTetranId,thisEventDtl,thisSeatDesc,thisSeatStatusStart); 

         }; 

         return false; 
        } 
      ); 
     }, 
     "html" 
    ); 

} 

下面的代碼是輸出。根據上面的代碼,每個標籤都有一個點擊功能。這工作正常,並按預期。現在的事情是,我想添加一個自動刷新功能到相同的-a-標籤,它將發送參數,(li class屬性,即「B_seat_22 B」)到網站模塊,然後接收適當的狀態(即可用,選擇,保留)。 如何根據點擊功能將此自動刷新功能綁定到-a-標籤?有任何想法嗎?

<li class="B_seat_22 B"><div class="available"><a class="available" href="#row_22" title="22B">22B</a></div></li> 
<li class="B_seat_23 B"><div class="available"><a class="available" href="#row_23" title="23B">23B</a></div></li> 
<li class="B_seat_24 B"><div class="selected"><a class="selected" href="#row_24" title="24B">24B</a></div></li> 
<li class="B_seat_25 B"><div class="selected"><a class="selected" href="#row_25" title="25B">25B</a></div></li> 
<li class="B_seat_26 B"><div class="selected"><a class="selected" href="#row_26" title="26B">26B</a></div></li> 
<li class="B_seat_27 B"><div class="reserved"><a class="reserved" href="#row_27" title="27B">27B</a></div></li> 
+0

請問您的Ajax調用返回只有一里,或許多LIS? – 2011-05-02 09:02:08

+1

將刷新綁定到每個座位似乎很奇怪。你是一次刷新所有座位還是一次刷新一次? – mrtsherman 2011-11-21 03:52:09

回答

0

只給你一個想法:

<div id='airplane'> 
    <li class="B_seat_22 B"><div class="available"><a class="available" href="#row_22" title="22B">22B</a></div><input class='status' value='available' /></li> 
    <li class="B_seat_23 B"><div class="available"><a class="available" href="#row_23" title="23B">23B</a></div><input class='status' value='available' /></li> 
    <li class="B_seat_24 B"><div class="selected"><a class="selected" href="#row_24" title="24B">24B</a></div><input class='status' value='available' /></li> 
    <li class="B_seat_25 B"><div class="selected"><a class="selected" href="#row_25" title="25B">25B</a></div><input class='status' value='available' /></li> 
</div> 

$('.status').change(function() { 
    //send-info-for-this-seat-to-update 
    alert('need to send info'); 
    updateInfo('with the new info'); 
}); 


function updateInfo(which) { 
    alert(which); 
} 

One more thing: is B a separate class in <li class='B_seat_22 B'>?