CODEWITHSUNDEEP
phphtmllaraveldatatablebootstrap-modal
RandomUser
RandomUser

Reputation: 137

Boostrap modal integration in laravel table

I have a laravel datatable the following:

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>

This is the table:

<td><button 
   type="button" 
   class="btn btn-primary btn-lg" 
   data-toggle="modal" 
   data-target="#favoritesModal">
  Add to Favorites
</button></td>

and here I have created the modal:

<div class="modal fade" id="favoritesModal" 
     tabindex="-1" role="dialog" 
     aria-labelledby="favoritesModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" 
          data-dismiss="modal" 
          aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" 
        id="favoritesModalLabel">The Sun Also Rises</h4>
      </div>
      <div class="modal-body">
        <p>
        Please confirm you would like to add 
        <b><span id="fav-title">The Sun Also Rises</span></b> 
        to your favorites list.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" 
           class="btn btn-default" 
           data-dismiss="modal">Close</button>
        <span class="pull-right">
          <button type="button" class="btn btn-primary">
            Add to Favorites
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

Can anyone please help me how do I implement this modal in a datatable row? Basically I want everytime the user clicks a button show Image to open a modal with the image inside Thanks in advance

Upvotes: 0

Views: 1369

Answers (1)

Watercayman
Watercayman

Reputation: 8178

Probably easiest if you add a unique class (say... 'imageButton') as well as a data-image-id to the button to identify which image you want. If you want individual title, you may wish to add a data-img-title on the same button.

So - sort of like this:

<td><button 
   type="button" 
   class="btn btn-primary btn-lg imageButton" 
   data-toggle="modal" 
   data-img-title ="{{$looped->title}}"
   data-img-id = "{{$looped->id}}"
   data-target="#favoritesModal">
   Add to Favorites
</button></td>

Then, some jquery AJAX to get the image data from your controller and then place that HTML inside the modal. Something like this:

 $('.imageButton').on('click', function () {
        var imgTitle = $(this).data('img-title');
        var imgId = $(this).data('img-id');
        $.ajax({
            url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
            type: "GET",
            success: function (h) {
                $(".modal-title").text(imgTitle);
                $(".modal-body").html(h);
                $('#modal').modal();
            },
            error: function () {
                swal("Error", "Unable to bring up the creation dialog.", "error");
            }
        })
    });

Depending on what you are sending through that would work. You can also chose to create an image tag, and send through the new src instead of photo data something like this if you want to show thumbnails as well:

<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
              class="picToModal">

Then replace the src within the $("#modalImage") element with your new source and trigger. There are lots of options and branches, and you'll need to re-work to suit, but this should get you started.

Upvotes: 1

Related Questions