我使用Bootstrap Modal来编辑用户角色。但不使用表格。只是一些复选框和提交操作的提示。我使用ajax将数据发送到coontroller。但是在控制器端,当我想使用Eloquent方法时,出现了类似404和500的错误。我真的很困惑。我花了五个多小时。
查看:
<div class="modal" id="rolesEditModal" role="dialog" > <!--tabindex="-1"-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Roles</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert" id="imgMessage" style="display:none"></div>
<div class="modal-body bg-gray">
<div class="editRolesElement">
<label for="modalTitle" id="userRolesLabel"><span> </span> User Roles </label>
<!-- checkbox -->
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="sysAdminCheckbox" id="checkbox1">
<label class="form-check-label" for="checkbox1" style="font-weight: bold;color: black">System Admin</label>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="homePageAdminCheckbox" id="checkbox2">
<label class="form-check-label" for="checkbox2">HomaPage Admin</label>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="aboutUsAdminCheckbox" id="checkbox3">
<label class="form-check-label" for="checkbox3">Aboutus Admin</label>
</div>
<div id="editmessage" style="display:none"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="submitModal" type="button" class="btn btn-success" data-dismiss="modal">save</button>
<!--<input type="submit" id="submitModal" class="btn btn-primary" value="Save">--><!--Save changes</button>-->
</div>
脚本:
<pre><code><script type="text/javascript">
$(document).ready( function () {
$("#submitModal").click(function(){
$('#editmessage').hide();
var systemAdmin = 0;
var homeAdmin = 0;
var aboutUsAdmin = 0;
var portfolioAdmin = 0;
var featuresAdmin = 0;
var contactusAdmin = 0;
var commentAdmin = 0 ;
if($('#checkbox1:checked').val())
{ systemAdmin = 1; } else { systemAdmin = 0; }
if($('#checkbox2:checked').val())
{ homeAdmin = 1; } else { homeAdmin = 0; }
if($('#checkbox3:checked').val())
{ aboutUsAdmin = 1; } else { aboutUsAdmin = 0; }
if($('#checkbox4:checked').val())
{ portfolioAdmin = 1; } else { portfolioAdmin = 0; }
if($('#checkbox5checked').val())
{ featuresAdmin = 1; } else { featuresAdmin = 0; }
if($('#checkbox6:checked').val())
{ contactusAdmin = 1; } else { contactusAdmin = 0; }
if($('#checkbox7:checked').val())
{ commentAdmin = 1; } else { commentAdmin = 0; }
var A_url='';
A_url = "{{ route('userManagement.editRoles') }}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url : A_url,
data :
{
userId : $(this).data('userid'),
systemAdmin : systemAdmin,
homeAdmin : homeAdmin,
aboutUsAdmin : aboutUsAdmin,
portfolioAdmin : portfolioAdmin,
featuresAdmin : featuresAdmin,
contactusAdmin : contactusAdmin,
commentAdmin : commentAdmin
},
type : 'post',
fail: function(data){
var incerttxt = '<div class="alert alert-danger" role="alert">Server error</div>';
$('#editmessage').html(incerttxt);
$('#editmessage').fadeIn();
},
success : function( data ) {
//updateUserList_afterEditRoles(data,selectedButton);
console.log(data);
}
});
$('#rolesEditModal').modal('hide');
});
路线:
Route::post('editRoles', 'UserManagementController@editRoles')->name('userManagement.editRoles');
controller:
Route::post('editRoles', 'UserManagementController@editRoles')->name('userManagement.editRoles');
我写了整个实现而不检查。希望这对您有效。做了一些小的改动和改进。因此,您可以根据需要进行自定义。
带剑的刀片
<pre><code>public function editRoles(Request $request) { $userId=$request["userId"]; //$findedUser = User::find($userId)->roles()->orderBy('id')->get(); $findedUser = User::findorfail($request['userId']); //$findedUser->roles()->detach(); //$findedUser->roles()->attach($roleId); $assignedRoles = array(); if ($request["systemAdmin"]==="1") { array_push($assignedRoles, 1); } if ($request["homeAdmin"]==="1") { array_push($assignedRoles, 2); } if ($request["aboutUsAdmin"]==="1") { array_push($assignedRoles, 3); } if ($request["portfolioAdmin"]==="1") { array_push($assignedRoles, 4); } if ($request["featuresAdmin"]==="1") { array_push($assignedRoles, 5); } if ($request["contactusAdmin"]==="1") { array_push($assignedRoles, 6); } if ($request["commentAdmin"]==="1") { array_push($assignedRoles, 7); } $findedUser->roles()->sync([2,3,4]/*$assignedRoles*/); return ($findedUser); } </code></pre>
ROUTE
<div class="modal" id="rolesEditModal" role="dialog" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Edit Roles</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert" id="imgMessage" style="display:none"></div> <div class="modal-body bg-gray"> <div class="editRolesElement"> <label for="modalTitle" id="userRolesLabel"><span> </span> User Roles </label> @foreach($roles as $role) <div class="form-group form-check"> <input data-id="{{ $role->id }}" type="checkbox" class="form-check-input" id="checkbox_{{ $role->id }}"> <label class="form-check-label" for="checkbox_{{ $role->id }}">{{ $role->name }}</label> </div> @endforeach </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button id="submitModal" type="button" class="btn btn-success" data-dismiss="modal">Save</button> </div> </div> </div> </div> <script> function getRoles() { let roles = {}; $('#rolesEditModal .form-check-input').each(function(i) { roles [$(this).data('id')] = $(this).prop('checked'); }); return roles; } function submitRoles(roles) { $.ajax({ data: { _token: "{{ csrf_token() }}", user_id: "{{ $user->id }}", roles: roles }, url: "{{ route('userManagement.editRoles') }}", type: "POST" }).done(function (data) { console.log(data.message); }).fail(function (jqXHR, ajaxOptions, thrownError) { console.log("Server error!"); }); } function destructCheckboxes() { $('#rolesEditModal .form-check-input').prop('checked', false); } $("#submitModal").on('click', function() { let roles = getRoles(); submitRoles(roles); destructCheckboxes(); $('#rolesEditModal').modal('hide'); }); </script>
CONTROLLER
// here you just need to write one more route, which from action will return $roles collection and $user (or $users for your case with foreach in blade) object to the view Route::post('editRoles', 'UserManagementController@editRoles')->name('userManagement.editRoles');
NEW UPDATES
在您的控制器中,您还有一些获取页面的方法,对吗?我认为您的刀片中有一个$ user(用于单个用户页面)或$ users(用于显示多个用户)。因此,我不知道您的刀片到底是什么,但是您可以针对具体情况使用其中一种方法,或者在需要时使用这两种方法:
public function editRoles(Request $request) { $user = User::findOrfail($request->get('user_id')); $roles = Role::whereIn('id', $request->get('roles'))->get(); $user->roles()->delete(); $user->roles()->saveMany($roles); return response()->json([ 'success' => true, 'message' => "Roles successfully assigned to the user.", ], 200); }
您将拥有(或已经拥有)适合这种方法的路由,如下所示:
public function singleUserPage($user_id) { $user = User::findOrFail($user_id); $roles = Role::all(); return view('user-management', [ // view for single user 'user' => $user, 'roles' => $roles, ]); } // for this you need to loop over on each user in the view, and it will have a same functionality public function multipleUsersPage() { $users = User::all(); $roles = Role::all(); return view('users-management', [ // view for multiple users 'users' => $users, 'roles' => $roles, ]); }
因此,如果将$ user设置为“ undefined”,则需要首先将其从控制器发送到页面(就像我在顶部的两个方法中那样。)>