Jquery $.post not working on chrome but works in IE and FF

Question

The code snippet for the problem I am facing is:

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

     if($(this).val() == ""){
          $('#shippingRateDisplay').html('
No country selected.');
          return false;
        }
        alert("Before ajax start");
    $.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(), 
                                                      product_id: uri->segment(3); ?>,
                                                      current_currency: '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 = '
'+
                                    ''+
                                        ' '+
                                        ''+
                                        ''+
                                        ''+
                                    ''+
                                 'Country of delivery Shipping cost Service used Estimated shipping time';



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

            var tr = ''+
                         ''+data.data.country_name+''+
                         'For one quantity
'+data.data.cost_1_qty+''+
                         'Each additional qty.
'+data.data.cost_many_qty+''+
                         ''+shippingDtl+''+
                         ''+data.data.shipping_time+' day(s)'+
                      '';           

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

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

This code basically fetches the shipping details for the country selected in the drop down and displays it in a table. The table has two rows, the first row has the column headings(like country, rate, shipping type etc) and the second row display the shipping data returned from the server.

A more cleaner code if I remove the table header and row creation code would be:

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

     if($(this).val() == ""){
          $('#shippingRateDisplay').html('
No country selected.');
          return false;
        }
        alert("Before ajax start");
    $.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(), 
                                                      product_id: uri->segment(3); ?>,
                                                      current_currency: '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');
    });
});

One of general response from the server is:

{
   "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

}

The issue with this code is it works fine in IE and FF but has strange behavior in Chrome. The issue is , it worked fine for the first few times, then it could not. I restarted my machine and xampp, then again the same behavior, it displayed the shipping table for the first time when I selected a country from the drop down and from the second time it did not respond at all. I check the chrome firebug debugger, the post request was successful and it returned a 200 ok response along with the json data. But it failed to fire the second alert, which means it did not enter the callback function(which is executed if the request succeeds).

Also just to mention I am not setting the content type for the response that is being returned from the server. SO its text/html.

The following are the request and response headers

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

Any help on why the call back function is not being executed, after the ajax call, and hence the shipping table not being displayed would be greatly helpful. Thank you.

UPDATE: I updated the code to use $.ajax, below is my code:


$.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);
alert(result.responseText);
// displayShippingTable(result.responseText);

`

This works fine on Firefox and IE , but on chrome its stranger than before. When I select or change a country in the shipping drop down, the console first says

POST ajax_utility/getShippingCostProdDtls/ 200 OK 108ms

then after 5 secs timeout it says

POST ajax_utility/getShippingCostProdDtls/ Aborted 108ms

Its then entering AjaxFailed function and is giving the alert FAILED : 200 OK and the json data returned from the server

It would be wonderful if somebody can help me to understand what is happening over and under the hood. Thank you.

Jquery $.post not working on chrome but works in IE and FF

Answers (1)

Related Questions