CODEWITHSUNDEEP
javascriptdjangopython-2.7jquery-blockui
bob marti
bob marti

Reputation: 1569

javascript blockUI is not working in firefox when submit the form

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

Upvotes: 3

Views: 1353

Answers (2)

dilver
dilver

Reputation: 55

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>

Upvotes: 0

azs06
azs06

Reputation: 3517

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>

Upvotes: 2

Related Questions