jQuery で ajax をトライしてみようと勉強し始めていますが、質問がありますのでよろしくお願いします。

IE10でテストしています。

1. 以下の補足にあるコードが ajax というのかよくわかりませんが、 $.ajax であっさりpostできてしまい mysql に書き込むことができました。
  そこで、$.ajax の処理が完了するまで form の submit ボタンをグレーアウトにし、完了したらアクティブにするというのはできますか?
  あと、通信エラーなどの処理でアドバイスがあればよろしくお願いします。


2. 以下2つは何か違うのですか?どっちを書いても動きます。今のところ。
  ・<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  ・<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/11 17:01:00
  • 終了:2013/10/12 00:17:50
id:appfb

質問者から

appfb2013/10/11 18:16:29
<!DOCTYPE html>
<html lang="ja">
<head>
	<{$content_type|smarty:nodefaults}>
	<link rel="stylesheet" href="<{$root_surl}>css/master.css" type="text/css">
<!--<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<script>
	var select_id = 0;

//--- ラジオボタン
function quesFunc(){
	if(select_id == this.id) return;
	$(this).addClass("selected");
	$("#" + select_id).removeClass("selected");
	select_id = this.id;
	var str = $("#" + select_id).text();

	$(".nextBtn input[name='cselect']").val(select_id);
	$(".qSelect").text(str);
	ajaxQuestion();
}

//--- ajax
function ajaxQuestion(){
	var id = '<{$xid}>';
	$.ajax({
		type: 'post',
		url: 'ajax_question.php', 
		data: {id:xid, selectid:select_id}, 
		success: function(data){
		} 
	}); 
}

$(function(){ //---回答処理
	$("ul>li").click(quesFunc);
});
	</script>

</head>

<body>
	<ul>
		<li id="1">aaaaa</li>
		<li id="2">bbbbb</li>
		<li id="3">ccccc</li>
	</ul>

	<form class="nextBtn" action="<{$app_url}>" method="post" target="_self">
		<input type="hidden" name="cselect" value="">
		<input type="submit" value="次へ">
	</form>

</body>
</html>

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4561ベストアンサー獲得回数19052013/10/11 19:26:48

ポイント100pt

そこで、$.ajax の処理が完了するまで form の submit ボタンをグレーアウトにし、完了したらアクティブにするというのはできますか?
あと、通信エラーなどの処理でアドバイスがあればよろしくお願いします。

まずは、ajaxQuestion() 関数をちょっといじってみましたので、それを見てください。

function ajaxQuestion(){
    // submit ボタンを無効化しておく
    $(".nextBtn input[type='submit']").attr("disabled", true);  // ★

    var id = '<{$xid}>';
    $.ajax({
        type: 'post',
        url: 'ajax_question.php', 
        data: {id:xid, selectid:select_id}, 
        success: function(data){
            // 成功したら submit ボタンを有効にする
            $(".nextBtn input[type='submit']").attr("disabled", false); // ★
        },  // ← カンマをつけてます 
        error: function(jqXHR, status, error) {
            // ここにエラー処理を書きます

            // エラーのときもsubmit ボタンを有効にしておく
            $(".nextBtn input[type='submit']").attr("disabled", false); // ★
        }
    }); 
}

submit ボタンの無効化については、お尻に「★」をつけた行を見てください。

エラー処理については、$.ajax() のパラメータで error を指定することで行います。
パラメータの意味についてはマニュアルをご覧ください。
settings の中の error の項目です。
http://api.jquery.com/jQuery.ajax/

基本的に、error で指定した処理に渡るときは、にっちもさっちも行かなくなっていると思うので、status の値を見ずに「ごめんなさい」だけでも良いような気もします。


2. 以下2つは何か違うのですか?どっちを書いても動きます。今のところ。

同じものです。
code.jquery.com の方が本家なので、新しいバージョンのものは、こちらから先にアクセスできるようになると思います。
ajax.googleapis.com の方は、Google がホスト(提供)してくれているものです。

Google は、jQuery の他にも、色々なライブラリをホストしてくれています。
https://developers.google.com/speed/libraries/devguide?hl=ja

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4561ベストアンサー獲得回数19052013/10/11 19:26:48ここでベストアンサー

ポイント100pt

そこで、$.ajax の処理が完了するまで form の submit ボタンをグレーアウトにし、完了したらアクティブにするというのはできますか?
あと、通信エラーなどの処理でアドバイスがあればよろしくお願いします。

まずは、ajaxQuestion() 関数をちょっといじってみましたので、それを見てください。

function ajaxQuestion(){
    // submit ボタンを無効化しておく
    $(".nextBtn input[type='submit']").attr("disabled", true);  // ★

    var id = '<{$xid}>';
    $.ajax({
        type: 'post',
        url: 'ajax_question.php', 
        data: {id:xid, selectid:select_id}, 
        success: function(data){
            // 成功したら submit ボタンを有効にする
            $(".nextBtn input[type='submit']").attr("disabled", false); // ★
        },  // ← カンマをつけてます 
        error: function(jqXHR, status, error) {
            // ここにエラー処理を書きます

            // エラーのときもsubmit ボタンを有効にしておく
            $(".nextBtn input[type='submit']").attr("disabled", false); // ★
        }
    }); 
}

submit ボタンの無効化については、お尻に「★」をつけた行を見てください。

エラー処理については、$.ajax() のパラメータで error を指定することで行います。
パラメータの意味についてはマニュアルをご覧ください。
settings の中の error の項目です。
http://api.jquery.com/jQuery.ajax/

基本的に、error で指定した処理に渡るときは、にっちもさっちも行かなくなっていると思うので、status の値を見ずに「ごめんなさい」だけでも良いような気もします。


2. 以下2つは何か違うのですか?どっちを書いても動きます。今のところ。

同じものです。
code.jquery.com の方が本家なので、新しいバージョンのものは、こちらから先にアクセスできるようになると思います。
ajax.googleapis.com の方は、Google がホスト(提供)してくれているものです。

Google は、jQuery の他にも、色々なライブラリをホストしてくれています。
https://developers.google.com/speed/libraries/devguide?hl=ja

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません