Ajax call not working in IE8

javascript jquery asp.net ajax internet-explorer-8

24,050

Solution 1

The issue is IE8 doesn't support the Cross Origin Resource Sharing (CORS) XHR, so you can't do a cross domain ajax call with the native XHR or jQuery's $.ajax.

For IE8, Microsoft decided to come up with their own cross domain XHR instead of using the CORS XHR, which is called XDomainRequest, so you'll have to implement that to support IE8 users. An example usage can be found in this answer.

Alternatively, you could proxy the cross domain request through your local server side, making the external request a server to server situation, which won't be subject to Same Origin Policy.

Solution 2

Actual issue in your code is showing "No Transport" error in ajax error call back. add this line jQuery.support.cors = true; would solve your problem

Try this below code in IE and other browser.

    <html>
    <head>
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
          <script>
    $(document).ready(function() {
        jQuery.support.cors = true;
        $("#zip").keyup(function() {
            var el = $(this);

            if (el.val().length === 5) {
               $.ajax({
                    url: "http://zip.getziptastic.com/v2/US/" + el.val(),
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    success: function(result, success) {
                        $("#city").val(result.city);
                        $("#state").val(result.state);
                    }
                });
            }
        });
    });

    </script>
    </head>
    <body>
        <p>Zip Code: <input type="text" id="zip" /></p>
        <p>City: <input type="text" id="city" /></p>
        <p>State: <input type="text" id="state" /></p>
    </body>
    </html>

Check out these links:

24,050

Author by

Somebody

Updated on December 08, 2020

Comments

Somebody over 3 years

I was reading several posts about this, and make some changes to my code but no luck.

Can anyone look into this, to see what's going on here? Or perhaps another way to do what I need (retrieve city, state by a zip code using ziptastic)

The code works fine in Chrome (http://jsfiddle.net/7VtHc/117/)

html

<asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>        
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox> 
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>

script

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("input[id$='txtZipCode']").keyup(function () {
            var el = $(this);

            if (el.val().length === 5) {
                $.ajax({
                    url: "http://zip.getziptastic.com/v2/US/" + el.val(),
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    success: function (result, success) {
                        $("input[id$='txtCity']").val(result.city);
                        $("input[id$='txtState']").val(result.state);
                    }
                });
            }
        });
    });
</script>

Thanks,