jQueryの$ .postクロムに取り組んが、IEで動作し、FF

Question

ない私が直面しています問題のコードスニペットは、次のとおりです。

//select the shipping country to display its shipping rate 
    $('#country').change(function() { 

    if($(this).val() == ""){ 
      $('#shippingRateDisplay').html('<br /><span style="margin-left:8px">No country selected.</span>'); 
      return false; 
     } 
     alert("Before ajax start"); 
    $.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(), 
                 product_id: <?php echo $this->uri->segment(3); ?>, 
                 current_currency: '<?php echo $product->currency->cur_id; ?>'}, function(data){ alert("Successful ajax, but chrome is not reaching here"); 

     if(data.status != 1){ 
       $('#shippingRateDisplay').html("Shipping rate not set for the specified country"); 
      } 
     else{ 
      $("#shippingRateDisplay").html(""); 

      var conShip = '<br /><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cdcdcd" class="darbluelink" id="shippingDetails">'+ 
            '<tr>'+ 
             ' <td width="20%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Country of delivery</b></td>'+ 
             '<td colspan="2" align="center" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Shipping cost</b><b></b></td>'+ 
             '<td width="24%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Service used</b></td>'+ 
             '<td width="16%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Estimated shipping time</b></td>'+ 
            '</tr>'+ 
           '</table>'; 



      var shippingDtl = data.data.service_name == "Any Other" ? data.data.service_any:data.data.service_name; 

      var tr = '<tr id="rowShippingDetails'+data.data.id+'">'+ 
         '<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+data.data.country_name+'</td>'+ 
         '<td bgcolor="#FFFFFF" style="padding:7px" class="text-center"><span class="font2a1">For one quantity</span><br />'+data.data.cost_1_qty+'</td>'+ 
         '<td bgcolor="#FFFFFF" style="padding:7px" class="text-center"><span class="font2a1">Each additional qty.</span><br />'+data.data.cost_many_qty+'</td>'+ 
         '<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+shippingDtl+'</td>'+ 
         '<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+data.data.shipping_time+' day(s)</td>'+ 
         '</tr>';   

      $('#shippingRateDisplay').append(conShip); 
      $('#shippingDetails').append(tr); 
     } 

     }, 'json'); 
    }); 
}); 

このコードは、基本的には、ドロップダウンで選択した国の出荷詳細をフェッチそれをテーブルに表示します。テーブルには2つの行があり、最初の行には国、レート、出荷タイプなどの列ヘッダーがあり、2番目の行にはサーバーから返された出荷データが表示されます。

よりクリーンコードIは、テーブルヘッダと行作成コードを削除する場合であろう：サーバからの一般的応答の

//select the shipping country to display its shipping rate 
    $('#country').change(function() { 

    if($(this).val() == ""){ 
      $('#shippingRateDisplay').html('<br /><span style="margin-left:8px">No country selected.</span>'); 
      return false; 
     } 
     alert("Before ajax start"); 
    $.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(), 
                 product_id: <?php echo $this->uri->segment(3); ?>, 
                 current_currency: '<?php echo $product->currency->cur_id; ?>'}, function(data){ alert("Successful ajax, but chrome is not reaching here"); 

     if(data.status != 1){ 
       $('#shippingRateDisplay').html("Shipping rate not set for the specified country"); 
      } 
     else{ 
      $("#shippingRateDisplay").html(""); 

      var conShip = 'THE_TABLE_HEADER'; 



      var shippingDtl = data.data.service_name == "Any Other" ? data.data.service_any:data.data.service_name; 

      var tr = 'THE SHIPPING ROW CREATED WITH THE JSON DATA';   

      $('#shippingRateDisplay').append(conShip); 
      $('#shippingDetails').append(tr); 
     } 

     }, 'json'); 
    }); 
}); 

一つは：

