2012-04-05 11 views
2

は、以下のコードは、Firefox(バージョン11.0)にしかしChromeとIEの両方でjQueryのAjaxのFirefoxのエラー

$.get("../ajax/BTBookAppointment.aspx?dsl=" + telNumberBox.value + "&date=" + requiredDate.value + "&timeslot=" + ddTimeslot.value, function (response, status, xhr) { 
//DO some stuff 
}); 

を正常に動作するコールバック関数がヒットされることはありません。私はブレークポイントで火薬爆弾を使用し、コールバックが入力されていないことを確認しました。ページが更新されているように見えますが、以前にJavaScriptで表示されていた要素が再び表示されます。

私はバグの可能性やそれをさらにデバッグする方法を失っています。アドバイスをいただければ幸いです。

EDIT:FiddlerとFirebugは、HTTP getを表示しません。私も$明示的に.get(下記参照)と

EDIT2同じ動作を取得書き出す試してみました:私はダーリンディミトロフが言及した提案を試みたが、それはまだ同じ行動をexibits(ページポストバックするときにボタンがクリックされます)。ここにコードがあります。

Javascriptを

function bookAppointment() { 

    var url = "../ajax/BTBookAppointment.aspx"; 
    var dsl = "01753893530" 
    var date = "20-04-2012"; 
    var timeslot = "PM"; 

    var data = { dsl: dsl, date: date, timeslot: timeslot }; 

    $.ajax({ 
     url: "../ajax/BTBookAppointment.aspx", 
     data: data, 
     success: function (response, status, xhr) { 
     alert('into callback'); 
     }, 

    }); 

    return false; 
} 

HTML

<button id="btnBookAppointment" onclick="bookAppointment();"> Book</button> 
+0

http://api.jquery.com/jQuery.get/ jQuery 1.5+を使用している場合は、 'error()'ハンドラを追加することをお勧めします。たぶん、FFがエラーに陥るでしょうか? '$ .get(...)。error(function(){...});' –

+3

FireBugのネットワークタブもチェックします。 –

+0

firefoxのネットワーキングタブをチェックして、フィドラーを実行しました。 GETは呼び出されません(ネットワークトラフィックは表示されません) –

答えて

2

私は理由はわかりませんが、bookAppointment()がfalseを返す場合でも、ボタンがまだFFでデフォルトの動作(ポストバック)を引き起こしているようです。ボタンにfalseを返すことを追加すると、修正されたものが修正されました(下記参照)。

<button id="btnBookAppointment" onclick="bookAppointment();return false;"> 
+0

Tom、これを投稿していただきありがとうございます。それは大きな助けとなった。私はAJAXの呼び出しがFFやChromeではなくIEで動作していた理由を調べようとしています。 –

4

問題があなたの質問に提供された情報からかもしれないものを言うのは難しいです。 FireBugのNetworkタブにリクエストが送信されていないことを確認して、ページが更新されると言っています。これは、発射を妨げるAJAX呼び出しの前にコード内にいくつかのJavaScriptエラーがあるためです。また、DOM要素のクリックまたはサブミットハンドラでこのAJAXリクエストを呼び出す場合は、このコールバックからfalseを返すことによってデフォルトイベントをキャンセルすることもできます。別のポイントは、現在行っていないGETパラメータの適切なURLエンコーディングです。

は、だからここのサンプルです:

$('#someElement').click(function() { 
    // TODO: adapt the selectors to match your input field ids 
    var dsl = $('#telNumberBox').val(); 
    var date = $('#requiredDate').val(); 
    var timeslot = $('#ddTimeslot').val(); 

    var data = { dsl: dsl, date: date, timeslot: timeslot }; 
    $.get('../ajax/BTBookAppointment.aspx', data, function (response, status, xhr) { 
     //DO some stuff 
    }); 

    return false; 
}); 

また、あなたのAJAXリクエストを送信する前に発生する可能性がありますjavascriptのエラーをFirebugのコンソールを見ることを忘れないでください。

これが機能しない場合、私はさらに、エラーの可能性を絞り込むしようとする要求値をハードコーディングしようとするだろう:

var dsl = '123456789'; 
var date = '2012-04-07'; 
var timeslot = '14:15'; 

var data = { dsl: dsl, date: date, timeslot: timeslot }; 
$.get('../ajax/BTBookAppointment.aspx', data, function (response, status, xhr) { 
    //DO some stuff 
}); 

あなたがすることにより、スクリプトの別の部分に技術を絞り込んこのエラーを適用することができIEとChromeを殺すのではなくFireFoxを殺す煙草を見つけるまで、いくつかの値をハードコーディングします(エラーの可能性を排除します)。

+0

私の編集をご覧ください –

0

まあ情報のほとんどは

jQueryのバージョンを例えば利用できないのですか?

JQuery UIバージョン?

ajaxリクエストが呼び出されると、

a)まず、私は私のjQueryのバージョンは、相対URL で問題を抱えていないことを確認してください北韓[Googleの用語「jqueryのAJAXの相対URL」]

:私はこの種の問題のデバッグを行うだろうか。ここ

b)はjQueryの

$(document).ready(function(){ 
    //your ajax code 
    }); 

Cをロードした後、Ajaxオブジェクトが実際に作成されているか確認してください)Ajaxオブジェクトが作成されている場合でも、あなたがイベント

を開始するために右の方法やイベントを呼び出すチェック

d)の静的URLを書くと、例えば、新しいタブを開くと

http://domain/../ajax/BTBookAppointment.aspx?dsl=xx&date=yy&timeslot=zz 

電子のようなURLを入れ 新しいタブでリクエストを模倣する)新しいFirefoxのプロファイルを作成し、任意の追加のアドオンなしで追加。あなたのアプリケーションをテストしてください

あなたがこれとどのくらい離れているか教えてください。これが役に立つと思っています:)