Dynamically Create Checkboxes from AJAX Response

问题:

I'm creating a website involving bootstrap and want to display a list of checkboxes (names of computers) in a modal dialog for the user to choose from. I have an AJAX call and response that is returning the information I want but I don't know how to properly display it. Basically, each item that is in the returned list I receive, I want to append a checkbox to the list being displayed in the modal. I've done something similar to this before and feel like I'm close but don't quite understand how something like this can be done. If anyone could teach me how to do this I would greatly appreciate it! My javascript/html code is below from my JSP page. Let me know if this is not clear or more information is needed on my part. Thank you very much!!!

    <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Workstations</h4>
        </div>
        <div class="modal-body">
          <ul id="wkslist"></ul>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Cancel</a>
          <a href="#" class="btn btn-primary">Done</a>
        </div>
      </div>
    </div>
</div>
    </form>
</div>

Here is the javascript code I'm using to the response back from my AJAX call.

    function getWorkstations(e)
{
    var branchName = $('#txtBranch').val();


  if(e.checked)
      {
      $.ajax({
          url : 'ajaxwks.html',
          type: 'POST',
          data: branchName,
          cache:false,
          beforeSend: function(xhr) {


              xhr.setRequestHeader("Content-Type", "text/plain");

          },
          success : function(response) 
          {
             alert(response);

             $.each(response, function(key, value){


                 $('#wkslist').append($("<input type='checkbox' name=" + key + "").text(value) + "<br>");
             });
          },

          error:function(jqXhr, textStatus, errorThrown){
              alert(textStatus);
          }
      });

      //ajax call for workstations.
         $('#myModal').modal('show');
      }
}

This is a snippet of what is returned when I popup the message box when doing an alert in javascript.

["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]

回答1:

Below is an example of what you could use in your success function to accomplish this.

The changes to what you had include wrapping each checkbox in a <li> and adding a corresponding <label> for it.

// sample of response from server
var response = { optionA: 'One', optionB: 'Two', optionC: 'Three' };

// this would go in your ajax success handler
$.each(response, function (key, value) {
    var li = $('<li><input type="checkbox" name="' + key + '" id="' + key + '"/>' +
               '<label for="' + key + '"></label></li>');
    li.find('label').text(value);
    $('#wkslist').append(li);
});

#wkslist {
    list-style-type: none;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wkslist"></ul>

回答2:

This can be best achieved by using ngRepeat from AngularJS: https://docs.angularjs.org/api/ng/directive/ngRepeat

If you include it in your project, I hope it will lower 20-30% of the code logic that you you are searching for or having issues like this.

For further details here is the link: https://angularjs.org/

At last you have other choices too, but I just wanted to share the smartest framework in JS with you.

Happy coding!
:)