Question

I have a ASP.NET MVC 4 application. This application will be embedded into another site (different domain) via an iFrame.

Part of the application has functionality to get a list of cities based off state. I’m using jQuery Ajax to do this. All browsers are working except IE.

Based off my googling, I’ve learned that I need to use XDomainRequest for IE. So here’s the code:

/* For dynamically getting list of cities by state */
        $("#state").change(function() {
            $(".city").empty();
            if ($(this).val() != "") {
                if ($.browser.msie && window.XDomainRequest) {
                    var data = "state=" + $(this).val();
                    var xdr = new window.XDomainRequest();
                    xdr.open("POST", "/Search/GetCities");
                    xdr.send(data);
                    xdr.onload = function() {
                        var json = $.parseJSON(xdr.responseText);
                        if (json == null || typeof(json) == 'undefined') {
                            json = $.parseJSON(data.firstChild.textContent);
                        }
                        processData(json);
                    };
                    xdr.send();
                } else {

                    $.ajax({
                        type: "POST",
                        url: "/Search/GetCities",
                        data: {
                            state: $(this).val()
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data == '') {
                                $("#state").change();
                            } else {
                                $(".city").css("display", "none");
                                var items = "<option value=\"\" selected>Please Select</option>";
                                $.each(data, function(i, item) {
                                    items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
                                });
                                $(".city").append(items);
                                $(".city").css("display", "");
                                $(".city").attr('disabled', false);
                            }
                        }
                    });
                }
            }
        });
        /* End dynamically getting list of cities by state */

Here’s the kicker. With FF, Chrome and Safari, the authentication cookie gets passed in the Ajax call but not in IE so IE thinks I’m not an authentication user so it responses with the login URL.

What am I missing to make this work with IE?

Thanks!

Answer 1

I’m going out on a limb that your problem is not related to the jquery you are using for the post but instead is a problem with cross domain cookies with IE.

Try adding a P3P header. A good SO thread on the subject can be found here:

Cookie blocked/not saved in IFRAME in Internet Explorer