dataTable и редактирование не работает на блейде - PullRequest
Новая
       9

dataTable и редактирование не работает на блейде

0 голосов
/ 15 января 2019

У меня есть проект Laravel, где я использую плагин dataTable для рендеринга коллекции элементов. 

    $('#paths').DataTable();

Поэтому я пишу некоторый сценарий, позволяющий пользователю редактировать свои записи, с модальным включением на той же странице: 

     $(document).ready(function(e) {
                $(function() {
                $('.editPathButton').on("click", function () {

                    id=$(this).parent().siblings('#path_id').html();
                    nome=$(this).parent().siblings('#path_nome').html();
                    degreeCourses_id=$(this).parent().siblings('#path_degreeCourse_id').val();

                    console.log(id+nome+degreeCourses_id);

                    $('#pathId_edit').val(id);
                    $("#nome_edit").html(nome);
                    $('#degreeCourses_id_edit').val(degreeCourses_id);
                });

});

Все работает хорошо (даже только console.log) с первой «страницей» таблицы, но если я решу увидеть больше, чем «стандартную» строку, или я переключу страницу (таблицы) для редактирования скрипт перестает работать, но все еще находится на той же HTML-странице, а id и класс идентичны для каждой записи таблицы! И сценарий все еще на DOM

вид:

часть таблицы 

 <table id="paths" class="table table-responsive table-hover text-center">
                        <thead>
                        <tr class="intestazione">
                            <td>Id</td>
                            <td>Nome</td>
                            <td>Corso di Laurea</td>
                            <td>Edit</td>
                            <td>Delete</td>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($paths as $path)
                                <tr>
                                    <td id="path_id">{{$path->id}}</td>
                                    <td id="path_nome">{{$path->nome}}</td>
                                    <td id="path_degreeCourse">{{$path->degreeCourse->nome}}</td>
                <input type="hidden" id="path_degreeCourse_id" value="{{$path->degreeCourse->id}}">


                                    <td>
                                      <button id="edit_path" class="btn btn-warning editPathButton"
                                                    data-toggle="modal"
                                                    data-target="#editPathModal">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                        </td>

                                </tr>
                        @endforeach
                        </tbody>
</table>

модал: 

<div class="modal fade" id="editPathModal"
         tabindex="-1" role="dialog"
         aria-labelledby="favoritesModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"
                        id="editPathModalLabel">Modifica Indirizzo</h4>
                </div>
                <div class="modal-body">
                    {!! Form::open(['url' => 'admin/lauree', 'method' => 'put']) !!}
                    {{ Form::hidden('pathId_edit','', array('id' => 'pathId_edit')) }}
                    <div class="form-group col-md-12">
                        <div class="form-group col-md-6">
                            <label for="name">Nome</label>
                            {{ Form::text('nome_edit', '', array('class' => 'form-control','id'=>'nome_edit')) }}
                            @if($errors->edit_path->has('nome_edit'))
                                @foreach($errors->edit_path->get('nome_edit') as $msg)
                                    <span class="label label-danger error_mex">{{$msg}}</span>
                                @endforeach
                            @endif
                        </div>
                        <div class="form-group col-md-6">
                            <label for="degreeCourses_id">Corso di Laurea</label>
                            {{ Form::select('degreeCourses_id_edit', $degreeCourses, null, array('class' => 'form-control')) }}
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        <button type="submit" class="btn btn-success">Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    </div>
                    {!! Form::close() !!}
                </div>

1 Ответ

0 голосов
/ 15 января 2019

Я нашел, почему это, и как это решить!

Проблема в том, как визуализировать записи и как настроить прослушиватель "onclick".при первом рендеринге страницы отображаются N записей, а DOM содержит скрипт, который устанавливает слушателя для каждой записи / кнопки;

при переходе к N + 1 записи DOM такой же, ностраница не перезагружается, поэтому регистратор не устанавливается снова для этого и всего остального ...

Поэтому самое простое решение - переместить слушателя в кнопку и написать функцию для вызова, чтобы установить данные длямодал.

Значит кнопка будет: 

<button id="edit_path" 
        class="btn btn-warning editPathButton"
        data-toggle="modal"
        onclick="editPath(this)"
        data-target="#editPathModal">
        <i class="fa fa-edit"></i>
</button>

и функция: 

 function editPath(el) {
            id=$(el).parent().siblings('#path_id').html();
            nome=$(el).parent().siblings('#path_nome').html();
            degreeCourses_id=$(el).parent().siblings('#path_degreeCourse_id').val();

            console.log(id+nome+degreeCourses_id);



            $('#pathId_edit').val(id);
            $("#nome_edit").val(nome);
            $('#degreeCourses_id_edit').html(degreeCourses_id);     
        }
...