jquery .get/.post not working on ie 7 or 8, works fine in ff

Question

I have basically this on a page:

<script type="text/javascript">
function refresh_context() {
    $("#ajax-context").html("Searching...");
    $.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function(xml) {
        $("#ajax-context").html($("display", xml).text());
        $("#context").val($("context", xml).text());
    }, 'xml');
}
$(document).ready(function() {
    $("#username").blur(refresh_context);
});
</script>

<input type="text" name="username" id="username" maxlength="255" value="" />
<input type="hidden" name="context" id="context" value=""/>
<div id="ajax-context"></div>

What it should do (and does fine on Firefox) is when you type a username in to the #username field, it will run /ajax/ldap_search.php?cn=$username, which searches our company's ldap for the username and returns it's raw context and a formatted version of the context like this:

<result>
    <display>Staff -&gt; Accounting -&gt; John Smith</display>
    <context>cn=jsmith,ou=Accounting,ou=Staff,ou=Users,o=MyOrg</context>
</result>

The formatted version (display) goes to the div #ajax-context and goes to the hidden input #context. (Also, the -> are actually - "& g t ;" (without spaces)).

However, on IE the div stays stuck on "Searching..." and the hidden input value stays blank.

I've tried both .get and .post and neither work. I'm sure it's failing on the .get because if I try this, I don't even get the alert:

$.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function() {
    alert("Check");
});

Also, IE doesn't give me any script errors.

Edit: Added "$(document).ready(function() {", the .blur was already in it in my code, but I forgot to include that in my post.

Edit 2: The request is being sent and apache2 is receiving it:

10.135.128.96 - - [01/May/2009:10:04:27 -0500] "GET /ajax/ldap_search.php?cn=i_typed_this_in_IE HTTP/1.1" 200 69

Answer 1

Usually with $.get/$.post you have to specify the return type. This makes it easier for jquery to a) recognize what it looks for and b) decode it for you.

This may help.

Answer 2

Try changing:

$("#username").blur(refresh_context);

To:

$(function(){
    $("#username").blur(refresh_context);
});

This will hold off on assigning the blur event until the entire page is loaded.

Edit:

Could it be the use of > in the text of the XML?

Answer 3

Can you find out if the Ajax request is even being fired?

You can use Web Development Helper or Fiddler to log Ajax requests.

As general good practice you should enclose any jQuery code that accesses the DOM in a $(document).ready function. This will ensure it doesn't execute until the entire DOM is loaded, although in this instance it doesn't look like that's causing the problem if the div is changing to 'Loading...'

<script type="text/javascript">
function refresh_context() {
    $("#ajax-context").html("Searching...");
    $.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function(xml) {
        $("#ajax-context").html($("display", xml).text());
        $("#context").val($("context", xml).text());
    }, "xml"); // As pointed out, you should specify the return type
}
$(document).ready(function() {
    $("#username").blur(refresh_context);
});
</script>

Answer 4

set your type to 'xml'

jQuery.get( url, [data], [callback], [type] )

$.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function() {
    alert("Check");
},'xml');

Answer 5

You may want to change the $.get call to a $.ajax call, so you can set an error handler to see why it's erroring.

As I recall, this is done like this:

$.ajax({
    type: 'GET',
    url: "/ajax/ldap_search.php",
    data: {cn: $("#username").val()},
    success: function(response) { /* do something here */ },
    error: function(xhr, type, exception) { alert("Error: " + type); }
})

The exception object should have more detail about the error as well.

Answer 6

Instead of $("display", xml).text()

Maybe try: $(xml).find("display").text()

Can you see what the response is or is it just timing out? Can you see what params are being sent in? If not, expand your:

function refresh_context() {
    $("#ajax-context").html("Searching...");
    $.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function(xml) {
        $("#ajax-context").html($("display", xml).text());
        $("#context").val($("context", xml).text());
    }, "xml"); // As pointed out, you should specify the return type
}

to

function refresh_context() {
    $("#ajax-context").html("Searching...");
    $.get("/ajax/ldap_search.php", {cn: $("#username").val()}, function(xml) {
        var displayXml = $("display", xml).text();
        $("#ajax-context").html(displayXml);
        var contextXml = $("context", xml).text();
        $("#context").val(contextXml);
    }, "xml"); // As pointed out, you should specify the return type
}

and then debugging the script.

Answer 7

Problem was in the ldap_search.php file. I had this (based on an example I read on someone's blog):

header("content-type:application/xml-xhtml;charset=utf-8");

It actually needed to be this for IE to read it properly:

header("content-type:application/xml;charset=utf-8");

God, I hate IE.

Answer 8

I'm beginning to HATE IE also. Instead of fixing IE 7.0x, Microsoft defies brain power by offering IE 8. I still have problems with IE 7 using ajax/jquery content. It's insane. It makes one want to change careers...

Answer 9

Thank you for your solution. I hate IE too, but unfortunately many people who doesn't know about normal browsers are still using IE.

Answer 10

Thank you @Samutz for posting your solution. That is exactly what I needed - and saved me a ton of time.

I, too, ran into trouble when using jQuery $.post's 'type' parameter ('xml'). FF and Safari were smart enough to interpret the return data as xml, but IE needed the header("content-type:application/xml;charset=utf-8");

Thanks, again.

Answer 11

I had same problem but not with xml - i had simple html as ajax-return. header("content-type:text;charset=utf-8"); was the solution.