JQuery does not work in IE

Question

I looking more for 'how to troubleshoot' rather than.. the answer is this. Though I obviously wouldn't mind an answer.

Here is my JS.

function listFiles(path) {

        document.path = 'dir='+path;

        $.ajax({
            url: "<?php echo site_url("admin/media/get_folder");?>",
            //data: document.path,
            success: function(data) {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                $.each(data, function(key, arr) {
                    $("#files").append(
                        '<a href="#" class="' + arr.type + 
                           ' row">'     + key + '</a>'
                    );
                });
            },
            error: function(e) {
                alert('foo');
            }
        });
        return false;
    }

    listFiles('');

This is what the JS is being fed.

{"files":{"type":"folder","path":"C:\\xampp\\htdocs\\codeigniter\\uploads\\"},
"images":{"type":"folder","path":"C:\\xampp\\htdocs\\codeigniter\\uploads\\"}}

When I run in IE9 I get back foo. I can't locate my IE8 install unfortunately but it would be good to debug this anyway.

EDIT!

In IE the following tests give the following results.

alert(arguments[1]) = parsererror. 
alert(e.status + '\n' + e.statusText); = 200 / OK. 

When I copy the javascript URL from the IE source into the IE browser bar the url loads fine and prompts me to download the json file

EDIT EDIT

Found the cause.

Could not complete the operation due to error c00ce56e

On looking that up, I found this. http://support.microsoft.com/?scid=kb%3Ben-us%3B304625&x=10&y=13

How do I properly encode json documents?

Answer 1

I know it is ASP but the results should still be the same. Check out this link http://forums.asp.net/p/1345268/2732795.aspx. Try changing the content type to ISO or something, if ISO doesn't work then try UTF-8. http://api.jquery.com/jQuery.ajax/

Answer 2

I know you say your problem is in IE, but still one of the best ways to troubleshoot ajax is to use FireFox and its addin, Firebug. That way you can look at the response from your ajax call and see exactly what it returned. It is quite likely that you are getting an error on the server and then the response you will get is an error page, that will be "hidden" by jQuery, and all you will get is "foo".

So download FireFox and install FireBug (if you haven't already) and run the procedure and then look at the response.

It could, for example, say "Folder does not exist" (if for example, the folder you specified did not exist).

If you get the correct response in Firefox, then you know that the problem is with IE.

If you don't get the expected result, then you know that the problem is in your server side code or client side code, in which case Firebug will show you what is happening.

Diagnostic Tools in other browsers (Chrome, IE):

IE has something similar to Firefox's Firebug, but Firebug is infinitely more precise and easier to use. It is the defacto standard for debugging javascript, css and for seeing server response to ajax calls.

Google Chrome also comes with built in functionality (accessible via right click and Inspect Element).

In reality, you should use all three, even if only working with IE, eg, for an intranet app. The reason being that in combination, all three give you different diagnostic tools to see what is going wrong with a request.

EDIT:

I suspect your error is in the url parameter you are passing to the $.ajax call. You are passing a php tag (I think) instead of a url. Firebug would confirm or disprove this.