首页 > 解决方案 > 使用通过 AJAX 从 PHP 加载的数据填充列表框

问题描述

我的目标是显示当使用两个列表框按下包含用户 ID 的按钮时加载的模态 div,一个带有可用的用户组,另一个带有用户当前所在的组。

此时数据正在成功。

开发者工具日志:

[{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>

我怎样才能使数据出现?

标签: javascriptphpajaxlaravelmodal-dialog

解决方案


我已经想出了如何解决这个问题,现在我需要让我的代码清晰并优化它。

工作代码在这里:https ://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner


推荐阅读