jquery .get / .post不工作​​ie 7或8，在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 - "& gt ;" (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

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

set your type to 'xml'

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

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

Answer 4

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.

Answer 5

Does not work:

$.post("/welcome/add_mail", function(data){
       alert('ok');   
});

Works fine with base url in IE7:

$.post("http://localhost/welcome/add_mail", function(data){
       alert('ok');   
});

Answer 6

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 7

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 8

I had a similar problem, but loading JSON. The $.ajax fix worked for me but I also discovered that in my case it had to do with the URL. When I use:

$.getJSON('',{ ajax: "addressPicker",OID:pickIDNo,s:pickVal}, function(data) {

I would get a silent response, but when I replaced the empty URL '' with '?' it worked. In your case the URL was present, but it might be picky as to URL.

Answer 9

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 10

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.