javascript blockUI is not working in firefox when submit the form

Question

javascript blockUI is not working in firefox when submit the form

1.2k Views Asked by bob marti At 25 January 2017 at 16:28

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

Original Q&A

There are 2 best solutions below

**azs06** · Answer 1 · 2017-03-28T11:27:39.767000

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>

**dilver** · Answer 2 · 2019-07-07T23:12:23.660000

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DJANGO

Related Questions in PYTHON-2.7

Related Questions in JQUERY-BLOCKUI

Trending Questions

Popular # Hahtags

Popular Questions