Question

我正在使用ajax添加和删除，但我无法更新。

我的路线档案 wep.php

Route::get('room-list', 'RoomController@list');
Route::resource('room', 'RoomController', [
        'except' => ['create']
    ]);
Route::get('api/room', 'RoomController@apiRoom')->name('api.room');

我的观看文件 room-list.blade.php

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{url('assets/images')}}/favicon.png">
    <title>Room Insert, Update, Delete</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{url('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{url('css/style.css')}}" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="{{url('css/colors/blue.css')}}" id="theme" rel="stylesheet">
     {{-- dataTables --}}

    <link href="{{ asset('assets/bootstrap/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">

</head>
<body class="fix-header card-no-border">

    <div id="main-wrapper">

        @include('theme.sidebar')

        <div class="page-wrapper">

            <div class="container-fluid">

<div class="col-12">
    <div class="row page-titles">
            <div class="col-md-10">
            </div>
        <div class="col-md-2">
            <button onclick="addForm()" type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-form"><i class="fa fa-plus"></i> Add New Room</button>
        </div>
    </div>
</div>
<div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Room List</h4>
                                <h6 class="card-subtitle"></h6>
                                <div class="table-responsive m-t-40">
@if (Session::has('success'))
    <div class="alert alert-success">
            <p>{!! Session::get('success') !!}</p>
    </div>
@endif
@if (Session::has('deleted'))
    <div class="alert alert-warm">
            <p>{!! Session::get('deleted') !!}</p>
    </div>
@endif
@if (Session::has('edit'))
    <div class="alert alert-edit">
            <p>{!! Session::get('edit') !!}</p>
    </div>
@endif
    <table id="room-table" class="table table-striped" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Room ID</th>
                <th>Hotel ID</th>
                <th>Room Name</th>
                <th>Bonus Sum</th>
                <th>Settings</th>
            </tr>
        </thead>

        <tbody>
            @foreach($rooms as $room)
            <tr>
                <td>{!! $room->room_id !!}</td>
                <td>{!! $room->hotel_id !!}</td>
                <td>{!! $room->room_name !!}</td>
                <td>{!! $room->bonus_sum !!}</td>
                <td></td>
            </tr>

           @endforeach
        </tbody>
    </table>

            </div>
        </div>
    </div>
</div>

 @include('room.room-form')
            </div>

            <footer class="footer">
                © 2017 
            </footer>

        </div>

    </div>



    <!-- Bootstrap tether Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


    <script src="{{ asset ('assets/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset ('assets/plugins/bootstrap/js/popper.min.js') }}"></script>
    <script src="{{ asset ('assets/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset ('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="{{ url ('js/jquery.slimscroll.js') }}"></script>
    <!--Menu sidebar -->
    <script src="{{ url ('js/sidebarmenu.js')}}"></script>
    <!--stickey kit -->
    <script src="{{ url ('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js') }}"></script>
    <script src="{{ url ('assets/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
    <!-- Custom JavaScript -->
    <script src="{{ url ('js/custom.min.js') }}"></script>
    {{-- dataTables --}}
    <script src="{{ asset ('assets/dataTables/js/jquery.dataTables.min.js') }}"></script>



--}}
<script type="text/javascript">


    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

      var table = $('#room-table').DataTable({
                      processing: true,
                      serverSide: true,
                      ajax: "{{ route('api.room') }}",
                      columns: [
                        {data: 'room_id', name: 'room_id'},
                        {data: 'hotel_id', name: 'hotel_id'},
                        {data: 'room_name', name: 'room_name'},
                        {data: 'bonus_sum', name: 'bonus_sum'},
                        {data: 'action', name: 'action', orderable: false, searchable: false}
                      ]
                    });
      function addForm() {
        save_method = "add";
        $('input[name=_method]').val('POST');
        $('#modal-form').modal('show');
        $('#modal-form form')[0].reset();
        $('.modal-title').text('Add Room');
      }

function editForm(id) {
        save_method = 'edit';
        $('input[name=_method]').val('PATCH');
        $('#modal-form form')[0].reset();
        $.ajax({
          url: "{{ url('room') }}" + '/' + id + "/edit",
          type: "GET",
          dataType: "JSON",
          success: function(data) {
            $('#modal-form').modal('show');
            $('.modal-title').text('Edit Contact');
            $('#room_id').val(data.room_id);
            $('#hotel_id').val(data.hotel_id);
            $('#room_name').val(data.room_name);
            $('#bonus_sum').val(data.bonus_sum);
          },
          error : function() {
              alert("Nothing Data");
          }
        });
      }

      function deleteData(id){
            var popup = confirm("Are you sure for delete this data ?");
            var csrf_token = $('meta[name="csrf-token"]').attr('content');
            if (popup == true ){
                $.ajax({
                    url : "{{ url('room') }}" + '/' + id,
                    type : "POST",
                    data : {'_method' : 'DELETE', '_token' : csrf_token},
                    success : function(data) {
                        table.ajax.reload();
                    },
                    error : function () {
                        alert("Oops! Something Wrong!");
                    }
                })
            }
        }
      $(function(){
            $('#modal-form form').validator().on('submit', function (e) {
                if (!e.isDefaultPrevented()){
                    var id = $('#id').val();
                    if (save_method == 'add') url = "{{ url('room') }}";
                    else url = "{{ url('room') . '/' }}" + id;

                    $.ajax({
                        url : url,
                        type : "POST",
                        data : $('#modal-form form').serialize(),
                        success : function($data) {
                            $('#modal-form').modal('hide');
                            table.ajax.reload();
                        },
                        error : function(){
                            alert('Oops! Something Error!');
                        }
                    });
                    return false;
                }
            });
        });
    </script>
