2012-03-11 105 views
0

为我所面临的问题的代码片段是:

//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, */* 

为什么没有被执行的回调函数任何帮助,后阿贾克斯呼吁,因此航运表没有显示将是非常有帮助的。谢谢。

UPDATE: 我更新的代码使用$阿贾克斯,下面是我的代码:

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

` 功能AjaxFailed(结果){
警报( “失败:” + result.status +''+ result.statusText);
alert(result.responseText);
// displayShippingTable(result.responseText);

} 

`

这工作正常,在Firefox和IE,但对铬的陌生人比以前。 当我选择或改变一个国家在航运降了下来,控制台首先说

POST ajax_utility/getShippingCostProdDtls/200 OK 108ms

再经过5秒超时,它说

POST ajax_utility/getShippingCostProdDtls/Aborted 108ms

然后它进入AjaxFailed函数并给出警报FAILED:200 OK 和json数据r从服务器剔除

如果有人能够帮助我理解发生了什么,并发生了什么,这将是美好的。谢谢。

+0

*另外我只是提到我没有设置从服务器返回的响应的内容类型。它的文本/ html *。 为什么不呢?你有没有试过使用'$ .ajax',它允许你指定一个错误处理程序? – DCoder 2012-03-11 15:10:37

+0

嗨,在你的文章正文中,一个参数(current_currency)引用了PHP代码,但另一个(product_id)没有引用php。这是故意的吗? – Andbdrew 2012-03-11 15:14:45

+0

你的服务器的一般响应是不完整的! – 2012-03-11 15:16:10

回答

1

好的,终于我自己解决了。那么不完全解决。 我忘了在这里提到的一件重要的事情是我正在使用的应用程序是使用jQuery 1.3.2。我想好了,让我们使用最新的jQuery为这个页面,以便我可以尝试promise interface.

而当我通过包含jquery jquery-1.7.1.min.js运行该页面时,问题立即消失。航运表正在加载非常好。所以我想这是由于jQuery版本和Chrome之间的错误或不兼容。就我而言,升级jQuery版本解决了这个问题。

相关问题