在laravel中以模态显示数据

Question

我正在使用Laravel，并且试图删除或更新平台上的服务，因此我正在使用确认模式..但是，当我删除或更新或显示模式中的内容时，它始终仅在第一行起作用...

那就是代码

@foreach ($services as $service)
    <div class="card-content">
        <div class="row">
            <div class="col l4">

                <div class="row">
                    <div class="col s12">
                        <span>
                            <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable" 
                               data-position="left" 
                               data-tooltip="Supprimer ce service"
                               data-text-color="grey-text"
                               href="#modal1">
                                <i class="material-icons">delete</i>
                            </a>
                        </span>

                        <span>  
                            <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green" 
                               data-position="right" 
                               data-tooltip="Modifier ce service" 
                               data-delay="20" 
                               href="#modal2">
                                <i class="material-icons" href="#modal2">update</i>
                            </a>
                        </span>
                    </div>
                </div>

                <div id="modal1" class="modal">
                    <div class="modal-content">
                        <div class="row">
                            <div class="col s6">
                                <p>Voulez vous vraiment supprimer ce service ?</p> 
                            </div>

                            <div class="col s6">
                                <form action="/Services/{{$service->id}}" method="POST">
                                    {{ csrf_field() }}
                                    @method('DELETE')

                                    <span>   
                                        <input type="submit" class="btn purple hoverable waves effect" value="supprimer">
                                    </span>

                                    <span>    
                                        <a href="#" class="btn red hoverable waves effect modal-action modal-close" id="non"> Non</a>
                                    </span>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endforeach

Answer 1

通过jquery调用模态

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

环形锚

    <span>  
                                <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green modalclick" 
                                   data-position="right" 
                                   data-tooltip="Modifier ce service" 
                                   data-delay="20" 
                                   data-id="<?php echo $service->id; ?>"
                                   href="javascript:void(0)"

>
                                    <i class="material-icons" href="#modal2>update</i>
                                </a>
                            </span>



$(".modalclick").click(function(){
   var current_id = $(this).attr("data-id");

   //use jquery below to change modal form action with id
$('#myModal').modal('show');

});

Answer 2

如果不想使用获取和服务ID并传递给模式形式的jquery，则在循环中为每个记录定义模式弹出窗口。

<?php $a = 1; ?>
@foreach ($services as $service)
    <div class="card-content">
        <div class="row">
            <div class="col l4">

                <div class="row">
                    <div class="col s12">
                         <span>  <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable" data-position="left" data-tooltip="Supprimer ce service" data-text-color="grey-text" href="#modal{{$a}}"><i class="material-icons">delete</i></a></span>
                         <span>  <a  class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green" data-position="right" data-tooltip="Modifier ce service"  data-delay="20" href="#modal2"><i class="material-icons" href="#modal2">update</i></a></span>
                    </div>
                </div>
                <div id="modal{{$a}}" class="modal">
                    <div class="modal-content">
                        <div class="row">
                            <div class="col s6">
                                <p>Voulez vous vraiment supprimer ce service ?</p> 
                            </div>

                            <div class="col s6">
                                <form action="/Services/{{$service->id}}" method="POST">
                                    {{ csrf_field() }}
                                    @method('DELETE')
                                    <span>
                                        <input type="submit" class="btn purple hoverable waves effect" value="supprimer">
                                    </span>
                                    <span>
                                        <a href="#" class="btn red hoverable waves effect modal-action modal-close" id="non"> Non</a>
                                    </span>
                                </form>
                            </div>
                        </div>
                    </div>
               </div>
           </div>
       </div>
    </div>
    <?php $a++; ?>
@endforeach

看看是否适合您。