axelbol
4 days ago

synchronous execution working fine but problems with Asynchronous jQuey Ajax

Posted 4 days ago by axelbol

I'm starting to use jquery with ajax but I have a problem. I´m using spatie/permission and I have been able to implement 100% working with synchronously execution but now with ajax and Asynchronous execution on the edit part I have problems. With synchronously execution I have the user and I assign it a role like this.

public function edit($id)
    {
        $user=User::findOrFail($id);
        // scotch
        $roles = Role::get();
        // $roles = Role::pluck('name', 'id')->all();
        return view('user.edit', compact('user', 'roles'));
    }

And on the view I have this

<div class="row">
        <form-group class="col-md-6">
          @foreach ($roles as $role)
            {{ Form::checkbox('roles[]',  $role->id, $user->roles ) }}
            {{ Form::label($role->name, ucfirst($role->name)) }} <br>
          @endforeach
        </form-group>
      </div>

As a result I have the checkbox CHECKED with the role assigned to thah user this is working fine but with jquery and ajax I´m not beeing able to pass that CHECKED checkbox. I can pass to the create modal for user the roles created and I can save it but when I want to edit it I don´t know how to it from the database just I did it with the synchronously execution. I have this on the Asynchronous execution

public function index()
    {   
        $roles = Role::get();
        // $user = User::findOrFail($id);
        return view('user.index', compact('roles'));
    }

public function store(Request $request)
    {
        $input=$request->all();
        
        $user=new User();
        $roles = $request['roles']; //Retrieving the roles field
        if (isset($roles)) //Checking if a role was selected
        {
            foreach ($roles as $role) 
            {
                $role_assign = Role::where('id', '=', $role)->firstOrFail();            
                $user->assignRole($role_assign); //Assigning role to user
            }
        }

        User::create($input);
        return Response::json($input);
    }

On the edit part

    public function edit($id)
    {
        $user = User::findOrFail($id);
        
        return Response::json([$user);
    } 

And on the view for Asynchronous

<div class="form-group col-md-6">
   <input type="hidden" name="role_id" id="role_id">
          @foreach ($roles as $role)
              <label>                                
               {{ Form::checkbox('roles[]', $role->id, $user->roles) }}
                      {{  ucfirst($role->name) }}
                 </label> <br>
            @endforeach
  </div>

jQuery part

/* When click edit user */
        $(document).on('click', '.edit-user', function(){
            // user_id=$(this).attr('id');
            var id = $(this).data('id');
            // console.log(id);
            $.ajax({
                url: "/user/"+id+"/edit",
                dataType: 'json',
                success: function(data){
                    $('#name').val(data.name);
                    $('#email').val(data.email);
                    $('#user_id').val(data.id);
                    $('#user-title').html("Editar usuario");
                    $('#button-action').val("edit");
                    $('#btn-save').val('Editar');
                    $('#user-modal').modal('show');
                }
            })
        });

if($('#button-action').val()=='edit')
            {
                var value=$("#user_id").val();
                $.ajax({                    
                    data: $('#user-form').serialize(),                   
                    url: "/user/update",
                    method: "POST",
                    dataType: 'json',
                    success: function(data)
                    {
                        $('#user-form').trigger("reset");
                        $('#user-modal').modal('hide');
                        var Table = $('#users-table').dataTable();
                        Table.fnDraw(false);
                    },
                    error: function(data){
                        alert('Disculpe, ocurrio un problema. Vuelva a intentar');
                        $('#btn-save').html('Volver a intentar');
                    }
                });
            }

So how can I pass the CHECKED boxes to the modal when user clicks edit?

Please sign in or create an account to participate in this conversation.