Update data in laravel using ajax

Updating data using Ajax in Laravel involves making an asynchronous request to the server, updating the data, and then reflecting the changes on the web page without requiring a full page reload. Here's a step-by-step guide on how to perform Ajax data updates in Laravel:

Set up the route:
Define a route in your Laravel application to handle the Ajax request and update the data. This route should point to a controller method that handles the data update logic.

In routes/web.php:

Route::post('/update-data', 'CfController@update')->name('cf-submit.update');

Create the controller:
Create a controller called CfController to handle the Ajax update request. You can use the following command to generate the controller:

php artisan make:controller CfController

Implement the controller method:
In the DataController, create a method called update to handle the data update logic. In this example, we'll assume you're updating a database record based on the data sent via the Ajax request.
In app/Http/Controllers/CfController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\CfModel;

class CfController extends Controller
{
    public function update(Request $request)
    {
        // Get the data from the request
        $data = $request->all();

        // Find the record in the database based on its ID
        $record = CfModel::findOrFail($data['id']);

        // Update the record with the new data
        $record->update($data);

        // Return a response indicating success
        return response()->json(['message' => 'Data updated successfully']);
    }
}

Set up the Ajax request in the view:
In your view file (e.g., resources/views/update.blade.php), you can set up an HTML form with input fields for the data you want to update. Then, use JavaScript to handle the Ajax request and update the data on the page.

<!-- Your HTML form with input fields for the data to be updated -->
<div id="cf-response-message"></div>
<form id="update-form">
    <input type="hidden" name="_token" value="{!! csrf_token() !!}">
    <input type="hidden" name="id" value="{!! $record->id !!}">
    <input type="text" name="field1" value="{!! $record->field1 !!}"> 
    <button type="submit">Update</button>
</form>

<!-- Your JavaScript code to handle the Ajax request -->
<script>
    $(document).ready(function() {
        $('#update-form').submit(function(e) {
        	e.preventDefault();
        	const formData = new FormData(this);
           // Send an AJAX request
            $.ajax({
                type: 'POST',
                url: '{!! route('cf-submit.update') !!}',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    // Handle the response message
                    $('#cf-response-message').text(response.message);
                },
                error: function(xhr, status, error) {
                    // Handle errors if needed
                    console.error(xhr.responseText);
                }
            });
 		});
    });
</script>

With these steps in place, when you submit the form, the data will be sent to the CfController@update method via Ajax, the data will be updated in the database, and you will receive a response indicating success. You can then update the page content as needed to reflect the changes.

Related Post:

• learn more how to Submit a form using AJAX in Laravel - click here
• learn more how to Ajax Data Fetching in Laravel  - click here