Using synchronous JAX in registration form for checking username availability - javascript

I have a registration form. When I hit the Submit button it should check if the Username is not taken and that the passwords match. So I wrote a few functions: one that checks the passwords, one that checks if the username is available and the main function, that calls for the 2 checking functions. The password checking function works nice, but my problem is with the username checking function. This is the function:
function checkIsUsernameExist(){
if($("#txtNewUsername").val() == "") {
$("#divIsUsernameExist").html("");
return false;
} else {
$.getJSON("inc/API.php",
{
command : 'isUsernameExist',
username : $("#txtNewUsername").val(),
},
function(result)
{
if (result != true){
$("#divIsUsernameExist").html("This username is available!");
return true;
} else {
$("#divIsUsernameExist").html("This username is not available!");
return false;
}
});
}
}
When the username is empty, it does return False. But when some value is entered it returns Undefined.
Somebody told I should use Synchronous JAX (but didn't tell me how), so I tried to write this code:
function checkIsUsernameExistAsync(){
if($("#txtNewUsername").val() == "") {
$("#divIsUsernameExist").html("");
return false;
} else {
$.ajax({
type: 'POST',
url: 'inc/API.php',
data: ({
command : 'isUsernameExist',
username : $("#txtNewUsername").val(),
cache: false,
async: false
}),
success: function(result){
if (result != true){
$("#divIsUsernameExist").html("This username is available!");
return true;
} else {
$("#divIsUsernameExist").html("This username is not available!");
return false;
}
}
});
}
}
But I get the same result - False when it's empty, Undefined when some value is entered. I tried to change $.ajaxto $.getJSON in the second function, but still had the same result.
This is the code from API.php:
case "isUsernameExist":
echo (isUsernameExist($_REQUEST["username"]));
break;
it calls for a function in included page BusinessLogic.php, here's this function:
function isUsernameExist($username)
{
$arr = select("select * from users where username='$username'");
if(count($arr) == 1)
return json_encode(true);
else
return json_encode(false);
}
How can I make it work??
Thank you!

To summarise the comment chain:
Avoid synchronous AJAX requests: Remove async: false
Add `dataType: 'json',
return inside a success handler of jQuery.ajax does not set the return value of the outer function. To correctly pass the results, define a callback handler. Replace:
Before: http://jsfiddle.net/wGfzc/
After: http://jsfiddle.net/wGfzc/2/

Related

AJAX function does not return any value [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 months ago.
Problem
I have a JavaScript function which uses AJAX for getting a value from a MySQL table through PHP. I wrote all of my PHP and AJAX code correctly because when I check the result it receives, it shows the value as I want it to. So, the problem is when I receive the data correctly, I try to return it. But when I tried calling that function, even though it shows the correct value when I try seeing the value inside the AJAX function, as soon as I return it and check where I call the function, it shows "undefined".
Code Used
This is the AJAX function code -
function CheckUser(EmailID) {
alert(EmailID);
$.ajax("AJAXcommands\\CheckUser.php", {
type: "POST", // type of the data we send (POST/GET)
data: {
EmailID: EmailID,
},
success: function (data) {
// when successfully sent data and returned
alert(data); //It returns correct value here
return data;
},
});
}
And this is where I call the function -
function Confirm(button) {
var input = document.getElementById("UserEmail");
var checkUser = CheckUser(input.value);
alert(checkUser); //This does not return correct value and return "undefined"
if (input.value == "") {
alert("Pls enter a value!");
} else if (checkUser == "true") {
alert("User Doesn't Exist!");
} else {
//Do Something...
}
}
When I try alerting the data in the AJAX function it works correctly, but when I try alerting it in the second function, it returns "undefined"
Tried Solutions
I tried using the callback() method instead of return but it still does not work and returns the same result. I used callback() like this -
callback(data);
So does anyone has any solution to my problem? Thanks in advance!
By the way, thinking it is not relevant, I did not add PHP code, if I need to then please tell me in the comments.
function CheckUser(EmailID, callback) {
alert(EmailID);
$.ajax("AJAXcommands\\CheckUser.php", {
type: "POST", // type of the data we send (POST/GET)
data: {
EmailID: EmailID,
},
success: function (data) {
// when successfully sent data and returned
alert(data); //It returns correct value here
callback(data)
},
});
}
function Confirm(button) {
var input = document.getElementById("UserEmail");
CheckUser(input.value, data => {
alert(data);
if (input.value == "") {
alert("Pls enter a value!");
} else if (data== "true") {
alert("User Doesn't Exist!");
} else {
//Do Something...
}
}
}

Why does this AJAX/Javascript function not work properly until the second time its called?

I have been trying to wrap my head around AJAX requests, and currently implementing some server-side validation for a twitter-bootstrap wizard in Javascript. I am experiencing some bizarre behavior where the function fails the first time its executed, but works as intended the second time. I have simplified my code into this structure:
function do_ajax_validate($user,$email) {
$.ajax({url: "checkuser.php?field=username&query=" + $user, success: function(result){
if (result != 'Valid')
{
$("#userlabel").html(result);
$("#userdiv").addClass("has-error");
$("#userdiv").removeClass("has-success");
$("#username").focus();
is_good[0] = false;
} else {
$("#userlabel").html($user + " is available!");
$("#userdiv").removeClass("has-error");
$("#userdiv").addClass("has-success");
is_good[0] = true;
console.log(is_good[0]);
}
}});
console.log(is_good[0]);
$.ajax({url: "checkuser.php?field=email&query=" + $email, success: function(result){
if (result != 'Valid')
{
$("#emaillabel").html(result);
$("#emaildiv").addClass("has-error");
$("#emaildiv").removeClass("has-success")
$("#email").focus()
is_good[1] = false;
} else {
$("#emaillabel").html('Looks good!');
$("#emaildiv").removeClass("has-error");
$("#emaildiv").addClass("has-success")
is_good[1] = true;
}
}});
console.log(is_good[0]);
console.log(is_good[1]);
if ((is_good[0])&&(is_good[1])) {
return true;
} else {
return false;
}
}
Whenever I go into the console and try to run the function, I call it with a user/email that I know is available and get this output:
do_ajax_validate('available_username', 'available#email.address');
false
false
false
Whenever I run the exact same line, I get this output:
do_ajax_validate('available_username', 'available#email.address');
true
true
true
Then checking on a username/email that I know is taken, it returns the last values:
do_ajax_validate('taken_username', 'taken#email.address');
true
true
true
And (you guessed it) - executing the function again returns the expected results:
do_ajax_validate('available_username', 'available#email.address');
false
false
false
I've been trying different methods for hours now and getting these same bizarre results. What am I doing wrong?
Ajax calls run asynchronously in javascript. Your success callback will only be executed once the Ajax call returns, thus your console.log()s can be called before the success functions executes.
You can have a two solutions for this problem:
Work with result inside the callback you assign to success property. Try to console result under the success property
use async: false under AJAX call like:
$.ajax({
url: "checkuser.php?field=username&query=" + $user,
async: false,
success: function(result){
console.log("result")
} });

D3.get populating Global Object [duplicate]

My experience in jQuery is limited and I've searched around for an answer but can't seem to find it.
This function returns a false or true based on a get. Now my problem is that the function 'Availability' doesn't return a false nor true if I get my data.
This is the code.
function Availability(){
var email = jQuery('#emailRegister').val();
jQuery.get("test.php", {email: email})
.done(function(data) {
if(data == 'true'){
jQuery(".warningEmailDuplicate").hide();
return true;
}else if(data == 'false'){
jQuery(".warningEmailDuplicate").show();
return false;
}
});
}
jQuery.get creates an AJAX request. These are asynchronous. You cannot return a value from the AJAX callback to the calling function. The function will have exited, returning nothing, before the HTTP request completes.
You need to rewrite your code to use callbacks:
function Availability(){
var email = jQuery('#emailRegister').val();
jQuery.get("test.php", {email: email})
.done(function(data) {
if(data == 'true'){
jQuery(".warningEmailDuplicate").hide();
AvailabilityResult(true);
}else if(data == 'false'){
jQuery(".warningEmailDuplicate").show();
AvailabilityResult(false);
}
});
}
function AvailabilityResult(available) {
// *available* will be true or false
// do with this value what you wanted to do with the return value from Availability
}
JQuery is Async scripting language, so when you calls this method compiler does not wait to get the return value.
When you call Availablity(); then off-course an Ajax get request sends to test.php and in the mean time compiler returns nothing from your method and assign variable seems undefined.
To prevent this issue, you need to create a callback function rather than simple return the value.
see example with no callback and example with callback
Try this code:
function Availability(callback){
var email = jQuery('#emailRegister').val();
jQuery.get("test.php", {email: email})
.done(function(data) {
if(data == 'true'){
jQuery(".warningEmailDuplicate").hide();
callback(true);
}else if(data == 'false'){
jQuery(".warningEmailDuplicate").show();
callback(false);
}
});
}
//calling function
Availablity(function(status){
var available = status;
alert(available);
});

jQuery submit form calls a function with ajax

jQuery(document).ready(function(jQuery) {
function checkEmail(email){
jQuery.post('someroute.php',
{email:eamil},
function(data){
if(data==error){
return false;
}
);
return true;
}
jQuery('#myform').submit(function(){
// como code and at the momment this
var result true;
//then I check email
var email = ('#myemail').val();
result = checkEmail(email);
return result;
});
The problem is this, a checkEmail function, first return true, and then return value jQuery.post function. Why?
I checked and in submit, first return true, and if you stop submit then you release that post return the value. Post works fine, but I don't understand why function checkEmail does not wait until post returns the value and goes on until the end to return true.
Because the jQuery.post() function is an AJAX request, and the first A in AJAX stands for asynchronous. That's exactly what asynchronous is, it doesn't stop code execution while it waits for a response. It fires the request and then immediately moves on to any code after the line making the request, in this case your return true statement.
Like Anthony Grist said. .post is an asynchronous call which means it doesn't wait to finish.
I've looked up the .post method (http://api.jquery.com/jQuery.post/).
It's basicly a shortcut for .ajax. You're missing the fail method in here so I would say use the .ajax call.
var value = 1;
var handlerUrl = "someroute.php";
//Do the Ajax Call
jQuery.ajax(
{
url: handlerUrl,
data: { email:eamil },
type: 'POST',
success: function (data)
{
return true;
},
error: function (jxhr, msg, err)
{
return false;
}
});
#user1727336 : Hi! You might want to edit your code and add the missing } and });. Here's a fix:
// enter code here
jQuery(document).ready(function(jQuery) {
function checkEmail(email){
jQuery.post('someroute.php', {email:eamil},
function(data){
if(data==error){
return false;
}
});
return true;
}
});

javascript: returning a bool

I have written a jQuery / JS function which "runs a php query".
function runQuery(op){
if(op.type == "edit"){
var b = false;
if(op.id != "" && (op.fromSong || op.toSong || op.when || op.comment)){
$.post("processor.php", { id: op.id, type: "edit", fromSong: op.fromSong, toSong: op.toSong, when: op.when, comment: op.comment }, function(data){
if(data == true){
console.log(true);
b = true;
}else{
console.log(false);
b = false;
}
});
}
return b;
}
I want it to return true of false depending on what the server answers. I'm sure that the php script is working correctly and returning true or false correctly. But every time i run the function the console.log() outputs the correct value, unlike the variable b. It seems to alway be false. What am I doing wrong?
Since any .ajax() call ($.post is just a wrapper to $.ajax) runs asyncronously, your variable b will always return false. Best thing to "workaround" this is to pass in another callback:
function runQuery(op, callback){
if(op.type == "edit"){
if(op.id != "" && (op.fromSong || op.toSong || op.when || op.comment)){
$.post("processor.php", { id: op.id, type: "edit", fromSong: op.fromSong, toSong: op.toSong, when: op.when, comment: op.comment }, function(data){
if(data == true){
console.log(true);
callback.apply(this, [data]);
}else{
console.log(false);
callback.apply(this, [data]);
}
});
}
}
runQuery({
type: 'edit',
}, function(data) {
alert(data);
});
yes it is wrong.
$.post is done asynchronously, so b is set in the call back but returned before you reach the callback.
you should use $.ajax instead with method:"POST", and async: false
However it could be better to have a deisgn when you use the value of b in the callback only because async: false can freeze your browser.
Your function will return before the asynchronous request to the server has completed. Before you ask, it is both impractical and undesierable to make the call synchronous so that you can return true/false from your function. You might consider supplying a callback argument or arguments to your function:
function runQuery(op, success, failure){
// ...
if(data == true){
success();
}else{
failure();
}
// ...
}
runQuery('edit',
function () { alert('success!'); },
function () { alert('failure!'); }
);
This is a wrong way to do it. Ajax requests are asynchronous and not performed one after another as you expect them too. There is no way around that. You will have to redesign your code to nest ajax calls.
Something similar to this:
$.post("a.php", {function(data){
//1st check
$.post("b.php", {function(data){
//2nd check
$.post("c.php", {function(data){
//final actions
});
});
});
Only this way ajax calls will be stacked - the next will be performed after the previous.

Categories

Resources