Bootstrap-modal-toggle() und modal('show') anders zu Verhalten

Ich bin mit bootstrap 3.3.7 und ich habe einen modalen dialog mit einem Formular. Für die überprüfung der form habe ich die jquery-Validierung 1.16.0.

Zeige ich die modal mit:

$('#myModal').modal('show');

Registriere ich eine Funktion für die senden-Schaltfläche klicken, die prüft, ob die Validierung erfolgreich mit:

$('#myForm').valid()

und wenn dem so ist, macht einen ajax-call.
Der submit-button aktiviert ist, wie dies:

<button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary">Do</button>

Das Problem ist, dass das modal geschlossen wird, auch wenn die Validierung des Formulars fehlschlägt. Wenn das modal wird wieder angezeigt, der Fehler bei der überprüfung der Nachrichten da sind, also die Prüfung selbst durchführt, richtig, es ist nur der dialog, wird entlassen.

Habe ich es geschafft, dieses Problem zu lösen, indem die modal mit:

$('#myModal').toggle();

statt modal('show').
Jedoch, ein neues ärgernis erschien, das modal ist, nicht die scroll-in der Lage mehr, die ich hatte, zu lösen, indem Sie die Einstellung style="overflow-y: scroll;" auf den modal div.

Also, meine 2 Fragen sind:

  1. Was ist der Unterschied zwischen dem anzeigen eines modalen mit toggle() vs
    modal('show'), dass hielt die modal wird abgewiesen, wenn die
    Formular-Validierung fehlgeschlagen?
  2. Warum toggle() macht die modal
    non-scroll-in der Lage?

Dank.

Aktualisiert

Wie gewünscht, habe ich einige relevante code.

Den relevanten HTML:

<input type="button" id="btnShow" value="Show modal" />

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-body">
            <form id="myForm" class="well form-horizontal">
                <div class="form-group">
                    <label for="inputName">Name</label>
                    <div>
                        <input class="form-control"
                               required 
                               type="text"
                               id="inputName"
                               name="inputName"
                               data-val="true"
                               data-val-required="The name is required." />
                        <div class="text-danger" data-valmsg-for="inputName" data-valmsg-replace="true"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary">Do</button>
        </div>
    </div>
</div>

Dem Skript:

$('#btnShow').click(function() {
  $('#myModal').modal('show');
});

$('#btnDo').click(function() {
  console.log('Is my form valid? - ' + $('#myForm').valid());
});
Auch, es gibt nicht annähernd genug hier gezeigte code, der zur Wiedergabe einer demo.
Es war ein Tippfehler, es ist '#myForm', die Validierung funktioniert. Ich habe einige relevante code. Danke.
FYI - .toggle() ist einfach eine jQuery-Methode schaltet die Sichtbarkeit eines hidden Elements... es hat nichts bestimmtes zu tun, mit modals.
... daher meine Verwirrung. 🙂 Aber dann denke ich .modal('show') nicht mehr als nur mit der modalen...
Standardmäßig werden die modalen s-Taste ist wahrscheinlich immer die Klage auf click ohne jede Rücksicht auf Ihren Wunsch offen zu halten, wenn die Validierung fehlschlägt. Wieder, finden Sie die Optionen für die .modal() Methode offen zu halten, auch wenn Sie mit der Schaltfläche interagieren. Dann innerhalb der .validate() Methode, kann man getrost programmgesteuert innerhalb der submitHandler.

InformationsquelleAutor Paul | 2017-05-06

  1. 0

    Was ist der Unterschied zwischen dem anzeigen eines modalen mit toggle() vs modal('show'), ...

    jQuery .toggle() einfach blendet ein element. Bootstrap ist .modal() erstellt ein modales... nicht das gleiche wie einfach das Umschalten der Sichtbarkeit.

    ... das hielt den modal wird abgewiesen, wenn die Formular-Validierung fehlgeschlagen?

    Mithilfe der data-dismiss="modal" Attribut innerhalb Ihres Knopf, sagen Sie den .modal() Methode zum schließen des modal, wenn der button geklickt wird. Es kümmert sich nicht, dass Sie haben eine ungültige form im inneren.

    Entfernen data-dismiss="modal" von deinem button und programmgesteuert schließen Sie das modal nur, wenn das Formular gültig ist.

    submitHandler: function(form) { //only fires on valid form
    //handle your form submission:
    //$(form).submit(); //regular submission
    //OR
    //your Ajax         //Ajax submission

    //then close the modal
    $('#myModal').modal('hide');
}

    Warum toggle() lässt den modal non-scroll-in der Lage?

    Da die Größe des Elements wird berechnet, wenn die Seite aufgebaut ist. Die .toggle() Methode verwendet die ursprüngliche Größe und berücksichtigt nicht alle dynamischen änderungen, wenn das element wieder ausgeblendet.

    Wenn Sie möchten, eine modal, sollten Sie .modal() wie vorgesehen, sonst mit .toggle() du bist nicht die Umsetzung eines modalen überhaupt.

    Danke, Sparky.

    InformationsquelleAutor Sparky

Schreibe einen Kommentar