Alertを入れるときといれない時の違い

質問

Ajaxを使ってプログラムを作っています。

テキストボックスに入力されたデータを元に、AjaxからそのデータをCGIに渡し、戻ってきたデータを計算させて、別のテキストボックスに表示するという簡単なものですが、

そのテキストボックスのセットが5つくらいあって、それぞれ上記のようにCGIから戻ってきたデータを計算させた結果を入れています。
ここまでは希望通りできています。

その戻ってきたデータを入れた５つのテキストボックスの合計をさらに別のテキストボックスに入れるということをしたいのですが、ここがうまくできません。

テキストボックスにAjaxからの値をいれ、値が入っていれば、5つのテキストボックスの合計を計算させるというやり方です。

うまくいかない（合計テキストボックスにNaNと入ってしまう）ので、Alertを使ってどこがおかしいのか調べてみたのですが、Alertを入れると、合計がきちんと出てきます。

Alertを入れないと、NaNと出てきます。

Alertを入れる入れないで、どのような違いがあるのでしょうか。
違いはないような気がするのですが、なぜか入れたらうまくいき、入れないとうまくいきません。

もちろんAlertを入れる以外はなにもプログラムの変更をしていません。

なぜか分からず、ドツボにはまっております。。(泣

Ajaxで入れたデータがテキストボックスにうまく反映されていない？（データを入れたあとにそのテキストボックスを参照しているので。。でも表示はされています。）Alertが出る時間の差が関係あるのかなあと思いましたが、よく分かりません。

おわかりの方いらっしゃいましたら教えて頂けませんでしょうか。

よろしくお願いいたします。

回答No.3

LancerVII · ベストアンサー

こんにちは。

ソースありがとうございました。
拝見しましたがやはり合計を求めるロジックがサーバ呼出し後に呼ばれるメソッド内に無いために起きる現象です。
似たようなのを作って試してみました。
su2の合計だけNaNになりませんか？

サーバ側からレスポンスを返すのをわざと遅くしてみると良くわかるのですが$.ajaxにてサーバ通信を行い、値が返ってくる前に既に合計計算のロジックが動きます。
なので、正確に計算できません。

合計を求める部分のロジックを$.ajaxの中に入れてください。
イメージは
success : function ( result ) {
if ( result != '' ) {
var kekka = result.split(',');
su = parseInt ( kekka[0] );
alert ( "from server = " + su );
$('#A2-'+no).val ( parseInt($('#A1-'+no).val())*su);
}
var su1 = 0;
var su2 = 0;
for ( var i = 1; i <= 5; i ++ ) {
if ( $('#A1-'+i).val() != '' ) {
su1 = parseInt(su1)+parseInt($('#A1-'+i).val());
su2 = parseInt(su2)+parseInt($('#A2-'+i).val());
}
}
$('#kei1').val ( su1 );
$('#kei2').val ( su2 );
}

こんな感じです。

お礼

LancerVIIさん

ご回答ありがとうございました！

はい、su2の合計だけNaNになります。

処理を全部$.ajaxの中に入れないとダメなんですね！
非同期通信。。そういわれてみれば、Ajaxってそうなんですよね。。

基本的なところが抜けておりました！

ご丁寧に教えてくださって本当にありがとうございました！
また何かございましたらぜひよろしくお願いします♪

本当にありがとうございました！！

回答No.2

LancerVII

こんにちは。

合計の出し方は問題ないと思います。

ちょっと試してみましたが、空白でも問題なく計算されているのでNo1の回答はちょっと間違っています。

Ajaxでのサーバ呼び出し部分とサーバからの値を処理する部分、合計を出す部分のソースは出せませんか？

いつどうやって戻ってきた値をセットしていつforで合計を出しているか。

想像で作ってみて試してみているのですが同じような現象にたどり着けませんでした。

お礼

LancerVIIさん

ご回答ありがとうございます。

A1-1といIDのうテキストボックスに入力後、その値を取り出してCGIに渡し、
計算させたあと、A2-1というテキストボックスに入れます。
そのセットが、(A1-1,A2-1),(A1-2,A2-2),(A1-3,A2-3),(A1-4,A2-4),(A1-5,A2-5)とあり、
合計でkei1,kei2のテキストボックスに入れるとします。

noは取得したテキストボックスのIDの枝番です。

$.ajax({
type: 'GET',
url: '******.cgi',
data: 'code=' + $('#A1-'+no).val() ,
success: function(result){
if (result != ''){
var kekka = result.split(',');

su=parseInt(kekka[0]);

$('#A2-'+no).val(parseInt($('#A1-' + no).val())*su);
}
}
});

for(i=1; i<=5; i++){
if($('#A1-' + i).val() != ''){
su1 = parseInt(su1)+parseInt($('#A1-' + i).val());
su2 = parseInt(su2)+parseInt($('#A2-' + i).val());
}
}
$('#kei1').val(su1);
$('#kei2').val(su2);

このような式を書いています。
間違っているところがございましたらご指摘下さい。

お忙しいところありがとうございます。
よろしくお願いいたします。

回答No.1

LancerVII

こんにちは。

ソースが無いので何とも言えませんが、きちんとコールバック時にテキストボックスを参照していますか？

非同期で通信するのでサーバにリクエスト投げた後すぐに計算するロジックになってると値が無いって言われると思います。

コールバック関数内でサーバよりデータを受け取って、それをテキストボックスにセットし、計算を実行する必要があります。

既にそういう作りになっていたら申し訳ございません。

お礼

LancerVIIさん

ご回答ありがとうございました。

例えばAというIDがついたテキストボックスに

$('#A').val(CGIから戻ってきた値を計算させたもの);

このようにテキストボックスに入れて、その後、このテキストボックスを含んだ他のテキストボックスも参照し、forで回して合計を計算させています。

このやり方ですと間違っていますでしょうか。教えて頂けましたら嬉しいです。

よろしくお願いいたします。