Bootstrap & Jquery Modal Window – Actualizar contenido

publicado por: Anonymous

estoy creando una sitio web en el cual al clicar en un botón se abre una ventana Modal donde muestra una serie de imágenes.

introducir la descripción de la imagen aquí

En cada una de esas imágenes hay los botones descargar y borrar.

Al hacer clic en borrar no sé como hacer desaparecer esa imagen, es decir que recargue el contenido del modal.

El código jquery:

    $('.btn-image-library').click(function() {

        var cod = $('#editCodi').val();
        var src = $( this ).closest('.box-image-library').find('.image-library').attr('src');
        var action = $( this ).text();
        var filename = $( this ).closest('.box-image-library').find('.text-descripcio-image-library').text();

        if (action == 'delete'){

            // Delete image
            $.ajax({
                url:"deleteImagesManageProduct.php",
                type:"POST",
                data:{"filename": filename, "codigo": cod},
                dataType:"text",
                success:function(data){
                    // AQUÍ ACTUALIZAR CONTENIDO MODAL ¿?
                }
            });

        }
    });

El código HTML de la ventana Modal:

    <!-- MANAGE IMAGES MODAL MENU -->

    <div class="modal fade" id="manageImagesProduct" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true">

      <div class="modal-dialog modal-lg">

           <div class="modal-content">

                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                    <h4 class="modal-title custom_align" id="Heading">Gestió Imatges</h3>
                  </div>

                  <div class="modal-body">
                      <div class="">
                          <?php
                          //  Load Images
                          $query = "SELECT t1.num, t1.imagen
                                    FROM imatges AS t1
                                    WHERE t1.codigo = '{$_GET['cod']}'
                                    ORDER BY t1.num";

                          $result = dbQuery($conn, $query);

                          while ($row = pg_fetch_row($result)){
                              ?>
                              <div class="box-image-library">

                                  <img class="image-library" src='<?php echo $row[1];?>' id='fileImage'/>

                                  <div class="btn-image-library-delete">
                                      <button class='btn-image-library' id='deleteImage'><i class="material-icons" style="font-size: 20px">delete</i></button>
                                      <button class='btn-image-library' id='downloadImage'><i class="material-icons" style="font-size: 20px">file_download</i></button>
                                  </div>

                                  <div class="box-text-image-library">
                                      <span class="text-descripcio-image-library"><?php echo $row[1]; ?></span>
                                  </div>

                              </div>
                              <?php
                          }
                          ?>
                      </div>
                  </div>

                  <div class="modal-footer " >
                      <div class="pull-right">
                          <input type="submit" class="btn btn-gral btn-tool-footer-medium btn-icon" id='btnManageImagesAdd' value="Afegir">
                          <input type="submit" class="btn btn-gral btn-tool-footer-medium btn-icon" id='btnManageImagesSelect' value="Seleccionar">
                          <input type="submit" class="btn btn-gral btn-tool-footer-medium btn-icon" id='btnManageImagesFinalitzar' style="background-color: #73CBB0; color:black;" value="Finalitzar">
                      </div>
                  </div>
          </div>
      </div>
    </div>

Os agradecería cualquier tipo de ayuda en este sentido.

Muchas Gracias!

solución

Una opción es que cargues las imágenes con un id (supongo que es en num). El los botones de borrar y de descargar pones data-idImagen y le asignas el mismo valor que el id de la imagen. Ya tienes una forma de relacionarlos. Ahora, en el código de javascript, recuperas el data-id y lo pones en la variable idImagen. Y en el success de ajax pones el selector por id y la asignas el método .remove().

Tienes el código a continuación:

Javascript

  $('.btn-image-library').click(function () {
        var idImagen = $(this).data().idImagen
        var cod = $('#editCodi').val();
        var src = $(this).closest('.box-image-library').find('.image-library').attr('src');
        var action = $(this).text();
        var filename = $(this).closest('.box-image-library').find('.text-descripcio-image-library').text();
        if (action == 'delete') {

            // Delete image
            $.ajax({
                url: "deleteImagesManageProduct.php",
                type: "POST",
                data: {"filename": filename, "codigo": cod},
                dataType: "text",
                success: function (data) {
                    $("#" + idImagen).remove()
                    // AQUÍ ACTUALIZAR CONTENIDO MODAL ¿?
                }
            });
        }
    });

HTML

<!-- MANAGE IMAGES MODAL MENU -->

    <div class="modal fade" id="manageImagesProduct" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align" id="Heading">Gestió Imatges</h3>
            </div>
            <div class="modal-body">
                <div class="">
                    <?php
                    //  Load Images
                    $query = "SELECT t1.num, t1.imagen
                                    FROM imatges AS t1
                                    WHERE t1.codigo = '{$_GET['cod']}'
                                    ORDER BY t1.num";

                    $result = dbQuery($conn, $query);

                    while ($row = pg_fetch_row($result)){
                    ?>
                    <div class="box-image-library">

                        <img class="image-library" src='<?php echo $row[1];?>' id='<?php echo $row['num'];?>'/>

                        <div class="btn-image-library-delete">
                            <button class='btn-image-library' id='deleteImage' data-idImagen='<?php echo $row['num'];?>'><i class="material-icons" style="font-size: 20px">delete</i>
                            </button>
                            <button class='btn-image-library' id='downloadImage' data-idImagen='<?php echo $row['num'];?>'><i class="material-icons" style="font-size: 20px">file_download</i>
                            </button>
                        </div>
                        <div class="box-text-image-library">
                            <span class="text-descripcio-image-library"><?php echo $row[1]; ?></span>
                        </div>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.