Home > Enterprise >  Unable to send ajax data to Laravel controller
Unable to send ajax data to Laravel controller

Time:05-23

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"  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"  contenteditable="true"                                                                                 
                                        value={{$data['name']}} data-id={{$key}}> 
                                        {{$data['name']}}
                 </td>
                 <td name="email"  contenteditable="true"
                                        value={{$data['name']}} data-id={{$key}}>
                                        {{$data['email']}}
                 </td>
                 <td>
                     <div >
                       <span >
                         <button type="button" onclick="saveMe(this)" >
                            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

CodePudding user response:

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.

CodePudding user response:

In your ajax request you are passing your data inside value attribute so it's not showing. If you try $request->value['name'] then it will show you the name. If you want to get name directly in request object then pass as like below.

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