show modal after form submission until next page loads... does not work on safari?

Question

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?

Try moving it to the top (I prefer in head), then it loads before the page is shown. — Poul Bak, Apr 11 '16 at 11:43
ok moving it to the header does not solve the problem... and adding a return 0 does also not solve it... — carl, Apr 11 '16 at 11:50
i try your code and its work fine in safari. Can you tell me what version of safari do you have? — Thomas Karachristos, Apr 14 '16 at 19:15
ok I just try this https://jsfiddle.net/TomKarachristos/6otj1hh9/ in safari 9.1 and works fine! Give more details. — Thomas Karachristos, Apr 15 '16 at 14:27
@TomKarachristos That's funny. In the Windows Safari, jsfiddle doesn't even work. I mean the site, not your link. — Siderite Zackwehdex, Apr 20 '16 at 12:10
If you want to submit, but also keep interacting with the page, may I suggest AjaxForm http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form ? — Siderite Zackwehdex, Apr 20 '16 at 12:30

score 6 · Answer 1 · edited Apr 20 '16 at 12:22

6

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

edited Apr 20 '16 at 12:22

Siderite Zackwehdex

5,397
2
22
40

answered Apr 16 '16 at 06:17

user5200704

1,619
8
10

his user... preventDefault does prevent the form submission... using this the modal is indeed shown, but I also need to have the form submitted – carl Apr 16 '16 at 07:57
Hi user. Thanks for that fiddle. This sort of works, but there are two questions I have. 1. How can I add a variable to the form submission? Moreover I don't quite like the 1 second wait... is there a way to reduce this? I played around with it and putting the wait timer to 1 instead of 1000 prevents (again) the modal from being shown... – carl Apr 16 '16 at 18:21
You can remove interval and directly called $('#testForm').submit(); after model show funciton or you can also set 1 in interval. I am not understand about form variable pls give me full details. – user5200704 Apr 17 '16 at 03:40
hi... I tested it and the modal does not appear if the delay for the setTimeout function is 100 or if I remove the setTimeout function... if I set the setTimeout delay to 1 second it does work... but it seem like a very suboptimal solution? – carl Apr 18 '16 at 14:24
carl, the modal doesn't appear if the submit (meaning an entire page refresh) is fast enough. The page just gets reloaded before the modal shows up or you are able to register it. That is why you need a timeout of at least half a second, to allow the modal to load and the user to see it. @user5200704 has answered your question and it works, as you commented above. If you want to ask another question, create another. If the solution doesn't work for you it's because your approach is flawed, not because of the answer itself. – Siderite Zackwehdex Apr 20 '16 at 12:26

4UmNinja · Answer 2 · 2016-04-20T17:35:18.447

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>

hi... thanks for the post... I agree, this works when setting the timeout to 200 milliseconds, but it does not work when setting this time to 100 or 1... — carl, Apr 20 '16 at 10:20
what part is 'not working'? I have a generic action url and the post itself is opening in a new winow `$('form').prop("target", "_blank");`. is the data not being posted or the modal not showing up? — 4UmNinja, Apr 20 '16 at 17:19
the modal is not showing up... all other parts work, the form is send. On Chrome the modal does show but not on safari? — carl, Apr 20 '16 at 20:47
might be a windows thing. do you have the latest jQuery & BS? .. [Updated](https://jsfiddle.net/y64qyjzo/3/) @user5200704 fiddle to include timeout. if you put to < 100ms timeout, the modal shows and disappears too quick [shown here](http://imgbox.com/ORDox3hC). if you want modal to stay, you must use $http instead of submitting post through form element. — 4UmNinja, Apr 20 '16 at 21:30

score 2 · Answer 3 · answered Apr 19 '16 at 22:23

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.

nope non of those solved the issue... all of them work fine on Chrome though. The javascript code runs without trouble (I tested it with console outputs), but the show modal command does not do what is expected.... — carl, Apr 20 '16 at 08:45

score 2 · Answer 4 · answered Apr 20 '16 at 12:25

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.

show modal after form submission until next page loads... does not work on safari?

4 Answers4

Linked