2017-01-25 16 views
3

jquery.blockUI.jsをHTMLページに追加してスクリプトで使用しました。私のHTMLページは:フォームを送信するときにjavascript blockUIがFirefoxで動作しない

<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プロジェクトを作成しています。これを行わずにプロジェクトを続行できません。

おかげ

+0

あなたは、任意のJavaScriptコンソールのエラーを表示することができますか?もしそうなら、同じものを貼り付けてください。 –

+0

@AbijithMgエラーなし –

+0

このをhtmlファイルの先頭に含めてみてください。 –

答えて

0

あなたの最初のコードスニペットがエラーを持っているように見える、それはdocument.ready()の結末を欠けています。また、フォームの送信時にデフォルトを防止しようとしました。

これをでテストしましたが、これはFirefoxとChromeで動作しているようです。 With 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> \t 
 
<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){ 
 
\t e.preventDefault(); 
 
\t $.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' }); 
 
}) 
 
}) 
 
</script> 
 
</body> 
 
</html>

+0

これは動作しません –

+0

私はこれを実行するときにエラーが発生しました –

+0

あなたが取得しているエラーを共有できますか、それは私のスニペットで動作しているようです。 – azs06

関連する問題