1

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.

Improve this question
12
  • Did you try dataType: html instead ? Commented Sep 16, 2011 at 21:14
  • 1
    Perhaps we could see some code? 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 Commented Sep 16, 2011 at 21:18
  • 5
    Also, confirm that the html being returned is valid HTML. IE is very picky. Commented Sep 16, 2011 at 21:19
  • Other than IE what you tried? did you try to access the ajax page by direct url Commented Sep 16, 2011 at 21:31

4 Answers 4

Reset to default
6
+50

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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).

Improve this answer

5 Comments

Rather than using the IE dev tools I would advise you to rather use something along the lines of fiddlr for the network monitoring part in IE.
Monitoring the request with a dev tools should be enough – it is usually on the other browsers. I thought about fiddlr but I didn't suggest it to avoid installation and explanation of additional SW, and in this specific case shouldn't give any benefits more than an embedded dev tool.
Except that the IE networking tools in pre IE9 versions have various odd bugs and tend to be in general incomparably harder to use than fiddlr (and even in IE9 they can't be called easy) (without exception all developers I know tend to use a variety of tools to prevent having to use the native IE debugging tools including a number of microsoft advocates).
I do not know the version of the IE the OP is testing. If the dev tools in his IE are totally unreliable even for this small task, yes, I agree he should use something different. As I said, I did not mentioned additional tool to avoid unnecessary complexity.
But by not mentioning them you might have made it only harder for him, oh well, I do understand what your motivation was though, so it's up to him to decide what to do with this information :D .
1

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

Improve this answer

Comments

1

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 complain 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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.