X-Editable cannot submit changes. Error Code 405 (Method Not Allowed)

Question

I'm facing problem in my Laravel project using bootstrap X-Editable. whenever I want to submit my changes, it show error 405 (Method not allowed). I've tried to change my route to PUT and POST method, but still got same error. here's my piece of code

    $(document).ready(function () {
  $.fn.editable.defaults.mode = "inline";
  $.fn.editable.defaults.inputclass = "form-control input-sm";
  // $.fn.editable.defaults.ajaxOptions = {type: "PUT"};
  // $.fn.editable.defaults.ajaxOptions = {type: "POST"};

  $(".parts_qty").editable({
    type: "number",
    title: "Enter parts qty",
    send: "always",
    url: "/service/service-report/update-parts",
    params: function (params) {
      params._token = $('meta[name="csrf-token"]').attr("content");
      params.id = $(this).data("pk");
      params.qty = params.value;
      return params;
    },
    success: function (response, newValue) {
      if (response.success) {
        alert("Data changed successfully!");
      }
    },
    error: function (response, newValue) {
      alert("Woops Something wrong!");
    },
  });
});

<table class="table table-hover table-bordered" id="table-parts">
    <thead>
        <tr>
            <td><b>Part Number</b></td>
            <td><b>Part Description</b></td>
            <td><b>Qty</b></td>
        </tr>
    </thead>
    <tbody>
        @foreach (SiteHelpers::get_recommendation_parts($data->id) as $part)
        <tr>
            <td>{{ $part->part_number }}</td>
            <td>{{ $part->part_description }}</td>
            <td data-name='qty'><a href="javascript:;" class="parts_qty" data-pk="{{ $part->id }}">{{ $part->parts_qty }}</a></td>
        </tr>
        @endforeach
    </tbody>
</table>

Here's the error (can't upload as image).

The error showed up when I click the Ok button :

Here's the route :

Route::post('service/service-report/update-parts', 'Service\ServiceReportController@updateParts')->name('service-report/update-parts');

Answer 1

I've solved the issue. thanks to similar post I found : 33284967

This is what I did :

adding data-url to the input field.

<table class="table table-hover table-bordered" id="table-parts">
    <thead>
        <tr>
            <td><b>Part Number</b></td>
            <td><b>Part Description</b></td>
            <td><b>Qty</b></td>
        </tr>
    </thead>
    <tbody>
        @foreach (SiteHelpers::get_recommendation_parts($data->id) as $part)
        <tr>
            <td>{{ $part->part_number }}</td>
            <td>{{ $part->part_description }}</td>
            <td data-name='qty'><a href="javascript:;" class="parts_qty" data-url="/service/service-report/update-parts/{{$part->id}}" data-pk="{{ $part->id }}">{{ $part->parts_qty }}</a></td>
        </tr>
        @endforeach
    </tbody>
</table>

adding ajaxOptions to the javascript

$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.inputclass = 'form-control input-sm';
    
    $('.parts_qty').editable({
        type: 'number',
        title: 'Enter parts qty',
        send: 'always',
        ajaxOptions: {
            type: 'post'
        },
        params: function(params) {
            params._token = $('meta[name="csrf-token"]').attr('content');
            params.id = $(this).data('pk');
            params.qty = params.value;
            return params;
        },
        success: function(response, newValue) {
            if (response.success) {
                alert('Data changed succesfully!');
            }
        },
        error: function(response, newValue) {
            alert('Woops something wrong!');
        },
    });
});

adding ID to the route

Route::post('service-report/update-parts/{id}', 'Service\ServiceReportController@updateParts')->name('service-report/update-parts');

Thank you stackoverflow!