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 устранило проблему.