0 votes

Modal in Laravel using data of a record

I have a page that loads data introducir la descripción de la imagen aquí

the code of the buttons is the following:

<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 triggering the modal that is displayed as well:

introducir la descripción de la imagen aquí

The code that loads the modal is the following:

{{-- 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 what button press of all the data displayed, it always shows me the data of the last record that is displayed on the page. How can I solve this problem ? Can someone give me a hand ? From already thank you very much

1voto

Peter Points 6

I would do it the following way: put a class to the button to expand, and then with jquery to set the values 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 you serve. Greetings.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X