CODEWITHSUNDEEP
phpjavascriptjquery
user784637
user784637

Reputation: 16092

How to prevent execution of event handler?

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.

Upvotes: 2

Views: 203

Answers (6)

Flash
Flash

Reputation: 16703

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.

Upvotes: 2

Paresh Balar
Paresh Balar

Reputation: 338

Use Synchronous AJAX request dude. By default it will be Asynchronous.

you can do this by adding one parameter..

async : false,

Upvotes: -1

jAndy
jAndy

Reputation: 235962

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/

Upvotes: 2

Grzegorz Łuszczek
Grzegorz Łuszczek

Reputation: 548

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    
            }          
        }       
    });    
 }

Upvotes: 0

Sam Becker
Sam Becker

Reputation: 19636

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.

Upvotes: 2

lumio
lumio

Reputation: 7575

You can use preventDefault:

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

Upvotes: -1

Related Questions