jquery ajax dont work without firebug break point - php

Question

I am using following method to call the php:
function validateEmaiAjax(email){
val = null;
$("#warning").load("https://localhost/Continental%20Tourism/register_ajax.php",{email: email}, function(rspns, stat, xml){
val = rspns;
});
if(val == ".")
return true;
else {
return false;
}
}
my php code is:
<?php
$dbc = mysqli_connect("localhost","root","pass","continental_tourism") OR die(mysqli_connect_error());
$email = $_REQUEST['email'];
$query = "SELECT email FROM customer_info WHERE email = '$email' ";
$r = mysqli_query($dbc, $query) OR die(mysqli_error($dbc));
if(mysqli_num_rows($r) > 0)
echo "Email address exists!";
else
echo ".";
?>
Basically this do check the database and if email exists shows "Email address exists!" if not I want to return true(so I echo "." and compare it). The weird thing is if i put a break point using firebug near if(val == ".") program works correctly and returns true. If I remove that break point function always return false. I cant understand why this happens. Please help! Thanks.

Answer 1

The reason you have this problem is because you have performed an asynchronous request. This means that the if(rspns == ".") will be reached before the response has been received from the server, and the result will always be false.
In order to wrap this code in a function the returns a boolean and does not require a callback function (a blocking procedure) you will need to use a synchronous request:
function validateEmaiAjax(email) {
// This is the correct way to initialise a variable with no value in a function
var val;
// Make a synchronous HTTP request
$.ajax({
url: "https://localhost/Continental%20Tourism/register_ajax.php",
async: false,
data: {
email: email
},
success: function(response) {
// Update the DOM and send response data back to parent function
$("#warning").html(response);
val = response;
}
});
// Now this will work
if(val == ".") {
return true;
} else {
$("#warning").show();
return false;
}
}

Answer 2

If you want to make that code work you should use the $.ajax method instead of load and set async to false to make it wait for the response.
http://api.jquery.com/jQuery.ajax/
$.ajax({
url:"https://localhost/Continental%20Tourism/register_ajax.php",
async: false,
data: {email: email},
success: function(rspns, stat, xml){
val = rspns;
}
});

Answer 3

Why this
else {
return false;
$("#warning").show();
}
$("#warning").show(); will never be executed.
EDIT : There ya go :
function validateEmaiAjax(email){
var URL = 'https://localhost/Continental%20Tourism/register_ajax.php';
var Args = {email: email}
$('#warning').load(URL, Args, function(html){
if(html == '.'){
return true;
} else {
$('#warning').show();
return false;
}
});
return false;
}
Or you can try this also :
function validateEmaiAjax(email){
var URL = 'https://localhost/Continental%20Tourism/register_ajax.php';
var Args = {email: email}
$.ajax({
url: URL,
type: 'GET'
data: Args,
success: function(html){
if(html == '.'){
return true;
} else {
$('#warning').show();
return false;
}
}
});
return false;
}

Answer 4

This is because your function keeps running and hits the if(val == ".") before it's gotten the ajax response back. You need to but that whole if statement inside the ajax callback function.
function validateEmaiAjax(email){
var success;
$("#warning").load("https://localhost/Continental%20Tourism/register_ajax.php",{email: email}, function(rspns, stat, xml){
if(rspns == ".")
success = true;
else {
$("#warning").show();
success = false;
}
});
return success;
}
Also swapped the warning show and return so it would execute