通过ajax重新加载后,没有数据

时间:2018-09-10 18:46:40

标签: ajax laravel twitter-bootstrap modal-dialog

我目前正在学习ajax,但遇到了一些问题。每当我重新加载页面时,我都会越过模态的数据属性,而不再获得更多数据。我是否将数据错误地提供给模态?还是我需要重新加载其他内容?

第二个问题是,模态或输入字段中的数据会显示给我,但是当我将它们传递给控制器​​并保存时,没有可用数据。

查看

@foreach ($todolistprivate as $list)
                <div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
                    <div class="panel-heading panel-pointer">
                            <span class="elipsis"><!-- panel title -->
                                <strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
                            </span>
                        <ul class="options pull-right relative list-unstyled hover-visible">
                            <li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
                                    <i class="fa fa-plus"></i> Erstellen
                                </a>
                            </li>
                            <li><a data-toggle="modal" data-target=".todolist-update-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
                                    <i class="fa fa-edit"></i> Bearbeiten
                                </a>
                            </li>
                            <li><a data-toggle="modal" data-target=".todolist-destroy-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
                                    <i class="fa fa-times"></i> Löschen
                                </a>
                            </li>
                            <li><a href="#" class="opt panel_colapse" data-placement="bottom"></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="slimscroll min-height-30 max-height-100">
                            {{ $list->description }}
                        </div>
                    </div>
                </div>
            @endforeach

模式

<div class="modal fade todolist-update-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <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">Bearbeite diese Liste</h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" name="id" id="id" value="">
                    <div class="form-group">
                        <label for="" class="control-label">Titelname</label>
                        <div class="fancy-form">
                            <i class="fa fa-header"></i>
                            <input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label">Beschreibung</label>
                        <div class="fancy-form">
                            <textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>

                            <i class="fa fa-comments"><!-- icon --></i>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="control-label">Privatsphäre</label>
                        <div class="fancy-form fancy-form-select">
                            <select id="privacy" name="privacy" class="form-control">
                                <option value="0">Öffentlich</option>
                                <option value="1">Privat</option>
                            </select>
                            <i class="fancy-arrow"></i>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="update-todo-list">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

功能:

$('.todolist-update-modal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var title = button.data('title');
                var description = button.data('description');
                var id = button.data('id');
                var modal = $(this);
                modal.find('.modal-body input').val(title);
                modal.find('.modal-body textarea').val(description);
                modal.find('.modal-body #id').val(id);
            });

            $(document).on('click','#update-todo-list', function(e) {
                e.preventDefault();

                var _token = $("input[name='_token']").val();
                var title = $("input[name='title']").val();
                var description = $("textarea[name='description']").val();
                var privacy = $("select[name='privacy']").val();
                var id = $("input[name='id']").val();
                $.ajax({
                    url:'/admin/tasks/update/'+id,
                    type: 'Put',
                    data: {_token:_token, title:title, description:description, privacy:privacy, id:id, _method:'put'},
                    dataType: 'json',
                    success: function (data) {
                        if (data.error) {
                            _toastr((data.error),"top-full-width","error",false);
                            console.log(data);
                        }
                        else{
                            $('.todolist-update-modal').modal('hide');
                            $("#wrapper").load(location.href+" #wrapper>*","");
                            _toastr((data),"top-full-width","success",false);
                            console.log(data);
                        }
                    }

                });
            });

0 个答案:

没有答案