Home / Questions / 276975
Accepted
MNibor
Asked: 2020-07-06 05:03:09 +0800 CST 2020-07-06 05:03:09 +0800 CST

Modal in Laravel taking data from a record

  • 772

I have a page that loads dataenter image description here

The button code is as follows:

<div class="elements-list clearfix">
    {{-- Button to Open the Modal --}}
    <button type="button" class="pull-left margin-clear btn btn-sm btn-info btn-animated" data-toggle="modal" data-target="#myModal">
    Ampliar<i class="fa fa-eye"></i>
    </button>

    <a href="{{ $link->link }}" target="_blank" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated">Ir a la Página<i class="fa fa-link"></i></a>
</div>

with the button I fire the modal that is shown like this:

enter image description here

The code that loads the modal is as follows:

{{-- The Modal --}}
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        {{-- Modal Header --}}
        <div class="modal-header">
            <h4 class="modal-title">{{ $link->title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times; 
 </button>
        </div>

        {{-- Modal body --}}
        <div class="modal-body">
            {{ $link->description }}
        </div>

        {{-- Modal footer --}}
        <div class="modal-footer">
            <a href="{{ $link->link }}" class="btn btn-info">Ir a la Página</a>
            <a href="#" class="btn btn-danger" data-dismiss="modal">Cerrar</a>
        </div>
    </div>
   </div>
  </div>

The problem I have is that no matter which button I press out of all the data displayed, it always shows me the data from the last record displayed on the page. How can i fix this ? Can someone give me a hand ? From already thank you very much

php

1 Answers

  1. Best Answer

    I would do it in the following way: put a class to the expand button and then with jquery set the values ​​that you want to display in the modal:

         <button type="button" 
        class="pull-left margin-clear btn btn-sm btn-info btn-animated btnShowInfo" 
        data-toggle="modal" 
        data-title="titulo de ejemplo"
        data-description="my own description"
        data-link="https://es.stackoverflow.com/"
    >
        Ampliar<i class="fa fa-eye"></i>
        </button>

$(document).on('click', '.btnShowInfo', function(e){
    e.preventDefault();
    var button = $(this);
    var title = button.data('title');
    var description= button.data('description');
    var link = button.data('link');

    $('.modal-title').html(title);
    $('.modal-body').html(description);
    $('.btn-info').attr('href', link);

    $('#myModal').modal('show');
});

    I hope it helps you. Greetings.

    • 2