2011-05-02 46 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'>?