Home » Php » Refresh a modal after deleting a record

Refresh a modal after deleting a record

Posted by: admin September 25, 2018 Leave a comment

Questions:

I have a bootstrap modal that loads a list of documents previously loaded by the user. Next to each record appears the icon of a trash (into file Dynamic content) that indicates the cancellation of the document. Everything works but you can see the list of updated records only after manually closing the modal and reopening.
I would like that when the user clicks on the trash the modal is updated dynamically.

Modal code:

$(document).ready(function() {

  $(document).on('click', '#getDocumenti', function(e) {

    e.preventDefault();

    var uid = $(this).data('id'); //ottenere l'id della riga cliccata

    $('#content-dynamic').html(''); //lascia questo div vuoto
    $('#loader-modal').show(); //carica Ajax sul pulsante clic

    $.ajax({
        url: 'temp/amministratore/getdocumenti.php',
        type: 'POST',
        data: 'id=' + uid,
        dataType: 'html'
      })
      .done(function(data) {
        console.log(data);
        $('#content-dynamic').html(''); //vuoto prima del carico
        $('#content-dynamic').html(data); //caricare qui
        $('#loader-modal').hide(); //nascondi caricatore  
      })
      .fail(function() {
        $('#content-dynamic').html('<i class="glyphicon glyphicon-info-sign"></i> Qualcosa è andato storto, prova ancora...');
        $('#loader-modal').hide();
      });

  });
});
<div class="modal fade" id="modalDocumenti" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">


    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Ducumenti caricati</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>

      <div class="modal-body">
        <div id="loader-modal" style="display: none; text-align: center;">
          <!-- ajax loader -->
        </div>
        <!-- mysql data will be load here -->
        <div id="content-dynamic"></div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
      </div>

    </div>
  </div>
</div>

Dynamic content:

    <?php
    require_once '../../core/function.php';


if (isset($_REQUEST['id'])) {

    $id = intval($_REQUEST['id']);
    $query = "SELECT * FROM upload_contratti WHERE contratti_id = $id";
    $risultato = $conn->query($query);


?>

    <div class="table-responsive">
        <table id="record">
            <tbody>
                <?php  
                while ($riga_doc = $risultato->fetch_assoc()) {
                ?>

                    <tr>
                        <td style="width: 95%; padding-top:15px;">
                            <p><a href="././uploads/<?php echo $riga_doc["file"]; ?>" title="Scarica documento" alt="Scarica documento" download><?php echo $riga_doc["file"]; ?></a></p>
                        </td>
                        <td style="width: 20%;">
                            <a onclick="return confirm('Sei sicuro di volere eliminare questo elemento?');" id="deleteFile" data-id="<?php echo $riga_doc["id"]; ?>" title="Cancella"><i class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>


                <?php  
                }
                ?>
            </tbody>
        </table>
    </div>

<?php    
}
?>

Thanks for your help

Answers: