ajaxlaraveldatatablelaravel-controller

Unable to send ajax data to Laravel controller


I'm just trying to send the editable table row data to the controller onClick of the Save button, update that data in the database, and return success.

But I cannot display the data inside the controller function of laravel. Data inside saveMe function is coming as desired as shown in below screenshot but it is not going to the controller

<table id="customersTable" class="table table-bordered table-responsive-md table-striped text-center" style="border-style: solid; border-color:red">
      @php
         $customersData = Session::get('data');
         $issues = Session::get('issues');
      @endphp
      <thead>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Contact</th>
            <th>Address</th>
            <th>Name</th>
         </tr>
       </thead>
       <tbody id="bodyData">
       @foreach ($customersData as $key => $data)
          <form action="ajaxform">
              <!-- This is our clonable table line -->
              <tr>
                 <td>{{$key}}</td>
                 <td name="name" class="pt-3-half name" contenteditable="true"                                                                                 
                                        value={{$data['name']}} data-id={{$key}}> 
                                        {{$data['name']}}
                 </td>
                 <td name="email" class="pt-3-half email" contenteditable="true"
                                        value={{$data['name']}} data-id={{$key}}>
                                        {{$data['email']}}
                 </td>
                 <td>
                     <div class="test">
                       <span class="table-save">
                         <button type="button" onclick="saveMe(this)" class=" btn btn-secondary btn-rounded btn-sm my-0 saveBtn">
                            Save
                         </button>
                        </span>
                     </div>
                  </td>
                </tr>
             </form>
         @endforeach
       </tbody>
    </table>

JavaScript function

<script>
    function saveMe(params) {
    var tr = $(this).closest("tr"); //get the parent tr
    var name = $(params).closest("tr").find(".name").text();
    var email = $(params).closest("tr").find(".email").text();
    console.log(name);
    console.log(email);
  
    $.ajax({
        url: '/customers/saveSingleRecord',
        type: 'GET',
        data: {
            _token:'{{ csrf_token() }}', 
            value: {
                'name' : name,
                'email' : email,
                'contact' :  contact,
                'address' : address,
            },
        },
        success: function(data){
            alert("success");
        }    
    });
}

Function inside the controller

class CustomersController extends Controller
{
    public function saveSingleRecord(Request $request)
    {

        // $name = $_GET['name'];
        $name = $request->name;
        dd($name); // <------------------ Not showing anything
        // return response()->json($name);
    }
}

Route inside web.php

Route::post('/customers/saveSingleRecord/', [CustomersController::class, 'saveSingleRecord']);

enter image description here


Solution

  • The correct way to send ajax is below

    $.ajax({
            url: '/customers/saveSingleRecord',
            type: 'GET',
            data: {
                    name : name,
                    email : email,
                    contact :  contact,
                    address : address,
                    _token :'{{ csrf_token() }}', 
            },
            success: function(data){
                alert("success");
            }    
        });
    

    Basically you set key value pair within data.