Simple AJAX query in chrome/safari providing not-so-simple debugging situation.

Question

Hi,

I have a very simple jQuery/ajax script for a membership driven website. The script just checks to see if the user entered info, validates it against my database and returns 1 for a failed login attempt, and 0 if the username/password match.

The function works perfectly when I run it w/o calling it from ajax.

Firefox: everything works.
Chrome/Safari: The query is locking everything up. When I enter valid info, there isn't even any record of a request going out (in the developer tools chrome/safari supply). When invalid info is entered the request is going out and it returns 3.

I'm pretty baffled by this.

Is it a "sandbox" issue? as I understand it Firefox and Chrome/safari handle XHR differently... Although don't ask me how.

I am running a base install of MAMP. Could this be something on my developer environment? (I will be testing it on a live server later this afternoon)

Here is my AJAX call and the php script it is calling.

AJAX:

$.ajax({
  //I've also tried..
  //url: '_modules/php/session.php',
 url: 'http://localhost/current/100TradeJack/httpdocs/_modules/php/session.php',
 type: 'POST',
 cache: false,
 timeout: 5000,
 data: "method=login&"+$('#loginTop').serialize(),
 error: function(XMLHttpRequest, ajaxOptions, thrownError)
 {
  alert("ERORR!!");
 },
 success: function(response){
  alert(response);
  if(response == '0'){ 
   alert("log user in");
   window.location.replace("http://localhost/current/100TradeJack/httpdocs/trading.php");
  } else if(response == '1') {
   alert("invalid username/password");
  } else {
   alert("ERRROOR!");
  }

 }
});

session.php:

if($_POST['method'] == 'login'){
    $validated = login($_POST['email'], $_POST['password']);
    echo $validated;
}


fucntion login($email, $password){
$connection = mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("sandbox_members", $connection) or die(mysql_error());


if($email){
 $email = mysql_real_escape_string($email);
} else {
 return 1;
}

if($password){
 $password = mysql_real_escape_string($password);
} else {
 return 1;
}


$query = "SELECT * FROM users WHERE username='". $email . "' AND password='". $password ."'";

$result = mysql_query($query);

if($row = mysql_fetch_array($result)){
 return 0; 
} else {
 return 3;
}

//if it gets to here the username/password combo was incorrect or was not found in the db
return 1;
mysql_close($connection);
}

Answer 1

This shouldn't be a sandboxing issue. How are you firing this ajax request? Are you sure that the development console provide no error output (make sure you're not excluding errors).

I don't have a PHP/web dev environment up but you can try some debugging stuff:

• Try setting the url to a domain-relative url: '/current/100TradeJack/httpdocs/_modules/php/session.php'
• Point the login verification URL to a static page with 0 or 1 to test if that works.
• Figure out where chrome and safari "go silent" by putting alerts before this ajax call.
  • Is the event getting fired?
  • Is your function (containing this ajax request) getting called?
  • Is your initialization code getting called?
• Do a plain ajax request which fetches the login verification result (or the static one) and alert the response out. Try onclick or when the page finishes loading.
• If you have a lot of JS code, simplify the problem. Start slashing code out (back it up first), and see if it still (doesn't) work.
• Blame IE (whoops). If you're still stumped, you can submit the slashed code up to webkit as a bug. You can also check if it's a confirmed bug there.

Answer 2

Instead of

 return 1;

use

echo "1";

Your calling up the function in ajax and it expects response writeline out in the page

---

Also check your mysql results maybe there is an error in the query that why its routing to

else { return 3 };

Answer 3

There is a small issue in your PHP code:

After your query db, you return some numbers representing state, however on the end of the script you close the connection to your database... mysql_close($conn) will never occur as you jump out of the function scope with those various returns before the closing statement. Maybe those hiccups you experience are because of unclosed DB connections.

JS code looks fine

I modified the ajax call to grab a static html, which I edited to various scenarios (using 0, 1, ...) and it worked perfectly (Opera, Chrome, FF)..

Also try window.alert($('#loginTop').serialize()) to check posted data, or create a plain html document with a form and JS (without all other logic) and point it to your script.

Also check your scripts for console.log() as this may destroy your javascript in other browsers than FF