Bootstrap table row detail - ajax data

Question

Im loading row detail information in a bootstrap table via an Ajax call with the id as parameters .
This details show within a collapsible row using a glyph icon button.

However,clicking back on the button to collapse the row end up in distorting the display.
I've been struggling to find a fix to it although the code seems correct.
May you find the jsFiddle here

var parentsData = {
  "success": true,
  "parents": [{
    "id": 1531,
    "Firstname": "Austin",
    "Surname": "Ana\u00eblle",
    "schoolId": "046039",
    "schoolName": "ARCAMBAL",
    "commune": "ARCAMBAL"
  }, {
    "id": 2032,
    "Firstname": "Ramos",
    "Surname": "L\u00e8i",
    "schoolId": "046043",
    "schoolName": "J CALVET",
    "commune": "CAHORS"
  }, {
    "id": 3036,
    "Firstname": "Baker",
    "Surname": "Salom\u00e9",
    "schoolId": "046043",
    "schoolName": "Z LAFAGE",
    "commune": "CAHORS"
  }, {
    "id": 1724,
    "Firstname": "Berry",
    "Surname": "Marl\u00e8ne",
    "schoolId": "046044",
    "schoolName": "J CALVET",
    "commune": "CAHORS"
  }]
};

var $table = $('.js-table');
$table.find('.js-view-parents').on('click', function(e) {
  e.preventDefault();
  if (!$(this).closest('tr').next('tr').hasClass('expand-child')) {

    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open');

    $(".expand-child").slideUp();
    var $this = $(this).closest('tr');
    var rowId = $(this).data('id');

    var newRow = '' + '' +
      '' +
      '' +
      '' +
      '' +
      '' +
      '' +
      '' +
      '' +
      '' +
      '';

    $.ajax({
      url: '/echo/json/',
      dataType: "json",
      data: parentsData,
      success: function(parentsData) {
        if (parentsData.parents) {
          var parents = parentsData.parents;
          $.each(parents, function(i, parent) {
            newRow = newRow + '' +
              '' +
              '' +
              '' +
              '' +
              '';
          });
          newRow = newRow + 'Surname FirstName School Id School name
' + parent.Firstname + ' ' + parent.Surname + ' ' + parent.schoolId + ' ' + parent.schoolName + ' ' + parent.commune +
              '';
        }
        $(newRow).insertAfter($this);
      }
    });
  } else {
    $(this).closest('tr').slideToggle();
    var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child');
    $detailRow.style.visibility.toggle('table-row collapse');
    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open');
  }
});







  
    
      
        Training
        Title
        Date
        End date
        Description
        nb of Applicants
        Actions
      
    
    
      Activités nautiques
      Activités nautiques - 16/10/2016
      16/oct./2016
      13/oct./2016
      Sequelae of viral hepatitis
      15
      
        
          
            
              
            
          

          
            
              
            
          
          
            
              
            
          
        
      
    
    
      Activités nautiques
       Activités nautiques - 24/10/2016
      24/oct./2016
      21/oct./2016
      Severe pre-eclampsia, third trimester
      0
      
        
          
            
              
            
          

          
            
              
            
          
          
            
              
            
          
        
      
    
    
      Activités nautiques
      Activités nautiques - 29/10/2016
      29/oct./2016
      26/oct./2016
      Other secondary chronic gout
      0

Mikey · Accepted Answer

The main problem is that you attached the ID for collapsing on the wrong element. It should be attached to the tr.expand-child element and not the .expand-child td element.

I would build the .expand-child row in its entirety only once you have an AJAX response.

And it's a good habit to cache elements that you will be re-using.

Here's how I would revise your code:

var $table = $('.js-table');

$table.find('.js-view-parents').on('click', function(e) {
    e.preventDefault();
    // cache elements
    var $btn = $(e.target), $row = $btn.closest('tr'),
        // find next immediate .expand-child
        $nextRow = $row.next('tr.expand-child'); 
    // toggle button
    $btn.toggleClass('glyphicon-eye-close glyphicon-eye-open');
    // if .expand-child row exist already, toggle
    if ($nextRow.length) {
        // show or hide .expand-child row if eye button is open or not, respectively
        $nextRow.toggle($btn.hasClass('glyphicon-eye-open'));
    // if not, create .expand-child row
    } else {
        $.ajax({
            url: '/echo/json/',
            dataType: "json",
            data: parentsData,
            success: function (parentsData) {
                var newRow = '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '' +
                    '';
                if (parentsData.parents) {
                    $.each(parentsData.parents, function(i, parent) {
                        newRow += '' +
                        '' +
                        '' +
                        '' +
                        '' +
                        '';
                    });
                }
                newRow += 'Surname FirstName School Id School name
' + parent.Firstname + ' ' + parent.Surname + ' ' + parent.schoolId + ' ' + parent.schoolName + ' ' + parent.commune + '';
                $row.after(newRow);
            }
        });
    }
});

Demo

For demo purposes, I have commented out the AJAX call.

Bootstrap table row detail - ajax data

Answers (2)

Related Questions