How do I apply slideDown () along with load ()

Navigation
1

I have a page where it displays dynamic contents using load() . How do I apply the slideDown() effect when document is displayed on the page?

My code looks like this:

index.php 

<div class="col-md-3">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Documentos
        </div>
        <div class="panel-body">
            <div class="list-group">
                <a href="#" class="list-group-item" data-page="2" title="Todos">Todos</a>
                <a href="#" class="list-group-item" id="nread" data-page="0" title="Não lidos">Não lidos<span class="badge"><?php echo $new_doc ?></span></a>
                <a href="#" class="list-group-item" data-page="1" title="Lidos">Lidos</a>
            </div>
        </div>
    </div>
</div>        
    <div class="col-md-9">
       <div class="panel panel-primary">
         <div class="panel-heading">
            <span id="page-title">Todos</span>
         </div>
       <div class="panel-body">
          <table class="table table-bordered">
             <thead>
                <tr>
                   <th>Enviado em</th>
                   <th>Documento</th>
                   <th>Vencimento</th>
                   <th></th>
                </tr>
             </thead>
            <tbody>
            </tbody>
          </table>
       </div>
    </div>
 </div>

ShowFiles.js 

$('.list-group a').click(function() {
     $('tbody').load('view/read.php', function() {
            $(this).slideDown();
       });
       $('.list-group-item').removeClass('active');
       $(this).addClass('active');
       $('#page-title').html(title_page);
}

read.php 

<tr>
    <td class="1">03/09/2014 14:32:55</td>
    <td>Nome do documento</td>
    <td>10/09/2014</td>
    <td>
        <?php echo "<a href='view/showFile.php?token=" . $token . "&reg=" . $result['reg'] . "' title='Vizualizar' target='_blank' class='btn btn-default view' data-toggle='tooltip' data-placement='top'><span class='glyphicon glyphicon-open'></span></a>" ?>
        <span><?php echo "<a href='action/downloadFile.php?token=" . $token . "&reg=" . $result['reg'] . "' title='Download' class='btn btn-default download' data-toggle='tooltip' data-placement='top'><span class='glyphicon glyphicon-download-alt'></span></a>" ?></span>
    </td>
</tr>
    
asked by anonymous 19.09.2014 / 00:17

1 answer

1

You must use callback of .load() .

Example: 

$('tbody').load('view/read.php', function() {
  $(this).slideDown()
});

Callback is a function that is called by the jQuery method itself. In this way the element receives the new content and only then does the slideDown.

Within this function, the code will be run once per element that is in the selector before .load() , or $('tbody') , and this will be assigned to that element (s).

    
19.09.2014 / 00:47
How to add a repeat loop (for) when needed Adapt jComboBox Code with AutoComplete