показ данных в модальном режиме в laravel - PullRequest
Новая
       8

показ данных в модальном режиме в laravel

0 голосов
/ 30 апреля 2018

Я использую 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

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Определите модальное всплывающее окно для каждой записи, если вы в цикле, если вы не хотите использовать 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

Посмотрите, работает ли это для вас.

0 голосов
/ 30 апреля 2018

Вызов модального через 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');

});
...