How to prevent execution of event handler? - php

Question

I wish to authenticate a user each time they click a button. If the user is logged out, and they attempt to click on a button, they are redirected home.
However the code after validate() is executes before the user is redirected home. In this example the popup always displays before the user is directed back home. How do I wait for the execution of validate() to complete before the rest of the event handler attempts to execute?
$("#main-display").on('click', 'button', function (event){
validate();
hello = window.open( '', '', "height = 100, width = 100");
hello.document.write('hello');
});
function validate(){
$.ajax({
url: 'validate_user.php',
dataType: "json",
success: function(response) {
if(response.status == 'false') {
location.href = 'home.php';
}
}
});
}
validate_user.php
<?php
session_start();
if(!isset($_SESSION['userId'])){
session_destroy();
$response['status'] = 'false';
}
else {
$response['status'] = 'true';
}
echo json_encode($response);
?>
EDIT
Thanks for the answers, however the popup still displays before the user is directed back even with the code bits of the most upvoted answers.

Answer 1

You could run your code in the ajax callback instead of directly after you start the request. What the below does is set up your validate function to take a single function parameter. This function is called after the AJAX has been run.
You could even use else on line 14 to only run the code if they are valid users.
$("#main-display").on('click', 'button', function (event){
validate(function(){
//some code here
});
});
function validate(callback){
$.ajax({
url: 'validate_user.php',
dataType: "json",
success: function(response) {
if(response.status == 'false') {
location.href = 'home.php';
}
callback();
}
});
}
This is flexible as it allows validate to be used in different contexts.

Answer 2

Use jQuery's Deferred objects, which are encapsulated in each jqXHR. Looks like
function validate(){
return $.ajax({ // <-- new return statement
url: 'validate_user.php',
dataType: "json",
success: function(response) {
if(response.status == 'false') {
location.href = 'home.php';
}
}
});
}
..and after you returning that jqXHR, continue like:
$("#main-display").on('click', 'button', function (event){
validate().done(function() {
// this code gets executed after the request successfully finished
});
});
This is a very nice and convinient technique to work with asyncronous processes. You can also catch more cases, like .fail() for any error case.
Have a further read:
http://api.jquery.com/category/deferred-object/

Answer 3

Use a callback function at the end of your success handler:
$("#main-display").on('click', 'button', function (event){
validate(function() {
//code to execute after validate AJAX is complete
});
});
function validate(cb){
$.ajax({
url: 'validate_user.php',
dataType: "json",
success: function(response) {
if(response.status == 'false') {
location.href = 'home.php';
}
cb();
}
});
}
This will execute the callback function after the AJAX request is complete, without locking up the UI in the meantime.

Answer 4

What about that:
$("#main-display").on('click', 'button', function (event){
validate();
});
function validate(){
$.ajax({
url: 'validate_user.php',
dataType: "json",
success: function(response) {
if(response.status == 'false') {
location.href = 'home.php';
}else{
//some code here
}
}
});
}

Answer 5

You can use preventDefault:
$("#main-display").click(function(event) {
event.preventDefault();
// do the rest of the code
});

Answer 6

Use Synchronous AJAX request dude. By default it will be Asynchronous.
you can do this by adding one parameter..
async : false,