CODEWITHSUNDEEP
jquerydrop-down-menutwitter-bootstrap
Mike Lucid
Mike Lucid

Reputation: 1354

Bootstrap dropdown stops working after appending <tr> to different <table>

I am working on a page for an app where the admin reviews a submitted objective. Each objective is a <tr> inside 1 of 3 different tables. "review", "complete", and "submitted" are the three tables.

There is a btn-group on each <tr> with an option to approve, revert or deny depending on which status it currently has. When the status is changed the containing the objective is removed and appended to the proper table.

When it moves the the btn-group dropdown then stop working. I thought that it may need to have .dropdown(); added after it was appended, but I cant make it work.

Not sure how to setup a JSfiddle with this b/c of the use of server side data. anyone have a suggestion for me?

Here is a JSfiddle with all of my current code: 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();


        });


    },

Edited to add code

Upvotes: 0

Views: 708

Answers (1)

flynfish
flynfish

Reputation: 5867

The dropdown is not working due to the div that is being added by wrapInner('<div />')

One solution is to remove that div in the last td after you have copied everything into the new row...

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

Here is the jsFiddle with my changes in the 'approve' function

Upvotes: 2

Related Questions