Dynamisch Checkboxen Erstellen von AJAX-Antwort

Ich bin erstellen einer Webseite mit bootstrap und wollen, um eine Liste von Checkboxen (Namen von Computern) in ein modales Dialogfeld für den Benutzer zu wählen. Ich habe ein AJAX-Aufruf und Antwort, die Rücksendung der Informationen, die ich will, aber ich weiß nicht, wie korrekt darzustellen. Grundsätzlich wird jedes Element in der zurückgegebenen Liste, die ich erhalten habe, möchte ich Anhängen ein Kontrollkästchen, mit dem die Liste angezeigt wird, in der modal. Ich habe etwas ähnliches gemacht, um das vorher und das Gefühl, ich bin in der Nähe, aber nicht ganz verstehen, wie so etwas getan werden kann. Wenn jemand könnte mir beibringen, wie dies zu tun ich würde es sehr zu schätzen! Meine javascript - /html-code ist unten aus meiner JSP-Seite. Lassen Sie mich wissen, wenn dies nicht klar ist oder weitere Informationen benötigt auf meinem Teil. Ich danke Ihnen sehr!!!

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

Hier ist der javascript-code, den ich verwende, um die Antwort zurück von meiner 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');
      }
}

Dies ist ein Ausschnitt von dem, was zurückgegeben wird, wenn ich popup-Meldungsfeld, wenn dabei eine Warnung in javascript.

["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]
  • können Sie uns zeigen, den Inhalt response?
InformationsquelleAutor Tastybrownies | 2014-11-01
  1. 5

    Unten ist ein Beispiel, was man nutzen könnte, in Ihrem success Funktion, um dies zu erreichen.

    Die änderungen zu dem, was Sie hatten, beinhalten Verpackung jeder checkbox in einer <li> und das hinzufügen eines entsprechenden <label> für Sie.

    JS:

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

    CSS:

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

    HTML:

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

    • Danke für deine ausführliche Antwort und code-Beispiel, das ist das, was ich suchte. Ich werde versuchen, diese und Bericht in Kürze wieder, danke nochmal.
    • Ihre Antwort hat mir geholfen, auf die Idee kommen was zu tun ist und diesen link gefüllt in die letzten details und ist ein tolles Beispiel dafür, auf mehreren Grundlagen. gist.github.com/zuch/3720842
    • Froh, es zu hören, und danke für das feedback!
    InformationsquelleAutor Troy Gizzi
  2. 2

    Dies kann am besten erreicht, indem ngRepeat von AngularJS:
    https://docs.angularjs.org/api/ng/directive/ngRepeat

    Wenn Sie in Ihr Projekt einbinden, ich hoffe, es wird unteren 20-30% der code-Logik, dass Sie Sie suchen oder haben Fragen wie diese.

    Für weitere details hier der link:
    https://angularjs.org/

    Endlich haben Sie andere Möglichkeiten auch, aber ich wollte nur zu teilen, der Klügste framework in JS mit Sie.

    Happy coding!

    🙂

    InformationsquelleAutor Manish Gupta
Schreibe einen Kommentar