1

Es problema que tengo es que utilizo un modal para editar los proyectos, entonces cuando tengo mas de 2 (proyectos), al inspeccionar código me doy cuenta que se repite el modal para cada proyecto, lo cual quisiera evitar y que se muestre solo el que voy a editar.

osea tener solo 1 modal y que cuando de clic al botón para abrir el modal me obtenga los valores de ese proyecto para así no se genere varias veces.

eso es posible?

proyectos(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_editar_proyecto (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>

1 respuesta 1

1

Yo crearía mi Modal fuera del loop, para que se arme una sola vez, luego le pasaría los datos las variables dat-* por ejemplo, data-target, sería solamente EditarProyecto, luego otro que seria data-idproyecto, y eso lo tomaría con javascript, quedaría algo así;

@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')

Luego el 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>

Y por último, lo manejo con 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 );
        
    });

Quizás existan formas mas óptimas o elegantes de hacerlo, pero yo lo haría de esta forma.

3
  • no me funciona, solo me muestra el dato del ultimo elemento.
    – DAD
    Commented el 17 jul. 2020 a las 6:51
  • Podrías modificar tu ejemplo con los ultimos ajustes que realizaste, porque no hay forma que te muestre el ultimo elemento si conmi ejemplo lo cambias dinamicante con JS Commented el 17 jul. 2020 a las 13:00
  • Muchas gracias funciono y me olvide aprobar esta respuesta hace mucho.
    – DAD
    Commented el 16 abr. 2021 a las 19:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.