Question

I am using JSONP to make cross domain requests. The script works perfectly in Firefox and Chrome, but in IE 9 and below I get the following error:

Request failed: parsererror
Error: jQuery1720027601653975035778_1348794800150 was not called

I’ve tried setting the dataType from jsonp to text/json but then it wont work in Chrome or Firefox, and while the call is successful in IE I get a null response.

Code

$.ajax({ // the function that does everything
            type: "GET",
            url: "http://example.com/products.php?size=" + search_size + "&manufacturer=" + search_manufacturer + "&gender=" + search_gender + "&instock=Y&startat=0&results=30&callback=?", //&callback=? is required to send the offsite server the data. ? is automatically filled in by AJAX
            async: true,
            cache: false,
            contentType: "text/json; charset=utf-8",
            dataType: "jsonp",
            error: function(xhr, textStatus, errorThrown){      // textStatus = Error code if it fails (parsererror = json handshake fail)
                $(datastatus).empty() ;
                $(datastatus).append("<b>Request failed: </b>" + textStatus + "<br>" + errorThrown); // Puts the error code in a special div.                                   
            },
            success: function(data, textStatus){ // data = the json array
                $(datastatus).empty();
                $(datastatus).append("<b>Request succeeded: </b>" + textStatus);

                $("#output").empty(); // empties the product list in preperation to be filled
                alert(data);
                $.each(data, function(index, value) { // cycles through every value in the array. Everything inside the Curly brackets will be run for each object in the array.
                    var hideproduct = value.hideproduct; // value.item is simplified down
                    var productcode = value.productcode;
                    var productname = value.productname;
                    var productprice = value.productprice;
                    var listprice = value.listprice;
                    var photoscode = value.photos_cloned_from;
                    var childof = value.ischildofproductcode;
                    var ProductDescriptionShort = value.productdescriptionshort; 
                    if (ProductDescriptionShort == undefined){
                        var ProductDescriptionShort = ""// changes "undefined" to "" (blank) so customers wont see that error
                    };
                    childcheck = childof; // checks to see if the product is a child
                    if (childcheck == ""){
                    var childof = productcode // changes the product code value to match the child productcode
                    };
                    $("#output").append("<div class='product' code='" + productcode + "'>"
                        + "<a href='http://www.skates.com/-p/" + productcode + ".htm' title='" + productname + ", " + productcode + "'>" + productname + "</a><br>"
                        + "<span><font class='text colors_text'><span class='listprice'>List Price</span>: </font> $" + listprice + "</span><br/><span class='price'>Our Price</span>: </font> $" + productprice + "</span><br>"
                        + "<div class='product_image'><a href='http://www.skates.com/-p/" + productcode + ".htm' title='" + productname + ", " + productcode + "'><img src='http://www.skates.com/v/vspfiles/photos/" + childof + "-1.jpg' border='0' alt='" + productname + "'></a></div>"
                        + "<span class='shortdescription'>" + ProductDescriptionShort + "</span>"
                        + "</div>") // Process and add the data to elements.
                })
            }
        })

Json sent

([{"productcode":"K2EMY050","productname":"K2 Enemy aggressive skates - Size 5","productprice":"39.99","hideproduct":"Y","listprice":"199.99","photos_cloned_from":"K2EMY","ischildofproductcode":"K2EMY","productdescriptionshort":""},{"productcode":"S02123060","productname":"K2 Mini Enemy - Size 4-6","productprice":"49.99","hideproduct":"Y","listprice":"149.99","photos_cloned_from":"S02123","ischildofproductcode":"S02123","productdescriptionshort":""},{"productcode":"S03109050","productname":"K2 Cadence SL - Size 5","productprice":"39.99","hideproduct":"Y","listprice":"189.99","photos_cloned_from":"S03109","ischildofproductcode":"S03109","productdescriptionshort":""},{"productcode":"S03112050","productname":"K2 Skye SL Womens - Size 5","productprice":"59.99","hideproduct":"Y","listprice":"199.99","photos_cloned_from":"S03112","ischildofproductcode":"S03112","productdescriptionshort":""},{"productcode":"S03118050","productname":"K2 Spire XP Womens - Size 5","productprice":"99.99","hideproduct":"Y","listprice":"239.99","photos_cloned_from":"S03118","ischildofproductcode":"S03118","productdescriptionshort":""}])

How do I fix this issue?

Answer 1

Internet explorer needs to have the crossDomain variable explicitly set to true for JSOP to work.

$.ajax({ // the function that does everything
        type: "GET",
        url: "http://example.com/products.php?size=" + search_size + "&manufacturer=" + search_manufacturer + "&gender=" + search_gender + "&instock=Y&startat=0&results=30&callback=?", //&callback=? is required to send the offsite server the data. ? is automatically filled in by AJAX
        async: true,
        cache: false,
        contentType: "text/json; charset=utf-8",
        dataType: "jsonp",
        crossDomain: true,