How to add ajax in our project?

Author: Kundan kumar | Date: 19-02-2025

Update Your AJAX Request to Send name Instead of tag

In your AJAX request, you're sending tag: newTag. But in your controller, you're validating name. So, you need to send name instead of tag in the request data.

Update your AJAX code like this:

$.ajax({
    url: '{{ route('tags.store') }}',
    method: 'POST',
    data: {
        name: newTag, // Send 'name' instead of 'tag'
        _token: '{{ csrf_token() }}'
    },
    success: function(response) {
        if (response.success) {
            $('#tag_id').append('<option value="' + response.tag.id + '" selected>' + response.tag.name + '</option>');
            $('#manual_tag_input').val('');
            $('#manual_tag_container').hide();
        }
    },
    error: function() {
        alert('Failed to add tag');
    }
});

Controller (Your existing code is correct)

Your controller code is mostly fine, but make sure that the validation corresponds to the data you're sending. You should accept name in the request, which you already have, so no change is required there.

Here’s your controller again for reference:

public function tagstore(Request $request)
{
    $request->validate([
        'name' => 'required|unique:tags,name', // validate 'name' not 'tag'
    ]);

    $data = new Tag();
    $data->name = $request->name; // Make sure you're using 'name' here
    $data->save();

    return response()->json([
        'success' => true,
        'tag' => [
            'id' => $data->id,
            'name' => $data->name,
        ]
    ]);
}

Debugging the Issue

If the issue persists, you can debug the request by adding a dd($request->all()); in your controller method to see the incoming request data.

public function tagstore(Request $request)
{
    dd($request->all()); // Check the data being received by the controller

    $request->validate([
        'name' => 'required|unique:tags,name',
    ]);

    $data = new Tag();
    $data->name = $request->name;
    $data->save();

    return response()->json([
        'success' => true,
        'tag' => [
            'id' => $data->id,
            'name' => $data->name,
        ]
    ]);
}

Ensure CSRF Token Is Being Passed Correctly

Make sure that the CSRF token is being included properly in your AJAX request. Since you're using Blade syntax to inject the CSRF token, it should work as long as you're using it in the correct place, which you've done. But double-check if the token is included in the headers or sent as part of the data.

For debugging, you can also check if the token is being sent correctly:

console.log('{{ csrf_token() }}'); // Check if token is being rendered correctly in the script

Summary

Fix the key name in your AJAX request to name: newTag instead of tag: newTag.
Your controller seems correct, but adding debugging (dd($request->all())) will help you check if the data is being passed properly.
Ensure CSRF token is correctly included in your AJAX request.
Once these changes are made, the tag should be saved properly in the database. Let me know if it works!