使用通过 AJAX 从 PHP 加载的数据填充列表框
Fill listbox with data loaded from PHP via AJAX
我的目标是显示一个模态 div 在按下包含用户 ID 的按钮时加载两个列表框,一个包含可用的用户组,另一个包含用户当前所在的组。
此时正在获取数据成功
开发者工具日志:
[{id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"},…]
0: {id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"}
1: {id: 1, name: "Admin", idgrupo: 2, nome: "Cliente"}
但是数据没有显示在模式 div 上,没有任何错误代码。
代码如下:
##控制器:
public function getGroups($id)
{
$data = \DB::table('grupoutilizador')
-> join ('users', function ($join) use ($id){
$join->on('users.id', '=', 'grupoutilizador.iduser')
->where('users.id', "=", $id );
}) -> join ('grupo', 'grupo.idgrupo', "=", 'grupoutilizador.idgrupo') ->
select('users.id', 'users.name', 'grupo.idgrupo', 'grupo.nome')
-> get();
return response()->json($data, 200);
}
##JavaScript:
function saveGroup(type,id){
$('#useridgr').attr('placeholder', '').val('');
$("#usernamegr").attr('placeholder', 'Nome').val('');
$('#list_box').html('');
$('#list_box_ini').html('');
if (type == 1){
} else {
loadatagroup(id);
}
}
var loadatagroup = (uid) => {
$.ajax({
type: 'GET',
url: 'usergrupo/' + uid,
data: {'_token': $("input[name='_token']").val()},
success: function(data){
$('#useridgr').attr('placeholder',data.id).val(data.id);
$("#usernamegr").attr('placeholder',data.name).val(data.name);
<?php
$gruposini = mysqli_query($conn2,'SELECT *, 0 AS INUSE FROM grupo');
while($row = mysqli_fetch_array($gruposini)) {
$stringoption = "$(\"#list_box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
}
?>
for (i=0; i<data.lenght; i++){
var id = response[i]['idgrupo'];
var name = response[i]['nome'];
$("#list_box").append("<option value='"+id+"'>"+name+"</option>");
}
}
})
}
##HTML:
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons"></i></div>
</div>
<input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
</div>
</div>
<select id = "list_box_ini" name="list_box_ini" multiple="multiple"> </select>
<select id = "list_box" name="list_box" multiple="multiple"> </select>
</form>
</div>
如何让数据显示出来?
我已经找到了解决方法,现在我需要清理并优化我的代码。
工作代码在这里:https://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner
我的目标是显示一个模态 div 在按下包含用户 ID 的按钮时加载两个列表框,一个包含可用的用户组,另一个包含用户当前所在的组。
此时正在获取数据成功
开发者工具日志:
[{id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"},…]
0: {id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"}
1: {id: 1, name: "Admin", idgrupo: 2, nome: "Cliente"}
但是数据没有显示在模式 div 上,没有任何错误代码。
代码如下:
##控制器:
public function getGroups($id)
{
$data = \DB::table('grupoutilizador')
-> join ('users', function ($join) use ($id){
$join->on('users.id', '=', 'grupoutilizador.iduser')
->where('users.id', "=", $id );
}) -> join ('grupo', 'grupo.idgrupo', "=", 'grupoutilizador.idgrupo') ->
select('users.id', 'users.name', 'grupo.idgrupo', 'grupo.nome')
-> get();
return response()->json($data, 200);
}
##JavaScript:
function saveGroup(type,id){
$('#useridgr').attr('placeholder', '').val('');
$("#usernamegr").attr('placeholder', 'Nome').val('');
$('#list_box').html('');
$('#list_box_ini').html('');
if (type == 1){
} else {
loadatagroup(id);
}
}
var loadatagroup = (uid) => {
$.ajax({
type: 'GET',
url: 'usergrupo/' + uid,
data: {'_token': $("input[name='_token']").val()},
success: function(data){
$('#useridgr').attr('placeholder',data.id).val(data.id);
$("#usernamegr").attr('placeholder',data.name).val(data.name);
<?php
$gruposini = mysqli_query($conn2,'SELECT *, 0 AS INUSE FROM grupo');
while($row = mysqli_fetch_array($gruposini)) {
$stringoption = "$(\"#list_box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
}
?>
for (i=0; i<data.lenght; i++){
var id = response[i]['idgrupo'];
var name = response[i]['nome'];
$("#list_box").append("<option value='"+id+"'>"+name+"</option>");
}
}
})
}
##HTML:
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons"></i></div>
</div>
<input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
</div>
</div>
<select id = "list_box_ini" name="list_box_ini" multiple="multiple"> </select>
<select id = "list_box" name="list_box" multiple="multiple"> </select>
</form>
</div>
如何让数据显示出来?
我已经找到了解决方法,现在我需要清理并优化我的代码。
工作代码在这里:https://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner