- ベストアンサー
formのsubmitボタンからjQueryのblockUIを呼ぶ方法は？
- jQueryのblockUIをformのsubmitボタンから呼ぶ方法について教えてください。
- formのsubmitボタンを押すことで、パラメータを渡してcgiプログラムを実行し、同時にblockUIを表示したいです。
- 現在はblockUIを使わずにsubmitボタンを押すと検索CGIが動作していますが、blockUIを適用する方法が分かりません。お手数ですが、教えていただけますか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
補足、 ajax.start:でブロックしたんじゃ使い道がないですね。 クリック時点でブロックして、ajax成功したらアンブロックしましょう。 ※（全角空白は半角空白に変えてください） <body> <form id="sub_form"> <input name="parm1" value="hoge"> <input name="parm2" value="fuga"> <input id="run" type="button" value="検索開始"> </form> <div id="result"></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="/jslib/jquery.blockUI.js"></script> <script type="text/javascript"> $(function(){ $('#run').click(function() { $.blockUI({ message: '<h1>お待ちください...</h1>' }); $.ajax({type:"POST",url:"cgi-bin/search.cgi",cache:false, data:$("#sub_form").serialize(), success:function(data){ $.unblockUI(); $("#result").html(data); } }); }); }); </script> </body>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
誤解されてる部分が、あるかと思います。 ajaxというのはページ遷移をともなわずにcgiへのリクエストを受け取る 機能です。フォームのサブミットはajaxリクエストではありません。 おっしゃてるイメージを無理やりajaxで書けば↓となります。フォームのサブミット はしません。 <form id="sub_form"> <input name="parm1" value="hoge"> <input name="parm2" value="fuga"> <input id="run" type="button" value="検索開始"> ＜＝注意サブミットじゃない </form> <div id="result"></div> <script type="text/javascript"> $(function(){ $('#run').click(function() { $.ajax({type:"POST",url:"cgi-bin/search.cgi",cache:false, // フォームのエレメントをpostパラメーターにシリアライズ data:$("#sub_form").serialize(), start:function(){$.blockUI({ message: '<h1>お待ちください...</h1>' })}, success:function(data){ $.unblockUI(); alert("検索終了しました"); $("#result").html(data); // ＜－例です } }); }); });
お礼
ありがとうございました。 ご回答いただいたとおり、根本的に勘違いしていたようです。 丁寧な回答ありがとうございました。 かきこんでいただいたコードを参考にしてみます。
お礼
ご丁寧に回答いただいていたにもかかわらず。 気づいておらずにお礼書きもれ、大変失礼いたしました。 本当に申し訳ございませんでした。 教えていただいたように今後試してみます。