Jquery $.post не работает на Chrome, но работает в IE и FF

Фрагмент кода для проблемы, с которой я сталкиваюсь:

//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');
    });
});

Этот код в основном выбирает сведения о доставке для страны, выбранной в раскрывающемся списке, и отображает ее в таблице. Таблица состоит из двух строк, первая строка имеет заголовки столбцов (например, страна, тариф, тип доставки и т. Д.), А вторая строка отображает данные о доставке, возвращенные с сервера.

Более чистый код, если я удалю заголовок таблицы и код создания строки:

 //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, затем снова то же самое поведение, он впервые отображал таблицу доставки, когда я выбрал страну из выпадающего списка, а со второго раза он вообще не отвечал. Я проверял отладчик Chrome Firebug, почтовый запрос был успешным, и он возвратил ответ 200 ok вместе с данными json. Но ему не удалось запустить второе предупреждение, что означает, что он не вошел в функцию обратного вызова (которая выполняется, если запрос завершается успешно).

Также просто упомянуть, что я не устанавливаю тип содержимого для ответа, возвращаемого с сервера. ТАК его текст / 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, и, следовательно, не отображается таблица доставки, будет очень полезна. Спасибо.

ОБНОВЛЕНИЕ: я обновил код для использования $.ajax, ниже мой код:

$.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
});

`function AjaxFailed (result) {
alert ("FAILED:" + result.status + '' + result.statusText);
оповещения (result.responseText);
// displayShippingTable (result.responseText);

}  

`

Это отлично работает на Firefox и IE, но на Chrome это незнакомо, чем раньше. Когда я выбираю или меняю страну в выпадающем списке, консоль сначала говорит

POST ajax_utility/getShippingCostProdDtls/ 200 OK 108мс

затем через 5 секунд тайм-аут

POST ajax_utility / getShippingCostProdDtls / прервано 108 мс

Затем он входит в функцию AjaxFailed и выдает предупреждение FAILED: 200 OK, а данные json возвращаются с сервера.

Было бы замечательно, если бы кто-нибудь помог мне понять, что происходит снова и снова. Спасибо.

1 ответ

Хорошо, наконец я решил это сам. Ну, не совсем решено, хотя. Одна важная вещь, которую я забыл упомянуть, это приложение, над которым я работал, использовало jquery 1.3.2. Я хорошо подумал, давайте использовать последний jquery для этой страницы, чтобы я мог опробовать интерфейс обещаний.

И когда я снова запускаю страницу, включив jquery jquery-1.7.1.min.js, проблема сразу исчезла. Транспортный стол загружался абсолютно нормально. Так что я думаю, это из-за ошибки или несовместимости между версией jquery и chrome. Таким образом, в моем случае обновление версии jquery устранило проблему.

Другие вопросы по тегам