1

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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
M.Max
  • 11
  • 4
  • you could use an ajax load - to load and replace the section of your page you want to update. load gets HTML, and if you have a div with an id as a place hold you can target it easier. the loaded HTML will also need same id - as the original div can be replace – developer May 23 '18 at 17:14
  • Possible Duplicate of https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – mplungjan May 23 '18 at 17:15

0 Answers0