Zeige Modal nach dem Senden des Formulars, bis die nächste Seite geladen wird ... funktioniert nicht auf Safari?

Question

Ich habe eine Schaltfläche wie dieses

<form action="/category" method='GET'> 
    <button type="submit" class="btn btn-default render"> 
     name 
    </button> 
</form> 

und ich habe einige Javascript, die eine modale beginnt immer dann, wenn auf die Schaltfläche geklickt wird ... das ist nur der Benutzer weiß, dass die nächste Seite geladen wird. Hier

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".render").click(function(evt){ 
      $('#render_page').modal('show'); 
     }); 
    }); 
</script> 

ist der HTML-Code für den Modal

<div class="modal fade" id="render_page" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="form-horizontal"> 

       <div class="modal-body"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <div id="user_msg" align="left">Rendering Page... </div> 
       </div> 

      </div>         
     </div> 
    </div> 
</div> 

Das alles funktioniert auf Firefox und Chrome, aber Safari zeigt nicht die modale? Wenn ich das Formular in die Schaltfläche einfüge, wird das Modal gestartet, aber das Formular wird nicht gesendet. Also beide Aspekte, die Formulareinreichung und das Modal funktionieren, aber Safari will beides nicht?

Answer 1

versuchen, diese

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".render").click(function(evt){ 
      evt.preventDefault(); 
      $('#render_page').modal('show'); 
     }); 
    }); 
</script> 

https://jsfiddle.net/y64qyjzo/

Update: hinzugefügt einen Timer, damit der Benutzer die modale bemerken:

$(document).ready(function() { 
    $(".render").click(function(evt) { 
    evt.preventDefault(); 
    $('#render_page').modal('show'); 
    setTimeout(function() { 
     $('#testForm').submit(); 
    }, 1000) 
    }); 
}); 

(fügen Sie den id 'Testform' auf die Form)

https://jsfiddle.net/y64qyjzo/3

Answer 2

Es gibt andere Möglichkeiten wie unten angegeben

1: Sie können eine Funktion bei der Formularübergabe aufrufen. Fügen Sie einfach onsubmit="myFunction()" mit dem Funktionsnamen (z. B. myFunction) im Formular-Tag hinzu. Wie unten

gegeben

<form action="/category" method='GET' onsubmit="myFunction()"> 
    <button type="submit" class="btn btn-default render"> 
     name 
    </button> 
</form> 





<script> 
function myFunction() { 
    $('#render_page').modal('show'); 
} 
</script> 

2: können Sie diese Funktion auch durch onclick="myFunction()" Taste in einreichen Hinzufügen rufen.

<form action="/category" method='GET'> 
    <button type="submit" class="btn btn-default render" onclick="myFunction()"> 
     name 
    </button> 
</form> 




<script> 
function myFunction() { 
    $('#render_page').modal('show'); 
} 
</script> 

Ich bin sicher, einer von diesen wird Ihr Problem lösen.

Answer 3

könnte übertrieben sein, aber in Chrom und Safari ohne Probleme getestet, und Sie können die Menge an Zeit steuern, bevor das eigentliche Formular eingereicht wird.

aktualisieren ich Sie fühlen möchte nur ein Benachrichtigungssystem, kein modal .. Besuche toastr

Update 2 die Post in einem neuen Fenster öffnen funktioniert nicht immer. Entfernen Sie die prop('target', 'blank') Zeile und versuchen Sie es erneut.

-CodeExample

// Code goes here 
 
var CustomTimeout = 200; // 200 miliseconds 
 

 
$(document).ready(function() { 
 
    $(".render").click(function(evt) { 
 
    // Stop Form from sending 
 
    evt.preventDefault(); 
 
    // Open Modal 
 
    showModal().then(function() { 
 
     // Send Form 
 
     sendForm(evt, CustomTimeout).then(whateverYouWantToDoNextFunction) 
 
     // fake function 
 
     function whateverYouWantToDoNextFunction() {}; 
 
    }) 
 
    }); 
 
}); 
 

 
function showModal() { 
 
    return new Promise(function(resolve, reject) { 
 
    resolve($('#render_page').modal('show')); 
 
    }) 
 
} 
 

 
function sendForm(e, timeout) { 
 
    return new Promise(function(resolve, reject) { 
 
    console.log("Sending Form", e); 
 
    // Set Your Action and Method manuall 
 
    $("form").prop('action', "/category"); 
 
    $("form").prop('method', "GET"); 
 

 
    // Opens a new window for the submission 
 
    $('form').prop("target", "_blank"); 
 

 
    // Set Timeout 
 
    function submit() { 
 
     setTimeout(function() { 
 
     $('form').submit(); 
 
     // Resolve Submission for chaining 
 
     resolve(console.log("Form Sent Successfully")); 
 
     }, timeout); 
 
    } 
 

 
    // Submit it 
 
    submit(); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <form> 
 
    <button type="submit" class="btn btn-default render"> 
 
     name 
 
    </button> 
 
    </form> 
 

 
    <div class="modal fade" id="render_page" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="form-horizontal"> 
 

 
      <div class="modal-body"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <div id="user_msg" align="left">Rendering Page...</div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 4

Versuchen:

$(document).ready(function(e) { 
 
\t $(".render").click(function(evt){ 
 
\t \t \t evt.preventDefault(); 
 
      $('#render_page').modal('show'); 
 
\t \t \t setInterval(function(){ $("#formID").submit(); }, 3000); \t \t \t 
 
     }); 
 
});

<form action="/category" method='GET' id="formID"> 
 
    <button class="btn btn-default render"> 
 
     name 
 
    </button> 
 
</form>

Ändern Sie den Zeitgeberwert entsprechend Ihrer Wahl.