{ 
    "data":{ 
     "id":"4e6a274043ca1", 
     "product_id":"131315437838", 
     "country":"60", 
     "cost_1_qty":"$ 5.00 CAD", 
     "cost_many_qty":"$ 5.00 CAD", 
     "service_used":"7", 
     "service_any":"", 
     "shipping_time":"5", 
     "country_name":"French Guiana", 
     "service_name":"Express\/Expedited International Shipping" 
    }, 
    "status":1 

}

このコードの問題は、IEとFFでうまく動作しますが、Chromeで奇妙な動作をしています。 問題は、最初の数回はうまくいきました。私は自分のマシンとxamppを再起動し、同じ動作をしましたが、ドロップダウンから国を選択したときに初めて出荷テーブルを表示し、2回目からは全く応答しませんでした。 私はchrome firebugデバッガをチェックしました。投稿要求は成功し、jsonデータとともに200 ok応答を返しました。しかし、それはコールバック関数に入っていないことを意味する（要求が成功した場合に実行される）2番目のアラートを起動できませんでした。

また、私はサーバーから返されているレスポンスのコンテンツタイプを設定していません。 SOのtext/htmlです

次は

ResponseHeaders

Date: Sun, 11 Mar 2012 14:48:34 GMT 
X-Powered-By: PHP/5.2.1 
Connection: Keep-Alive 
Content-Length: 282 
Pragma: no-cache 
Last-Modified: Sun, 11 Mar 2012 14:48:34 GMT 
Server: Apache/2.2.4 (Win32) DAV/2 mod_ssl/2.2.4 OpenSSL/0.9.8d mod_autoindex_color PHP/5.2.1 
Content-Type: text/html 
cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 
Keep-Alive: timeout=5, max=99 
Expires: Thu, 19 Nov 1981 08:52:00 GMT 

RequestHeaders

Content-Type: application/x-www-form-urlencoded 
X-Requested-With: XMLHttpRequest 
Accept: application/json, text/javascript, */* 

コールバック関数は、後に、実行されていない理由について任意のヘルプリクエストとレスポンスヘッダですajax呼び出し、したがって配送テーブルが存在しない非常に参考になります。ありがとうございました。

UPDATE： 私は以下、$アヤックスを使用するコードを更新しましたが、私のコードです：AjaxFailed

$.ajax({ type: "post",
url: 'ajax_utility/getShippingCostProdDtls/',
timeout : 5000,
data: { country_id: $(this).val(),
product_id: '<?php echo $this->uri->segment(3); ?>',
current_currency: '<?php echo $product->currency->cur_id; ?>'},
dataType: "json",
success: displayShippingTable,
error: AjaxFailed
});

` 機能（結果）{
警告（ "FAILED：" + result.status + '' + result.statusText）;
アラート（result.responseText）;
// displayShippingTable（result.responseText）;

} 

`

これはFirefoxとIEのが、以前よりその見知らぬ人をChromeで正常に動作します。 私が選択するか、ドロップダウン出荷国を変更すると5秒はそれが

POSTのajax_utilityを言うタイムアウト後、コンソールはまず

POSTのajax_utility/getShippingCostProdDtls/200 OK 108ms

を語ります/ getShippingCostProdDtls/Aborted 108ms

これはAjaxFailed関数に入り、FAILED：200 OK とjsonデータrを通知しています。サーバーから返される

誰かが私が何が起こっているのかを理解するのを助けることができれば素晴らしいだろう。ありがとうございました。

Answer 1

最後に、私はそれを自分で解決しました。まあまあまあまあ解決されません。 私がここで言及していたことを忘れていたことの1つは、作業していたアプリケーションがjquery 1.3.2を使用していたことでした。私はよく考えました。このページの最新のjqueryを試してみることができます。promise interface.

jquery jquery-1.7.1.min.jsを含めてページを再実行すると、問題はすぐに消えました。出荷テーブルは絶対にうまくロードされていました。だから私はバグやjqueryバージョンとクロムの間の非互換性のために推測します。そのように私のケースでは、jqueryのバージョンをアップグレードする問題を修正しました。