show modal after form submission until 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?

user5200704

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

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

Update 2 opening the post in new window doesn't always work. remove the prop('target', 'blank') line and try again.

Code Example

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

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.

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.

来源：https://stackoverflow.com/questions/36547476/show-modal-after-form-submission-until-next-page-loads-does-not-work-on-safar

标签

javascript

html

bootstrap-modal