2012-11-02 40 views
0

後,引導程序下拉停止工作我正在爲管理員審查提交的目標的應用程序的頁面工作。每個目標是在3個不同表格中的1個內的<tr>。 「審查」,「完整」和「提交」是三個表格。在將<tr>添加到不同的<table>

每個<tr>上都有一個btn組,可以根據當前擁有的狀態來批准,恢復或拒絕。當狀態改變時,包含目標的內容被刪除並附加到適當的表中。

當它移動btn-group下拉菜單然後停止工作。我認爲它可能需要在添加後添加.dropdown();,但我無法使其工作。

不知道如何使用服務器端數據的這個b/c來設置JSfiddle。任何人對我有什麼建議?

這裏是一個的jsfiddle與所有我當前的代碼: http://jsfiddle.net/xKLN4/

approve: function(clicked) { 
     var id = clicked.attr('data-id'); 
     $.post('<?=URL::to('supervisor/approve_objective')?>',{ 
      'id' : id, 
      'trainee_id' : '<?=$trainee->id?>', 
      'status' : 'completed' //or whatever it should be, one of 'submitted'|'completed'|'review' 
     }, 
     function(data, textStatus){ 
      console.log('Post return data:'); 
      console.log(data); 
      var status = data.status_translated; 
      var lbl = $('.label-'+data.object.objective_id); 
        lbl.fadeOut('fast'); 
        lbl.attr('class','label label-'+data.object.status+' label-'+data.object.objective_id) 
         .text(data.object.status_translated) 
         .fadeIn('fast'); 
         clicked.closest('tr').children('td, th') 
           .animate({ padding: 0 }) 
           .wrapInner('<div />') 
           .children() 
           .slideUp(function() { $(this).closest('tr').remove(); }); 

        var row = clicked.closest('tr').html(); 

        $('#approve-objectives-completed > tbody:last').append('<tr>'+row+'</tr>') 
                    .children('.dropdown-toggle') 
                    .dropdown(); 


     }); 


    }, 

編輯以添加代碼

+0

搭建的jsfiddle追加HTML元素未做Ajax調用的變化。即將它們追加到btn點擊。 – flynfish

+0

我創建了一個沒有服務器端代碼的版本:http://jsfiddle.net/nmM6c/ –

+0

你有沒有第二個看看我的JSfiddle。謝謝:) –

回答

1

下拉工作不因正由wrapInner('<div />')

添加的格

一種解決方案是在將所有內容複製到新行後刪除最後td中的那個div ...

approve: function(clicked) { 

     clicked.closest('tr').children('td, th') 
      .animate({ padding: 0 }) 
      .wrapInner('<div />') 
      .children() 
      .slideUp(function() { $(this).closest('tr').remove(); }); 

     var row = clicked.closest('tr').html(); 

     $('#approve-objectives-completed > tbody:last').append('<tr>'+row+'</tr>') 

     //Remove div  
     var $lastTdDiv = $('#approve-objectives-completed > tbody > tr:last > td:last > div'); 
     var contents = $lastTdDiv.contents(); 
     $lastTdDiv.replaceWith(contents); 

這裏是jsFiddle與我在「審批」功能

+0

非常感謝!要在我的網站上試試這個。 :) –