Question 69658 in Ajax Question posted in
You can find the official documentation here.

a problem is sending data to database with ajax and laravel – Jquery ajax

i m trying to build a sortable drag and drop list and the order must change everytime i drop the element in the his new area
i m using ajax and laravel but when i drop the element i got the following error

POST http://localhost/pfe/public/prof/listpost 500 (Internal Server Error)

my route code

Route::post('prof/listpost','listsController@update');

my controller code

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class listsController extends Controller
{
    public function showlist()
    {
        $lists=AppModelslists::orderby('order','ASC')->get();
        return view('questions.DragAndDrop',compact('lists'));
    }

    public function update(Request $request)
    {
        {
            $lists = lists::all();
    
            foreach ($lists as $list) {
                foreach ($request->order as $order) {
                    if ($order['id'] == $list->id) {
                        $list->update(['order' => $order['position']]);
                    }
                }
            }
            
            return response('Update Successfully.', 200);
        }
    }
}

my view code which include the ajax code too

@include ('header')
@include ('tableHeader')
<meta name="csrf-token" content="{{ csrf_token() }}">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Subjects</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="{{route('adminShowProduits')}}">Produits</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    
     <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                  <a href="{{route('ProfAddSubject')}}" class="btn btn-success btn-sm"> <i class="fas fa-plus"></i> Add Subject </a>
                  <a href="#" class="BtnFiltrer btn-sm btn btn-primary"> <i class="fas fa-filter"></i> Filtrer</a>
                  <a href="#" class="BtnExporter btn-sm btn btn-primary"> <i class="fas fa-file-export"></i> Exporter</a>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="table" class="table table-bordered table-striped">
                  <thead>
                  <tr >
                    <th>name</th>
                    <th>order</th>
                  </tr>
                  </thead>
                  <tbody id="tablecontents">
                  @foreach ($lists as $list)
                   
                    <tr class="row1" data-id="{{ $list->id }}">
                      <td>{{$list->nom}}</td>
                      <td>{{$list->order}} </td>
                    </tr>
                  @endforeach
                  
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>name</th>
                    <th>order</th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>


 
  </div>
  <!-- /.content-wrapper -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
    <script type="text/javascript">
   $(function () {
        $("#table").DataTable();

        $( "#tablecontents" ).sortable({
          items: "tr",
          cursor: 'move',
          opacity: 0.6,
          update: function() {
              sendOrderToServer();
          }
        });
  function sendOrderToServer() {
          var order = [];
          var token = $('meta[name="csrf-token"]').attr('content');
          $('tr.row1').each(function(index,element) {
            order.push({
              id: $(this).attr('data-id'),
              position: index+1
            });
          });
          $.ajax({
            type: "POST", 
            dataType: "json", 
            url: "{{ url('prof/listpost') }}",
                data: {
              order: order,
              _token: token
            },
            success: function(response) {
                if (response.status == "success") {
                  console.log(response);
                } else {
                  console.log(response);
                }
            }
          });}  });
</script>




  @include ('footer')
  @include ('tableFooter')
Tags:

2

Answers


  1. 0

    refactor update action like this:

    public function update(Request $request)
{
   $lists = lists::all();

        foreach ($lists as $list) {
            foreach ($request->order as $order) {
                if ($order['id'] == $list->id) {
                    $list->update(['order' => $order['position']]);
                }
            }
        }
        
        return response('Update Successfully.', 200);
    
}
    Login or Signup to reply.
  2. 0

    If you want return json then you should use this:

    return response()->json(['success' => 'Update Successfully.'], 200);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search