wake-up-neo.net

Schließen Sie das Bootstrap Modal On-Formular

Ich habe ein Bootstrap Modal, das Formular enthält. Der Modal enthält auch die Schaltflächen Senden, Abbrechen und Abbrechen. Nun, gemäß meiner Anforderung, wird beim Senden der Schaltfläche "Senden" des Modals das Formular erfolgreich gesendet, aber Modal wird nicht geschlossen. Hier ist mein HTML-Code.

<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
            <div class="modal-footer">
               <div class="pull-right">
                  <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
               </div>
            </div>
         </form>
      </div>
   </div>

Wie mache ich das .. Bitte hilf mir ..Danke ..

24
Lara

Verwenden Sie diesen Code

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});
17
Muhammad Fahad

Fügen Sie das gleiche Attribut hinzu, das Sie auf der Schaltfläche Schließen haben:

data-dismiss="modal"

z.B.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

Sie können jQuery auch verwenden, wenn Sie möchten:

$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});
13
martincarlin87

iD zum Absenden geben

<button id="btnDelete" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>

$('#btnDelete').click(function() {
   $('#StudentModal').modal('hide');
});

Sie haben auch vergessen, das letzte Div zu schließen.

</div>

Hoffe das hilft.

5
Kandarp

ich mache diesen Code, es funktioniert gut, aber sobald Formular Modell Schaltfläche nicht geöffnet Modell erneut sagen, sagen, dass.preventdefault ist keine Funktion ..

Verwenden Sie den folgenden Code für jedes Ereignis, das beim Absendenformular ausgelöst wird

                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

sie können diesen Code kurz machen ..

wenn irgendein Körper eine Lösung für e.preventdefault gefunden hat, lassen Sie es uns wissen

3
Abhi

Sie können eine dieser beiden Optionen verwenden:

1) Fügen Sie dem Absenden-Button das Löschen der Daten hinzu, d. H.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

2) Mach es wie in JS

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});
2
Mō Iđɍɨɇƶ

Weder das Hinzufügen von data-dismiss="modal" noch die Verwendung von $("#modal").modal("hide") in Javascript funktionierte für mich. Sicher, sie haben den Modal geschlossen, aber die Ajax-Anfrage wird auch nicht gesendet.

Stattdessen habe ich den Part mit den Modalen erneut gerendert, nachdem ajax erfolgreich war (ich verwende Ruby on Rails). Ich musste auch "modal-open" class aus dem body-Tag entfernen. Dies setzt die Modalen grundsätzlich zurück. Ich denke etwas ähnliches, mit einem Rückruf nach erfolgreicher Ajax-Anforderung, die Modals zu entfernen und wieder hinzuzufügen, sollte auch in anderen Rahmenbedingungen funktionieren.

1
EJ2015

Die aufgeführten Antworten funktionieren nicht, wenn die Ergebnisse des Formulars AJAX den HTML-Code außerhalb des Modalbereichs beeinflussen, bevor der Modal-Vorgang abgeschlossen wird. In meinem Fall war das Ergebnis ein ausgegrauter (ausgeblendeter) Bildschirm, auf dem ich die Seitenaktualisierung sehen konnte, aber mit keinem der Seitenelemente interagieren konnte.

Meine Lösung:

$(document).on("click", "#send-email-submit-button", function(e){
    $('#send-new-email-modal').modal('hide')
});

 $(document).on("submit", "#send-email-form", function(e){
    e.preventDefault();
    var querystring = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "sendEmailMessage",
        data : querystring,
        success : function(response) {
            $('#send-new-email-modal').on('hidden.bs.modal', function () {
                $('#contacts-render-target').html(response);
            }
    });
    return false;
});

Hinweis: Mein modales Formular befand sich in einem über-div, das bereits über AJAX gerendert wurde. Daher musste der Ereignis-Listener mit dem Dokument verankert werden.

0
Devon Luongo

wenn Ihr Modal über eine Schaltfläche zum Abbrechen verfügt (erstellen Sie ansonsten eine ausgeblendete Schaltfläche zum Schließen). Sie können das Klickereignis auf dieser Schaltfläche simulieren, sodass Ihr Formular geschlossen wird . Fügen Sie in Ihrer Komponente ein ViewChild

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

fügen Sie in Ihrem Schließen-Button #fileInput hinzu.

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

Wenn Sie das Modal schließen möchten, lösen Sie programmatisch ein Klickereignis auf der Schaltfläche "Schließen" aus

this.fileInput.nativeElement.click();
0

Ich benutze auch Rails und Ajax und hatte das gleiche Problem. Führen Sie einfach diesen Code aus

 $('#modalName').modal('hide');

das hat für mich funktioniert, aber ich versuche, es auch ohne jQuery zu beheben. 

0
Hindreen

Versuchen Sie diesen Code

$('#frmStudent').on('submit', function() {
  $(#StudentModal).on('hide.bs.modal', function (e) {
    e.preventDefault();
  })
});
0
nnattawat

Verwenden Sie diese Option, um das Modal gleichzeitig zu senden und zu schließen

$('#form-submit').on('click', function(e){
    e.preventDefault();
    $('#con-close-modal').modal('toggle'); //or  $('#IDModal').modal('hide');
    $('#date-form').submit();
});
0
utkarsh2k2

Ich hatte das gleiche Problem und bekam es endlich mit diesem Code:

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

Die ausgewählte Antwort hat bei mir nicht funktioniert.

0
tomb