Laravel Route missing required parameter

Question

I have this modal to edit data by populating the modal with data retrieved using ajax.

However, I faced problems with the URL in AJAX and the Laravel route with this error:

Missing required parameter for [Route: get-project-data] [URI: get-project-data/{projectId}] [Missing parameter: projectId].

<button type="button" class="item edit-button"
    data-toggle="modal" data-id="{{ $item->id }}" data-url="{{ route('get-project-data', ['projectId' => '']) }}"
    data-target="#editModal" data-placement="top"
    title="Edit">
    <i class="zmdi zmdi-edit"></i>
</button>

web.php

Route::get('/get-project-data/{projectId}', [HomeController::class, 'getProjectData'])->name('get-project-data');

$(document).on('click', '.edit-button', function() {
    var projectId = $(this).data('id');
    console.log("Selected Project ID: " + projectId);
    
    // Store projectId in edit modal's data attribute
    $('#editModal').data('projectId', projectId);
    
    // Retrieve the base URL for the AJAX request from the data-url attribute
    var baseUrl = $(this).data('url');
    
    // Construct the complete URL for the AJAX request
    var url = baseUrl + projectId;

    // Fetch existing data of the selected project
    $.ajax({
        url: url,
        method: 'GET',
        /* ... */
    });
});

Answer 1

I added a value for ['projectId' => '']

<button type="button" class="item edit-button"
    data-toggle="modal"
    data-id="{{ $item->id }}"
    data-url="{{ route('get-project-data', ['projectId' => $item->id ]) }}"
    data-target="#editModal"
    data-placement="top"
    title="Edit"
>
  <i class="zmdi zmdi-edit"></i>
</button>

and use the data-url in js

$(document).on('click', '.edit-button', function() {
    var projectId = $(this).data('id');
    console.log(projectId);

    $('#editModal').data('projectId', projectId);
    var baseUrl = $(this).data('url');

    // Fetch existing data of the selected project
    $.ajax({
        url: baseUrl,
        method: 'GET',
        success: function(response) {
            // Function definition here...
        }
    });
});