Attaching PUT method to script in blade file-CodePudding

I've a simple table with only ID and country field, trying to edit/update country data in Bootstrap modal I'm succcessfully able to attach the data to the modal like this:

Button:

<a  data-toggle="modal" data-target="#editCountry" data-country="{{$countryFilter->country}}" href="{{ $countryFilter->country }}"><i ></i></a>

Modal:

div  id="editCountry" tabindex="-1" role="dialog" aria-labelledby="editCountry" aria-hidden="true">
  <div >
    <div >
      <div >
        <h4  id="myModalLabel">Edit Country</h4>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        <form method="POST" action="{{ route("admin.country-filters.update", [$countryFilter->id]) }}" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <div >
                <label  for="country">{{ trans('cruds.countryFilter.fields.country') }}</label>
                <input  type="text" name="country" id="country" value="{{ old('country', $countryFilter->country) }}" required>
                @if($errors->has('country'))
                    <div >
                        {{ $errors->first('country') }}
                    </div>
                @endif
                <span >{{ trans('cruds.countryFilter.fields.country_helper') }}</span>
            </div>
            <div >
                <button  type="submit">
                    {{ trans('global.update') }}
                </button>
            </div>
        </form>
    </div>
      <div >
        <button type="button"  data-dismiss="modal">{{ trans('global.cancel') }}</button>
      </div>
    </div>
  </div>
</div>

Attaching data script:

<script>
$('#editCountry').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var country = button.data('country')
    
    var modal = $(this)
    modal.find('.modal-title').text('Edit '   country)

    modal.find('.modal-body input').val(country)
    $(this).find('input').attr(country)
})
</script>

When I update the data for example the row that contains country Germany I get the following error: The GERMANY method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE.

How can I include:

@method('PUT')
@csrf

In the request?

controller method:

public function update(UpdateCountryFilterRequest $request, CountryFilter $countryFilter)
{
  $countryFilter->update($request->all());
  return redirect()->route('admin.country-filters.index');
}

UpdateCountryFilterRequest

class UpdateCountryFilterRequest extends FormRequest
{
    public function authorize()
    {
        return Gate::allows('country_filter_edit');
    }

    public function rules()
    {
        return [
            'country' => [
                'string',
                'required',
            ],
        ];
    }
}

dd output:

array:3 [▼ // app\Http\Controllers\Admin\CountryFilterController.php:58
  "_method" => "PUT"
  "_token" => "Vfk2d62eNZKFFHCQjLGlKEFbxCfrLHxgZJuO8ihP"
  "country" => "GermanyEdited"
]

CodePudding user response：

Okay your issue is with this line of code:

modal.find('.modal-body input').val(country)

What you are doing here is saying, find every input inside the modal-body and change its value to $country.

But you are also using the blade tags:

@method('PUT')
@csrf

Which really translates to:

<input type="hidden" name="_method" value="PUT">
<input type="hidden" name="_token" value="TOKEN_CODE">

So you can see that the code is trying to replace the values of those 2 inputs to the value of $country but we need them to stay the way they are as they are very important to submitting the form correctly.

Okay, so to correct this, you can simply change only the value of the ID you already want to change line 9 and line 10 as follows:

<script>
$('#editCountry').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var country = button.data('country')
    
    var modal = $(this)
    modal.find('.modal-title').text('Edit '   country)

    //modal.find('.modal-body input').val(country)
    $('#country').val(country)
    $(this).find('input').attr(country)
})
</script>

And there you go, that will only change the value of the input id="country", My advice is to avoid using find function, you already set an ID="" to all important things, just change them directly.