</body>
</html>

以下代码包含在room-list.blade.php文件中，其中包含表单文件的include函数

<div class="modal" id="modal-form" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" class="form-horizontal" data-toggle="validator" action="{{ route ('room.store') }}">
        {{ csrf_field() }} {{ method_field('POST') }}
        <input type="hidden" name="room_id" id="room_id">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"> &times; </span>
          </button>
          <h3 class="modal-title"></h3>
        </div>
        <div class="modal-body">

           <div class="form-group">
              <label class="control-label">Hotel</label>
              <select id="hotel_id" name="hotel_id" class="select2 form-control custom-select" style="width: 100%; height:36px;">
                    <option selected>Hotel Name...</option>

                </select>
          </div>
          <div class="form-group">
             <label for="message-text" class="control-label">Room Name</label>
             <input type="text" id="room_name" name="room_name" class="form-control">
          </div>
           <div class="form-group">
               <label for="message-text" class="control-label">Bonus Sum</label>
               <input type="text" id="bonus_sum" name="bonus_sum" class="form-control">
           </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button id="tamamla" type="submit" class="btn btn-primary btn-save">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

我的控制器文件RoomController.php

<?php
namespace App\Http\Controllers;

use App\Room;
use DataTables;
use DB;
use Illuminate\Http\Redirect;
use Illuminate\Http\Request;

class RoomController extends Controller {
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index() {

    }

    public function list() {
        $rooms = Room::all();
        return view('room.room-list', compact('rooms'));
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create() {

    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request) {
        $data = [
            'hotel_id'  => $request['hotel_id'],
            'room_name' => $request['room_name'],
            'bonus_sum' => $request['bonus_sum']
        ];
        Room::create($data);
        return redirect()->back()->with('success', 'Kayıt başarılı bir şekilde eklendi!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id) {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id) {
        $data = Room::find($id);
        return $data;
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id) {
        $room            = new \App\Room;
        $data            = $room->findOrFail($id);
        $data->hotel_id  = $request['hotel_id'];
        $data->room_name = $request['room_name'];
        $data->bonus_sum = $request['bonus_sum'];
        $data->update();
        return redirect()->back()->with('edit', 'Kayıt başarılı şekilde düzenlendi!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id) {
        $rooms = Room::find($id);
        $rooms->delete();
        return redirect()->back()->with('deleted', 'Kayıt başarılı şekilde silindi!');
    }

    public function apiRoom() {
        $rooms = Room::all();
        return Datatables::of($rooms)
            ->addColumn('action', function ($rooms) {
                return '<a onclick="editForm('.$rooms->room_id.')" data-toggle="tooltip" data-original-title="Edit"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>'.
                '<a onclick="deleteData('.$rooms->room_id.')" data-toggle="tooltip" data-original-title="Close"> <i class="fa fa-close text-danger"></i> </a>';

            })->make(true);

    }
}

我认为这个问题与ajax有关。

action="{{ route ('room.store') }}"

如果我删除表单中的操作标记，它就不起作用。如果它仍然是这样，则更新不起作用。

如何以一种形式无缝地运行更新和附加组件。

最好的问候

Answer 1

我认为问题在于你总是在控制器中重新创建列表，但是你并没有替换页面dom中的旧列表。

来自您的控制器：

public function list() {
    $rooms = Room::all();
    return view('room.room-list', compact('rooms'));
}

您获取整个列表并将其放在ajax调用的响应中。

我认为你必须从javascript端获得响应并在页面中替换它。如果你把整个＆＃39;房间列表＆＃39;在div内部，使用ajax响应用javascript替换此div的内容。

Answer 2

@Alviero感谢你的回答

新路线代码 web.php

Route::get('room-list', function () {
        return view('room.room-list');
    });
Route::resource('room', 'RoomController', [
        'except' => ['create']
    ]);
Route::get('api/room', 'RoomController@apiRoom')->name('api.room');

然后新视图文件 room-list.blade.php

<table id="room-table" class="table table-striped">
    <thead>
        <tr>
            <th width="30">Room ID</th>
            <th>Hotel ID</th>
            <th>Room Name</th>
            <th>Bonus Sum</th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

没有问题路线（api.room）正常工作。

但是我给出了同样的错误

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message

文件路径供应商/ symfony / routing / RouteCollection.php第255行

如果我添加表单操作标记 action =“{{route（'room.store'）}}”

有效。但这次更新不起作用，它也会出现同样的错误。

再次感谢你。

Answer 3

我解决了这个问题。 js文件不需要表单操作。

您可以通过此链接Validator.JS for Bootsrap 3

访问此JavaScript文件

表单代码

      <form method="POST" class="form-horizontal" data-toggle="validator">
        {{ csrf_field() }} {{ method_field('POST') }}

没有行动=＆＃34;＆＃34;表格标签

因此，您可以使用一个表单添加和更新

最诚挚的问候，

Laravel 5.5 DataTables Yajra Ajax Crud

3 个答案: