提交表单时javascript blockUI在Firefox中不起作用答案

【问题标题】：javascript blockUI is not working in firefox when submit the form提交表单时javascript blockUI在Firefox中不起作用
【发布时间】：2017-06-10 22:25:32
【问题描述】：

我将jquery.blockUI.js 添加到我的html 页面并在脚本中使用它。我的 HTML 页面是：

<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 %}

这不适用于 Firefox 50.1.0 版本。当我在提交块中使用它时，它将不起作用。我尝试了按钮中的onclick 方法。

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

它没有用。最后我也试过了，

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

这在 Firefox 中也不起作用。但在 Chrome 中工作。所以请给我一个解决方案如何在Firefox上运行它。我正在创建一个 python django 项目，如果没有完成，我将无法继续我的项目。

谢谢

【问题讨论】：

你能看到任何 javascript 控制台错误吗？如果是这样粘贴相同..
@AbijithMg 没有错误
尝试在 html 文件的顶部包含这个。
我将它包含在我的 html 中
您在 document.ready 中缺少一个 '})'。但它在 Chrome 中不起作用，也可能由于复制/粘贴而丢失......

标签： javascript django python-2.7 jquery-blockui

【解决方案1】：

之前答案中的代码不允许执行表单，至少在sails.js中，但我删除了 e.preventDefault() 行，一切正常。

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

【讨论】：

【解决方案2】：

您的第一个代码 sn-p 似乎有错误，它缺少 document.ready() 的结尾。您还尝试过防止表单提交的默认设置。

我已经使用preventDefault() 对此进行了测试，并且似乎正在使用 Firefox 和 chrome。如果没有preventDefault()，提交后控制台应该会出错。

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

【讨论】：

你能分享你得到的错误吗，它似乎在我的 sn-p 上工作。
嗨@azs06，我运行了你的代码，BlockUI 出现了，但没有发送表单进行处理！提交不再起作用。你有什么想法吗？