Issue with jQuery $.get in IE

Question

I have a login form which appears at the top of all of my pages when the user is logged out. My current jQuery/javascript code works in Firefox 3 but not IE 7. The code queries a page which simply returns the string "true" or "false" depending on whether the login was successful or not. Inside my $.ready() function call I have the following...

$('#login_form').submit(function() {

     var email = $('input#login_email').val();
     var pw = $('input#login_password').val()

     $.get('/user/login.php', { login_email: email, login_password: pw }, function(data) {
      alert('get succeeded');
      if(data == 'true') {
       $('#login_error').hide();
       window.location = '/user/home.php';
       alert('true');
      }
      else {
       $('#login_error').show();
       alert('false');
      }

     });

        alert('called');

     return false;
    });

In FF, I am successfully transferred to the intended page. In IE, however, the below alerts "called" and nothing else. When I refresh the page, I can see that I am logged in so the $.get call is clearly going through, but the callback function doesn't seem like its being called (ie. "get succeeded" is not popping up). I also don't appear to be getting any javascript error messages either.

Why isn't this working in IE?

Thanks

EDIT: Since a couple people asked, whenever I enter a correct email/password or an incorrect one, nothing in the callback function happens. If I manually refresh the page after entering a correct one, I am logged in. Otherwise, I am not.

EDIT 2: If I alert out data in the callback function nothing happens in IE (I do not get an alert popup). In FF, it alerts true for valid email/pw combos and false for invalid ones. I am using jQuery 1.3.2.

EDIT 3: Ok, guys, I tried R. Bemrose's thing down there and I'm getting a "parseerror" on the returned data. I'm simply echoing 'true' or 'false' from the other PHP script. I also tried 'yes' and 'no', but that still gave me a parse error. Also, this works in Chrome in addition to FF.

Answer 1

When all else fails, restart ;-)

Answer 2

IE uses cached data for get requests. Maybe that's your problem? What happens if you try different user id, password?

In any case, isn't it a better idea to send password in POST? :)

Answer 3

As stupid as this sounds... perhaps IE7 is being anal retentive about the missing semicolon on the var pw line?

Probably not, but the only way I can think of getting more information is to convert it to an $.ajax call in order to add an error hook and see which error type it think is happening. Oh, and to check out the exception object.

$.ajax({
        type: 'GET',
        url: '/user/login.php',
        data: { login_email: email, login_password: pw },
        success: function(data) {
                alert('get succeeded');
                if(data == 'true') {
                        $('#login_error').hide();
                        window.location = '/user/home.php';
                        alert('true');
                }
                else {
                        $('#login_error').show();
                        alert('false');
                }
        },
        error: function(xhr, type, exception) {
                alert("Error: " + type);
        }
});

If the error type is parse, IE may be complaining because the data coming back has extra commas at the end of comma separated arrays/lists.

Answer 4

Instead of:

if(data == 'true')

try:

if(data)

then in your server just return either a 1 (or true) and a empty value.

Answer 5

What you've posted (at least after Edit 2) looks good. I think the problem is in what you haven't posted.

First, have you checked your server logs to ensure that it's sending back what you presume?

If so, I'd recommend dropping the submit mechanism and using a 'button' type with an 'onclick' handler, and not 'submit' button w/a 'onsubmit' handler...

 <input type="button" id="login_submit" value="Login" />

Then switch the submit handler:

  $('#login_form').submit(function() { ... });

from the form to the button with:

  $('#login_button').click(function() { ... });

If that doesn't help, can you post the HTML for the form, too?

[Edit 3] - try adding the 4th 'type' parameter of "text" to the $.post() call.

Answer 6

Have you used Fiddler to have a good look at what's actually being transferred? (http://www.fiddler2.com)

Answer 7

In your response type use:

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

Answer 8

Hi

if you are testing/checking your script in local machine then you will not see any thing in any version of internet explorer because IE on localmachine send datatype as text and not xml and in your case again its matter of datatype not compatible with your document datatype so it worth checking if your datatypes are matching

as far as xml goes solution is here http://docs.jquery.com/Specifying%5Fthe%5FData%5FType%5Ffor%5FAJAX%5FRequests

you may check this and find some inspiration :)

salman