Get Id From AJAX Response And Use The Id For Select2

I write HTML code in controller

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]);
}

And then in view, I am trying to get rolesForEdit id and use it for select2. It doesn’t work with this way. Any solution?

$.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');
            }
        });
    });

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your server return json as response so add dataType: 'json' to your ajax call. Then , append data return to your dataUserElement i.e : data.html and finally intialize your select2 .

Demo Code :

//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" rel="nofollow noreferrer noopener" />
<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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0