jQueryのblockUIをformのボタンから呼ぶ際に、うまくいか

解決済

質問者：sf1234
質問日時：2010/10/03 23:01
回答数：2件

jQueryのblockUIをformのボタンから呼ぶ際に、うまくいかない。

blockUIを以下のように呼んでいます。
<script type="text/javascript" src="jquery/plugin/jquery.blockUI.js"></script>

<script type="text/javascript">
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);

$(document).ready(function() {
$('#run').click(function() {
$.blockUI({ message: '<h1>お待ちください...</h1>' });
$.ajax({ url: 'xxxx', cache: false });
});
});
</script>

その上で、
<input id="run" type="submit" value="お待ちください" />
というボタンを単独でつけて押すと、「お待ちください」と表示するところまで
確認できています。

最終的に実現したいことは、formのsubmitボタンを押すことにより、
パラメータを渡した上で、cgiプログラムを実行することです。

<form action="cgi-bin/search.cgi" method="post">
この中に選択条件（パラメーター）
<input id="run" type="submit" value="検索開始">
</form>
現在、blockUIを使わずに、submitボタン押すと、検索CGIが適切に
動くことは確認できています。

そこで、
form action=にどのように書けばパラメーターを持ったまま、BlockUIを呼べるのか。
$.ajax({ url: 'xxxx', cache: false }); の　url部分にどのように記述すると
cgiを呼べるのか。（cgi-bin/search.cgi）では動きませんでした。

そのあたりをご教授お願いいたします。
blockUIの解説ページでは、CGIの実行や別ページへの遷移のサンプルがなく
困っております。

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yyr446
回答日時：2010/10/04 17:00

補足、

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>

- 0
- 件

通報する

この回答へのお礼

ご丁寧に回答いただいていたにもかかわらず。
気づいておらずにお礼書きもれ、大変失礼いたしました。
本当に申し訳ございませんでした。
教えていただいたように今後試してみます。

通報する

お礼日時：2011/11/07 19:40

No.1

回答者： yyr446
回答日時：2010/10/04 16:46

誤解されてる部分が、あるかと思います。

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); //　＜－例です
　 }
　 });
　});
});