Home / Questions / 373966
Accepted
DAD
Asked: 2020-07-17 01:07:33 +0800 CST 2020-07-17 01:07:33 +0800 CST

How can I avoid repeating multiple modal used for editing with Laravel 5.8?

  • 772

The problem I have is that I use a modalto edit the projects, so when I have more than 2 (projects), when I inspect the code I realize that the modal is repeated for each project, which I would like to avoid and only show the one I am going to to edit.

that is, to have only 1 modaland that when I click the button to open it, modalI get the values ​​of that project so that it is not generated several times.

That's possible?

projects(BLADE):

@foreach ($proyectos as $proyecto)
  <div class="card">
    <!-- NOMBRE PROYECTO -->
    <div class="card-header">
        <div>{{$proyecto->proy_nombre}}</div>
        <!-- Editar -->
        <div >
             <a data-toggle="modal" data-target="#EditarProyecto{{$proyecto->proy_id}}" href=""><i class="fa fa-pen"></i></a>
        </div>
    </div>
    <!-- DESCRIPCION PROYECTO -->
    <div class="card-body">{{$proyecto->proy_descripcion}}</div>
</div>
@include('modal.modal_editar_proyecto')
@endforeach

modal_edit_project (BLADE) :

<div class="modal fade" id="EditarProyecto{{$proyecto->proy_id }}" role="dialog" aria-labelledby="EditarPryectoModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          {{$proyecto->proy_nombre}}
        </div>
    </div>
 </div>
laravel

1 Answers

  1. Best Answer

    I would create my Modal outside of the loop, so that it would be armed only once, then I would pass the data to the dat-* variables, for example, data-target, it would only be EditProject, then another that would be data-idproject, and that would be taken with javascript, it would be something like this;

    @foreach ($proyectos as $proyecto)
  <div class="card">
    <!-- NOMBRE PROYECTO -->
    <div class="card-header">
        <div>{{$proyecto->proy_nombre}}</div>
        <!-- Editar -->
        <div >
             <a data-toggle="modal" data-target="#EditarProyecto" data-idproyecto="{{$proyecto->proy_id}}" data-nombre="{{$proyecto->proy_nombre}}" href=""><i class="fa fa-pen"></i></a>
        </div>
    </div>
    <!-- DESCRIPCION PROYECTO -->
    <div class="card-body">{{$proyecto->proy_descripcion}}</div>
</div>
@endforeach
@include('modal.modal_editar_proyecto')

    Then the Modal;

    <div class="modal fade" id="EditarProyecto" role="dialog" aria-labelledby="EditarPryectoModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="nom-proyecto">
                Nombre del proyecto
            </div>
            <div class="id-proyecto">
                ID del proyecto
            </div>
        </div>
    </div>
 </div>

    And lastly, I handle it with Javascript;

    $('#EditarProyecto').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var nombre = button.data('nombre');
        var idproyecto = button.data('idproyecto');
        var modal = $(this);
        
        modal.find('.nom-proyecto').text( nombre );
        modal.find('.id-proyecto').text('Modificar permiso ' + idproyecto );
        
    });

    Perhaps there are more optimal or elegant ways to do it, but I would do it this way.

    • 1