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の実行や別ページへの遷移のサンプルがなく
困っております。
宜しくお願いします。
No.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>
ご丁寧に回答いただいていたにもかかわらず。
気づいておらずにお礼書きもれ、大変失礼いたしました。
本当に申し訳ございませんでした。
教えていただいたように今後試してみます。
No.1
- 回答日時:
誤解されてる部分が、あるかと思います。
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); // <-例です
}
});
});
});
ありがとうございました。
ご回答いただいたとおり、根本的に勘違いしていたようです。
丁寧な回答ありがとうございました。
かきこんでいただいたコードを参考にしてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Ajax サーバーに負荷かかります...
-
AjaxでJSONを受信すると、文字...
-
JavascriptからPHPへのAjax通信...
-
jQuery3 reset()が効かない。
-
JavaScriptでtabindexの変更っ...
-
一定時間ごとに表示内容を切り...
-
background をフェードしながら...
-
Selenium4でボタンをクリックで...
-
jqueryのslideUpについて質問で...
-
【再質問】計算(入数*単価)...
-
階層別の組織図の自動作成について
-
【javascript文法】 prototype...
-
backbone.js テンプレートの表...
-
親フレームの存在確認
-
複数の特定のURLからのみアクセ...
-
.txtファイルの読み込み
-
画面移遷なしで画像アップロー...
-
location.replaceでの移動
-
XMLHttpRequest()で、読み込む...
-
onloadで動かない<DHTML+AJAXア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
AjaxでJSONを受信すると、文字...
-
jQuery3 reset()が効かない。
-
Ajax サーバーに負荷かかります...
-
eval、$.eachで順番が入れ替わ...
-
ajaxからphpにpsotしたときの日...
-
jQuery を外部ファイルから呼び...
-
ajaxでPHPにPOST送信して結果デ...
-
JQueryの変数の扱いで弱ってい...
-
jQuery,Ajaxでcgiに接続する方...
-
Ajax・jQueryでGET時にIE...
-
ajax + PHPによるエラーの返し...
-
jquery × php × mysql 非同期で...
-
Ajaxでフォームデータを連続登...
-
Ajax・jQueryでGETとPOSTする方法
-
ajax&php post 一部更新
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
おすすめ情報