I'm using ajax to get some data then based on the data use html() to put it on the page.

In IE, the data returned is empty (it's html). It still triggers the success function, but the html is not there. I've set the dataType: "text" but still doesn't work.

Any ideas?

Thanks!

EDIT:

Here's the exact code:

$('#frm').submit(function(event){
        event.preventDefault();
        var self = this;
        z = $('#zipcode');
        if(z.val() != '' && z.val().length == 5) {
            var value = z.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
            var intRegex = /^\d+$/;
            if(!intRegex.test(value)) {
                return false;
            }
        } else {
            return false;
        }

        $.ajax({
            url: "/ajax/zip", 
            type: 'GET',
            async: false,
            dataType: 'html',
            data:   {zipcode: $('.zip_field').val()},
            success: function(data) {
                    if(data == 'false'){
                        error($(".zip_field"));
                        return false;
                    }else{
                        self.submit();
                        $('.container').empty().append(data);
                    }
            }
        });
})

It's submitting a zip code. On submit, it checks to make sure it's a number and 5 digits in length. If that passes, it goes to the ajax and checks to make sure it's a valid zip code (database check), if that fails it returns 'false' as text, if it's good then it returns some html.

It works in Firefox and Chrome, but not in IE. When it's good, it submits the form but the data returned alerts empty and is appended as empty space.

I'm using ajax to get some data then based on the data use html() to put it on the page.

In IE, the data returned is empty (it's html). It still triggers the success function, but the html is not there. I've set the dataType: "text" but still doesn't work.

Any ideas?

Thanks!

EDIT:

Here's the exact code:

$('#frm').submit(function(event){
        event.preventDefault();
        var self = this;
        z = $('#zipcode');
        if(z.val() != '' && z.val().length == 5) {
            var value = z.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
            var intRegex = /^\d+$/;
            if(!intRegex.test(value)) {
                return false;
            }
        } else {
            return false;
        }

        $.ajax({
            url: "/ajax/zip", 
            type: 'GET',
            async: false,
            dataType: 'html',
            data:   {zipcode: $('.zip_field').val()},
            success: function(data) {
                    if(data == 'false'){
                        error($(".zip_field"));
                        return false;
                    }else{
                        self.submit();
                        $('.container').empty().append(data);
                    }
            }
        });
})

It's submitting a zip code. On submit, it checks to make sure it's a number and 5 digits in length. If that passes, it goes to the ajax and checks to make sure it's a valid zip code (database check), if that fails it returns 'false' as text, if it's good then it returns some html.

It works in Firefox and Chrome, but not in IE. When it's good, it submits the form but the data returned alerts empty and is appended as empty space.

• javascript
• jquery

• Did you try dataType: html instead ? – aziz punjani Commented Sep 16, 2011 at 21:14
• 1 Perhaps we could see some code? – Marko Commented Sep 16, 2011 at 21:17
• 1 can you show your ajax call code, also any errors in the firebug, can you see the data returned in the firebug response – Rafay Commented Sep 16, 2011 at 21:18
• 5 Also, confirm that the html being returned is valid HTML. IE is very picky. – Kevin B Commented Sep 16, 2011 at 21:19
• Other than IE what you tried? did you try to access the ajax page by direct url – zod Commented Sep 16, 2011 at 21:31

4 Answers 4

• demo: https://so.lucafilosofi./jquery-ajax-return-data-empty-in-ie/

your code don't work simply because it is buggy, it have nothing to do with IE. it should be something like below.

$('#frm').submit(function (e) {
    e.preventDefault(); // this one already act as return false...

    var form = $(this);
    // why you have .zip_field & #zip_code ?
    var zip_code = $.trim($('#zip_code').val());
    var valid = (zip_code.length === 5 && !isNaN(zip_code)) ? true : false;

    if (valid) {
        $.get('/ajax/zip', {
            zipcode: zip_code
        }, function (data) {
            if (data == 'false') {
                alert('error!');
            } else {
                //if you submit the form here 
                //form.submit(); then the line below 
                //is totally useless
                $('.container').html(data);
                //.empty().append() is = .html()
            }
        });
    }
});

• NOTE: the fact that chrome and firefox don't display errors dosn't mean that errors are not there; internet-explorer simply tend to display errors everytime it run through malformed code etc. Also i strongly doubt that your code work really as expected since it is not so good as you may think. I guess the problem is in your code and have nothing to do with jQuery itself or it's ajax function or dataType.

One thing could be that this URL is cached by the browser. If you obtain a 304 status your response's text it will be empty. Check your HTTP cache headers, and adjust them properly. You could also trying to use POST (only GET are cached). Also, have a look to Content-Length if is properly set.

If nothing of above works, inspect the network's call will give to you (and us) some additional details, try the IE's dev tools.

You could also try to have the same request using XMLHttpRequest's object directly (assuming you're using IE>6).

I have same problem in IE and Google Chrome

$.ajax is not working in this browser because of security reason.

so if you want to run explicitely

for chrome run chrome with

chrome.exe --disable-web-security

and in IE you need to change setting from Menu>Tools>internet Options

Some versions of IE will not ~repair~ invalid HTML in XHR requests and simply discard it; I've been bitten by this before.

Make sure the HTML returned is valid for the doctype IE thinks you're using (use the developer tools in IE to see), and check your HTML with a validator tool. Obviously, it will plain about missing <html>, <head>, etc, but ignores those and focus on the other errors. once you've fixed those, it should start working.

Also, aSeptik's answer is full of good tips to improve your code.