Динамически создавать флажки из ответа AJAX

Я создаю веб-сайт с использованием начальной загрузки и хочу отобразить список флажков (имена компьютеров) в модальном диалоговом окне для выбора пользователя. У меня есть вызов AJAX и ответ, который возвращает информацию, которую я хочу, но я не знаю, как правильно ее отобразить. По сути, к каждому элементу в возвращаемом списке, который я получаю, я хочу добавить флажок к списку, отображаемому в модальном режиме. Я делал что-то подобное раньше и чувствую, что я близок, но не совсем понимаю, как это можно сделать. Если бы кто-нибудь мог научить меня, как это сделать, я был бы очень признателен! Мой код javascript/html находится ниже на моей странице JSP. Дайте мне знать, если это неясно или нужна дополнительная информация с моей стороны. Большое спасибо!!!

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

Вот код javascript, который я использую для ответа на мой вызов AJAX.

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

Это фрагмент того, что возвращается, когда я выскакиваю окно сообщения, когда делаю предупреждение в JavaScript.

["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]
Источник

2 ответа

Решение

Ниже приведен пример того, что вы могли бы использовать в своем success Функция для достижения этой цели.

Изменения в том, что у вас было, включают в себя упаковку каждого флажка в <li> и добавив соответствующий <label> для этого.

// 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>

Источник

Этого лучше всего достичь, используя ngRepeat из AngularJS: https://docs.angularjs.org/api/ng/directive/ngRepeat

Если вы включите его в свой проект, я надеюсь, что он снизит 20-30% логики кода, который вы ищете или у которого есть проблемы, подобные этой.

Для получения более подробной информации здесь ссылка: https://angularjs.org/

Наконец, у вас есть и другие варианты, но я просто хотел поделиться с вами самой умной средой в JS.

Удачного кодирования!
:)

Источник
Другие вопросы по тегам