javascript blockUI is not working in firefox when submit the form

Question

I add jquery.blockUI.js to my html page and I used it in the script. My HTML page is:

<form class="form-horizontal" role="form" id="form" method="POST" >
    <button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form>
{% block customjs %}
    <script src="js/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(document).ajaxStop($.unblockUI);
        $(document).ready(function() {
            $("#form").submit(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' }); 
        });
    </script>
{% endblock %}

This is not working in Firefox 50.1.0 version. When I use this into the submit block it will not work. I tried the onclick method in button.

<button type="submit" class="btn btn-default btn_red" id="btnSubmit" onclick="testing()">Submit</button>
<script>
    function testing() {
        $.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
    }
</script>

It did not worked. Finally I tried this also,

$("#btnSubmit").click(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' }); 
});

This is also not working in firefox. But worked in Chrome. So please give me a solution how to run this on firefox. I am creating a python django project and I can't continue my project without getting this done.

Thanks

Are you able to see any javascript console errors? If so paste the same.. — Abijith Mg, Mar 23 '17 at 11:39
You have one '})' missing in document.ready. But it wouldn't work in Chrome also it might be missing due to copy/paste ... — Gagik Sukiasyan, Mar 23 '17 at 19:25
@bobmarti. Have you tried setting `applyPlatformOpacityRules` to `false` inside the `blockUI(...)`, like this: `$.blockUI({ message: 'message here', applyPlatformOpacityRules: false})` ? — nik_m, Mar 24 '17 at 12:28
I tried this also http://stackoverflow.com/questions/35524584/block-ui-js-file-is-not-working-for-the-first-time-operation-in-mozilla-browser — bob marti, Mar 24 '17 at 13:33

score 2 · Answer 1 · answered Mar 28 '17 at 11:27

Your first code snippet seems to have error, it's missing ending of document.ready(). Also have you tried preventing default on form submit.

I have tested this with preventDefault() and seems to be working on firefox and chrome. Withount preventDefault() there should be error on console after submit.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form class="form-horizontal" role="form" id="form" method="POST" >
    <button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI); 
$(document).ready(function(){
$("#form").submit(function(e){
 e.preventDefault();
 $.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
})
})
</script>
</body>
</html>

Could you share the error you are getting, it seems to be working on my snippet. — azs06, Apr 18 '17 at 15:38
Hi @azs06, I ran your code, the BlockUI shows up but the Form is not sent for processing ! The submit doesn't work anymore. Do you have an idea ? — HamzDiou, Oct 24 '18 at 13:33

score 0 · Answer 2 · answered Jul 07 '19 at 23:12

The code from the answer before don't allow the execution of the form, at least in sails.js, but I erased the line e.preventDefault() and everything works.

<!DOCTYPE html>
<html>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="http://malsup.github.io/jquery.blockUI.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Multiple file upload in Sails</title>
</head>
<body>
<!-- enctype="multipart/form-data" -->
<form id="uploadForm"
      enctype="multipart/form-data"
      action="/file/upload"
      method="post">
        <input type="file" name="uploadFile" multiple/>
        <input type="submit" value="submit"/>
</form>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function(){
$("#uploadForm").submit(function(){
    $.blockUI({ message: '<h4><img src="/images/6.gif" />Please wait...</h4>' });
})
})
</script>
</body>
</html>

javascript blockUI is not working in firefox when submit the form

2 Answers2