CODEWITHSUNDEEP
javascriptphpjquerybootstrap-modal
secdave
secdave

Reputation: 89

Passing data to Bootstrap 4 Modal

I'm using a PHP script to read data from a database and create an image gallery based on the results using Bootstrap Cards. Now I would like to have the possibility to delete data from the gallery. I finally found a way to do this -

PHP code:

[...]
echo "<div class='col-sm-4'>";
echo "<div class='card-deck'>";
echo "<div class='card' id='id_".$uploads[$i]['id']."'>";
echo "<img class='card-img-top' src='".$imagePath.$uploads[$i]['md5']."_tn.jpg' alt='Card image cap'>";
echo "<div class='card-img-overlay'><a class='close' href='#'>×</a></div>";
echo "<div class='card-body'>";
[...]

Javascript:

$(document).ready(function(){
    $('.close').click(function(){
        var target = $(this).parent().parent().attr('id');
        $.ajax({url:'delete.php?id=' + target.replace('id_', '')});
        location.reload();
    });
});

This works perfectly fine, but I would like to include a Bootstrap Modal before actually deleting the picture from the gallery.

HTML modal code:

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Delete picture</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">Do you really want to delete this picture?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="deletePic" class="btn btn-danger">Delete Picture</button>
      </div>
    </div>
  </div>
</div>

PHP code:

[...]
echo "<div class='col-sm-4'>";
echo "<div class='card-deck'>";
echo "<div class='card' id='id_".$uploads[$i]['id']."'>";
echo "<img class='card-img-top' src='".$imagePath.$uploads[$i]['md5']."_tn.jpg' alt='Card image cap'>";
echo "<div class='card-img-overlay'><a class='close' data-toggle='modal' data-target='#deleteModal' href='#'>×</a></div>";
echo "<div class='card-body'>";
[...]

Since the modal is now an additional step between the click on the X button and the actual delete my Javascript will not work anymore. Could someone please let me know how I can hand over the picture ID to the modal and in the next step delete the picture?

Thanks!

Upvotes: 1

Views: 2853

Answers (1)

Ali
Ali

Reputation: 1383

Simply you can do this:

$('a.close').click(function(){
    var target = $(this).parent().parent().attr('id');
    var pictureId = target.replace('id_', '');

    $("#deletePic").data('picture-id', pictureId);

    $("#deleteModal").modal("show");
});

Above code, we changed something. Firstly we removed ajax request. After that, we assigned picture id to delete button in the modal. After that, we opened the #deleteModal

Now, we know #deletePic has picture's ID number.

If we want to delete picture when clicked #deletePic button, we should use this:

$("#deletePic").on("click", function() {
    var pictureId = $(this).data('picture-id');

    $.ajax({url:'delete.php?id=' + pictureId});
});

And you shouldn't miss that, there are two .close class.

Firstly anchor has .close class that you want to use it. Also, bootstrap's modal contains .close class. So you should work ELEMENT.CLASSNAME if there are different elements has the same class.

I hope this will work for you.

Upvotes: 1

Related Questions