从 AJAX 响应中获取 ID 并将 ID 用于 Select2

Posted 2023-03-14

【中文标题】从 AJAX 响应中获取 ID 并将 ID 用于 Select2

【英文标题】：Get Id From AJAX Response And Use The Id For Select2

【发布时间】：2021-07-11 23:25:46

【问题描述】：

我在控制器中编写 html 代码

public function edit($id)

    $user = User::find($id);
    $rolesForEdit = Role::pluck('name', 'name')->all();
    $userRole = $user->roles->pluck('name', 'name')->all();

    $html = '<div class="row">
     <div class="col-md-6">
        <label for="name">Name</label>
        <input value="' . $user->name . '" class="form-control"
            placeholder="Full Name" type="text" name="name" id="name" />
        <br>
        <label for="phone">Phone Number</label>
        <input value="' . $user->phone . '" class="form-control"
            placeholder="Phone Number" type="text" name="phone" id="phone" />
        <br>
    </div>
    <div class="col-md-6">
        <label for="roles">Role</label><br>
        <select style="width:220px;" name="rolesForEdit[]" multiple id="rolesForEdit"
            class="rolesForEdit form-control"></select>
        <br>
    </div> <!-- kanan -->
</div> <!-- row-->';

    return response()->json(['html' => $html]);

然后在视图中，我试图获取rolesForEdit id 并将其用于select2。它不适用于这种方式。有什么解决办法吗？

$.ajax(
            url: "user/" + id + "/edit",
            method: 'GET',
            success: function(data) 
                //var roles = $($.parseHTML(data)).find("#rolesForEdit").html();
                //var roles = $(data).find('#rolesForEdit').text();
                //var roles = $(this).attr('rolesForEdit');
                //var roles = $($.parseHTML(data)).filter("#rolesForEdit");

                alert(roles);

                $(roles).select2(
                    ajax: 
                        url: ' url('searchrole') ',
                        processResults: function(data) 
                            return 
                                results: data.map(function(item) 
                                    return 
                                        id: item.id,
                                        text: item.name
                                    
                                )
                            
                        
                    
                );
                $('#dataUserElement').html(data.html);
                $('#saveBtn').val("create-product");
                $('#user_id').val('');
                $('#productForm').trigger("reset");
                $('#modelHeading').html("Update User");
                $('#ajaxModel').modal('show');
            
        );
    );

【问题讨论】：

您是否在开发者控制台中看到任何错误？

没有错误，但有时结果为空、未定义或object Object

附加从 ajax 调用返回的 html，然后初始化你的 select2 。

@Swati：你能给我写更具体的代码吗？

【参考方案1】：

您的服务器返回 json 作为响应，因此将 dataType: 'json' 添加到您的 ajax 调用中。然后，将数据返回到您的dataUserElement，即：data.html，最后初始化您的 select2。

演示代码：

//suppose data is this :)
var data = 
  'html': '<div class="row"><div class="col-md-6"> <label for="name">Name</label><input value="abc" class="form-control" placeholder="Full Name" type="text" name="name" id="name" /><br><label for="phone">Phone Number</label><input value="12346" class="form-control" placeholder="Phone Number" type="text" name="phone" id="phone" /><br></div><div class="col-md-6"><label for="roles">Role</label><br><select style="width:220px;" name="rolesForEdit[]" multiple id="rolesForEdit" class="rolesForEdit form-control"></select><br></div></div>'


/*$.ajax(
url: "user/" + id + "/edit",
method: 'GET',
dataType:'json',//add this 
success: function(data) */
$('#dataUserElement').html(data.html); //then append this 
var roles = $('#dataUserElement').find(".rolesForEdit") //get select refernce
$(roles).select2(
  ajax: 
    url: "https://api.github.com/orgs/select2/repos", //this is for demo change it to your real url
    processResults: function(data) 
      return 
        results: data.map(function(item) 
          return 
            id: item.id,
            text: item.name
          
        )
      
    
  
);
//all other codes modal ..etc etc
/*
);*/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<div id="dataUserElement">
</div>

【讨论】：

我的天哪...它的工作原理就像一个魅力！谢谢！