使用Ajax更新Laravel表单

Question

I'm trying to update data using ajax to prevent page reload. This is already populated form from the profile model. Even though this is pretty straightformward I am unable to submit this request via ajax.

This code gives me the following error :

Creating default object from empty value

Can anyone kindly help me understand what I have done incorrectly here?

blade file

<form class="form-horizontal" id="editProfile" data-parsley-validate>
  @method('PUT')
  @csrf

  <div class="row">
      <div class="col-md" style="padding:0px;">
          <input type="hidden" name="usr_id" id="usr_id">
          <input type="hidden" name="user_id" id="user_id" value="{{ $profile->user_id }}">
          <input type="hidden" name="username" id="username" value="{{ $profile->username }}">
          <input type="hidden" name="emp_id" id="emp_id" value="{{ $profile->emp_id }}">
          <input type="hidden" name="site" id="site" value="{{ $profile->site }}">

      <div class="form-group">
          <label for="firstname" class="col-sm-4 control-label">First Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="first_name" value="{{$profile->first_name}}" placeholder="First Name">
          </div>
      </div>

      <div class="form-group">
          <label for="lastname" class="col-sm-4 control-label">Last Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="last_name" value="{{$profile->last_name}}" placeholder="Last Name">
          </div>
      </div>

 <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="submit" value="submit" class="btn btn-danger">Update</button>
</div>
</div>
    </div>
   </div>
</form>

Controller:

public function update(Request $request, $usr_id)
{
   $profile = Profile::find($usr_id);

   $profile->first_name = $request->input('first_name');
   $profile->last_name = $request->input('last_name');
   $profile->update();
}

Ajax Script:

<script>
    $(document).ready(function() {
    // Update Data

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#editProfile').on('submit', function(e){
            e.preventDefault();

            var usr_id = $('#emp_id').val();

            $.ajax({
                type: "PUT",
                url: "/profile/edit/" + usr_id,
                dataType: $('#editProfile').serialize(),
                success: function (response) {
                    console.log(response);
                    alert("Data Updated");
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                }
            });
        });

    });

</script>

Route

Route::put('/profile/edit/{usr_id}', 'ProfileController@update')->name('profile.update');

Answer 1

Creating default object from empty value

This error is caused by this code

$profile->update();

You're attempting to update an empty object because

$profile = Profile::find($usr_id);

returns null

Because find accepts a primary key that is an ineteger and you're passing it an empty value (assuming that's what you mean by emp_id)

Here's the code that validates the ID to exist

<meta name="csrf-token" content="{{ csrf_token() }}">
<form class="form-horizontal" id="editProfile" data-parsley-validate>
    @method('PUT')
    <div class="row">
        <div class="col-md" style="padding:0px;">
            <input type="hidden" name="usr_id" id="usr_id">
            <input type="hidden" name="emp_id" id="emp_id" value="{{ $profile->emp_id }}">
        </div>
    </div>
    <button type="submit" id="submit" value="submit" class="btn btn-danger">Update</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

Ommitted irrelevant parts for brevity

and validate the value before dispatching the Ajax request

    $(document).ready(function() {
    // Update Data

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#editProfile').on('submit', function(e){
            e.preventDefault();

            var usr_id = $('#emp_id').val();

            if (usr_id < 1) {
                alert("Error: user id is null! make sure it has a value from the {{ $profile->emp_id }}");
                return;
            }

            $.ajax({
                type: "PUT",
                url: "/profile/edit/" + usr_id,
                dataType: $('#editProfile').serialize(),
                success: function (response) {
                    console.log(response);
                    alert("Data Updated");
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                }
            });
        });

    });

And in your update function die and dump the passed id by route using dd

public function update(Request $request, $usr_id)
{
        // dd($usr_id);
   $profile = Profile::find($usr_id);

   $profile->first_name = $request->input('first_name');
   $profile->last_name = $request->input('last_name');
   $profile->update();
}

Check that you receive a valid id from the form

Hope this helps