show modal after form submission untill next page loads… does not work on safari?

I have a button like this

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

and I have some javascript which starts a modal whenever the button gets clicked... this is just to let the user know that the next page is loading.

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

Here is the html for the 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> 

This all works fine on Firefox and Chrome, but Safari does not show the modal? If I put the form within the button, it starts the modal, but it does not submit the form. So both aspects, the form submission and the modal do work, but safari does not want to do both? Any ideas how to fix this? thanks carl

4 Answers

Answers 1

try this

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

https://jsfiddle.net/y64qyjzo/

Update: added a timer to allow the user to notice the modal:

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

(add the id 'testForm' to the form)

https://jsfiddle.net/y64qyjzo/3

Answers 2

Try :

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

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

change timer value according to you choice.

Answers 3

There some other ways as given below

1: you can call a function on form submission. Just Add onsubmit="myFunction()" with function name (e.g myFunction) in form tag. As given below

<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: you can also call this function by adding onclick="myFunction()" in submit button.

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

I am sure one of these will solve your issue.

Answers 4

might be overkill, but tested in chrome and safari with no issues, and you can control the amount of time before the actual form is submitted.

Update I feel you just want a notification system, not a modal .. check out toastr

Example

Code

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

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati