Modal mit dynamischem Inhalt setzt keinen Wert auf das Textfeld

James Shaver

Ich lade Inhalte in ein Modal und verwende Kontrollkästchen, um E-Mail-Adressen auf ein Textfeld "Empfänger" festzulegen. Wenn ich den Inhalt hart codiere, funktioniert dies einwandfrei. Wenn Sie ihn jedoch von einer externen Ressource laden, füllen die überprüften E-Mail-Adressen das Empfängerfeld nicht aus.

Mir ist klar, dass der Beitrag hier meine lokale Ressource für den dynamischen Inhalt nicht laden wird, daher musste ich den Code verdoppeln. Zuerst ist mein echter Code und dann die Art und Weise, wie er funktioniert.

Original

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load('modalcontacts', function() {
      $('#contactsModal').modal({
        show: true
      });
    });
  });

  $('#contactsearch').hideseek({
    highlight: true,
    nodata: 'No results found'
  });

  $(':checkbox[name="addcontact"]').change(function() {
    var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
        return this.id;
      })
      .get();
    $("input[name='recipients']").val(assignedTo.join("; "));
  });
  /*
   * form validator
   */
  $('#ci-form').validator();
  /*
   * TinyMCE WYSIWYG Editor
   */
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
    paste_data_images: true,
    branding: false,
    skin: "lightgray",
    height: 300
  });
});

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
    <span class="input-group-btn">
                            <button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
                          </span>
  </div>
</div>



<!-- Contacts Modal -->
<div id="contactsModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
      </div>
      <div class="modal-body">
        <p>Loading....</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

Sollte so funktionieren

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load('modalcontacts', function() {
      $('#contactsModal').modal({
        show: true
      });
    });
  });

  $('#contactsearch').hideseek({
    highlight: true,
    nodata: 'No results found'
  });

  $(':checkbox[name="addcontact"]').change(function() {
    var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
        return this.id;
      })
      .get();
    $("input[name='recipients']").val(assignedTo.join("; "));
  });
  /*
   * form validator
   */
  $('#ci-form').validator();
  /*
   * TinyMCE WYSIWYG Editor
   */
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
    paste_data_images: true,
    branding: false,
    skin: "lightgray",
    height: 300
  });
});

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
    <span class="input-group-btn">
			<button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
		  </span>
  </div>
</div>

<!-- Contacts Modal -->
<div id="contactsModal" class="modal fade in" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
      </div>
      <div class="modal-body">
        <div class="contactlist">
          <h3>A</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aaron Aaberg</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aaron Aaby</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abbey Aadland</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abbie Aagaard</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abby Aakre</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abdul Aaland</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abe Aalbers</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abel Aalderink</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abigail Aalund</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abraham Aamodt</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abram Aamot</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Ada Aanderud</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Adah Aanenson</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Adalberto Aanerud</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alda Abdo</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alden Abdon</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aldo Abdool</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alena Abdulmuniem</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <h3>B</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Bob Smith</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
          <h3>C</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Carl Grimes</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[email protected]" value="[email protected]" name="addcontact">[email protected]</label></span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

James Shaver

Herausgefunden. Ich muss ein Ereignis an ein übergeordnetes Element binden, das bereits vor dem Laden des Dokuments vorhanden war.

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load("modalcontacts", function() {
      console.log("loaded");
      $('#contactsModal').modal({
        show: true
      });
    });
  });


  $(document).on('mouseover mouseout', '.contactlist', function() {
    $('#contactsearch').hideseek({
      nodata: 'No results found'
    });

    $(':checkbox[name="addcontact"]').change(function() {
      var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
          return this.id;
        })
        .get();
      $("input[name='recipients']").val(assignedTo.join("; "));

    });
  });
});

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2020-11-28

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Dekodieren Sie in MySQL gespeicherte HTML-Entitäten mit Twig (in Symfony).

TOP Liste

Artikel

Modal mit dynamischem Inhalt setzt keinen Wert auf das Textfeld

Modal mit dynamischem Inhalt setzt keinen Wert auf das Textfeld

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Eclipse Oxygen - Projekte verschwinden

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Wie kann ich den Kaskadenmodus global einstellen?

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Modbus Python Schneider PM5300

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Ärgerliches Problem mit yaml, das ich nicht lösen kann

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

Wie kann ich meine Tabelle abfragen, um sie in mySQL nach 2 Feldern zu gruppieren?

Wie kann eine gleichmäßige Lastverteilung in ElasticSearch mit Indizes mit unterschiedlicher Anzahl von Shards erreicht werden?

ElasticSeach Auto Complete mit dem Vervollständigungsvorschlag, um das vollständige Dokument zurückzugeben

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

Wie wählt man Unterschiede mit drei Tabellen aus?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um