ajax in laravel for create and update

Question

i used ajax for crud in laravel. when update or add data, add new row to list but return string 'undefined' and when refresh this page show real text.
how to resolve this problem?

Controller:

public function update(Request $request, $user_id)
{
        $user = User::where('id', $user_id)->update([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'password' => Hash::make($request->input('password')),
        ]);

        if ($request->input('role') == 'admin'){
            $user = DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 2,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        } else {
            $user = DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 1,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        }

        return response()->json($user);
}

View:

@foreach ($users as $user)
    <tr id="user{{$user->id}}" class="active">
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{ $user->hasRole('admin') ? 'Admin' : 'Author' }}</td>
        <td width="35%">
            <button class="btn btn-warning btn-detail open_modal" value="{{$user->id}}"> Edit </button>
            <button class="btn btn-danger btn-delete delete-user" value="{{$user->id}}"> Delete </button>
        </td>
    </tr>
@endforeach

js codes for ajax

$(document).ready(function(){


    //get base URL *********************
    var url = $('#url').val();


    //display modal form for creating new user *********************
    $('#btn_add').click(function(){
        $('#btn-save').val("add");
        $('#frmusers').trigger("reset");
        $('#myModal').modal('show');
    });



    //display modal form for user EDIT ***************************
    $(document).on('click','.open_modal',function(){
        var user_id = $(this).val();

        // Populate Data in Edit Modal Form
        $.ajax({
            type: "GET",
            url: url + '/' + user_id,
            success: function (data) {
                console.log(data);
                $('#user_id').val(data.id);
                $('#name').val(data.name);
                $('#password').val(data.password);
                $('#email').val(data.email);
                $('#btn-save').val("update");
                $('#myModal').modal('show');
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });



    //create new user / update existing user ***************************
    $("#btn-save").click(function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })

        e.preventDefault();
        var formData = {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val(),
            role: $('#role').val(),
        }

        //used to determine the http verb to use [add=POST], [update=PUT]
        var state = $('#btn-save').val();
        var type = "POST"; //for creating new resource
        var user_id = $('#user_id').val();;
        var my_url = url;
        if (state == "update"){
            type = "PUT"; //for updating existing resource
            my_url += '/' + user_id;
        }
        console.log(formData);
        $.ajax({
            type: type,
            url: my_url,
            data: formData,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                var user = '<tr id="user' + data.id + '"><td>' + data.name + '</td><td>' + data.email + '</td><td>' + data.role + '</td>';
                user += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '">ویرایش</button>';
                user += ' <button class="btn btn-danger btn-delete delete-user" value="' + data.id + '">حذف</button></td></tr>';
                if (state == "add"){ //if user added a new record
                    $("#users-list").append(user);
                }else{ //if user updated an existing record
                    $("#user" + user_id).replaceWith( user );
                }
                $('#frmusers').trigger("reset");
                $('#myModal').modal('hide')
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });


    //delete user and remove it from TABLE list ***************************
    $(document).on('click','.delete-user',function(){
        var user_id = $(this).val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        $.ajax({
            type: "DELETE",
            url: url + '/' + user_id,
            success: function (data) {
                console.log(data);
                $("#user" + user_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });

});

................................................................................................................................................................................................

The update method returns boolean so essentially in all 3 blocks you are setting the $user to a boolean not an object — Donkarnash
– Donkarnash, Commented Nov 27, 2020 at 17:24

Donkarnash · Accepted Answer · 2020-11-27 17:30:09Z

The update method returns boolean so essentially in all 3 blocks you are setting the $user to a boolean not an object.

So utilize tap() function

public function update(Request $request, $user_id)
{
    $user = tap(User::where('id', $user_id)->first())
        ->update([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'password' => Hash::make($request->input('password')),
        ]);

        if ($request->input('role') == 'admin'){
            DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 2,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        } else {
            DB::table('model_has_roles')->where('model_id', $user_id)->update([
                'role_id' => 1,
                'model_type' => 'App\User',
                'model_id' => $user_id,
            ]);
        }

    //Or you can fetch the user record again User::find($user_id);
    //if you are not using tap()

    return response()->json($user->fresh());
}

Mehdi Jalali · Accepted Answer · 2020-11-27 18:18:20Z

how to resolve this problem in store method?

public function store(Request $request)
{
    $userAuth = auth()->user();
    if($userAuth->hasRole('admin')){
        $user = User::insertGetId([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'password' => Hash::make($request->input('password')),
        ]);

        if ($request->input('role') == 'admin'){
            $user = DB::table('model_has_roles')->insert([
                'role_id' => 2,
                'model_type' => 'App\User',
                'model_id' => $user,
            ]);
        } else {
            $user = DB::table('model_has_roles')->insert([
                'role_id' => 1,
                'model_type' => 'App\User',
                'model_id' => $user,
            ]);
        }
        return response()->json($user);
    }

Collectives™ on Stack Overflow

ajax in laravel for create and update

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related