Ajax call not working in IE8

Question

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,

You could look at this page and use the `XMLHttpRequest()`: http://www.javascriptkit.com/jsref/ajax.shtml — Hackerman, Jun 13 '14 at 13:45
You should use Xdomain request in Ie to achieve cross domain ajax — Anoop Joshi P, Jun 13 '14 at 13:48

score 9 · Answer 1 · edited May 23 '17 at 12:10

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:

score 7 · Accepted Answer · edited May 23 '17 at 11:46

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.

score 0 · Answer 3 · answered Jun 13 '14 at 13:45

0

Your request look fine but if it's a IE8 then you probably have a problem with header of file that you are loading, it have to be application/json

PHP example

header('Content-Type: application/json');

answered Jun 13 '14 at 13:45

maurycy

8,455
1
27
44

score 0 · Answer 4 · edited Dec 07 '18 at 10:45

0

Very simple, add the following line on your page:

<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />

edited Dec 07 '18 at 10:45

brasofilo

25,496
15
91
179

answered Dec 07 '18 at 10:33

Gimo

78
1
9

Ajax call not working in IE8

4 Answers4

Linked