réponse CodeIgniter JSON AJAX avec jQuery

Question

Je suis en train de vérifier le nom d'utilisateur de l'utilisateur lors de la saisie dans le formulaire d'inscription et j'ai créé la fonction suivante:

function validateSignupEmail(input){ 
    if (input == ""){ 
     return "Please enter your usernane."; 
    }else if (input.length > 20){ 
     return "Your username cant exceed 20 characters."; 
    }else{ 
     var type = "username_check"; 
     $.ajax({ 
      type: "POST", 
      url: www+"signup/validate", 
      dataType: 'json', 
      data: { 
       type : type, 
       input : input 
      }, 
      success: function(data) { 
       return data.response; 
      } 
     }); 
    } 
} 

A l'intérieur du contrôleur d'inscription que j'ai la fonction suivante appelée validate()

function validate(){ 
    $type = isset($_POST["type"]) ? $_POST["type"] : ""; 
    $input = isset($_POST["input"]) ? $_POST["input"] : ""; 

    if ($type == "username_check"){ 
     echo json_encode(array('response' => 'username available')); 
    }else{ 
     return false; 
    } 
} 

aussi je le code suivant qui montre ce que l'état de nom d'utilisateur dans un div:

$("#signup_page form input[type='text']#username").keyup(function(){ 
    var text = validateSignupEmail($(this).val()); 
    console.log('text => '+text); 
    $(".signup_ajax_live_messages").find(".username_check").text(text); 
}) 

La chose est que je ne peux pas retourner la réponse AJAX dans le succès: function(){}

Merci.

Answer 1

Bienvenue dans le monde merveilleux d'async, où vous devez attendre la fin de l'appel AJAX avant de traiter la réponse.

Voilà comment vous traiter la réponse dans votre rappel:

$("#signup_page form input[type='text']#username").keyup(function(){ 
    validateSignupEmail($(this).val()); 
}); 

function validateSignupEmail(input){ 
    if (input == ""){ 
     return "Please enter your usernane."; 
    }else if (input.length > 20){ 
     return "Your username cant exceed 20 characters."; 
    }else{ 
     var type = "username_check"; 
     $.ajax({ 
      type: "POST", 
      url: www+"signup/validate", 
      dataType: 'json', 
      data: { 
       type : type, 
       input : input 
      }, 
      success: function(data) { 
       $(".signup_ajax_live_messages").find(".username_check").text(data.response); 
      } 
     }); 
    } 
} 

Sur une note côté: Êtes-vous sûr de vouloir faire une nouvelle demande AJAX sur chaque combinaison de touches?

---

Si vous voulez vérifier que lorsque l'utilisateur a fait une pause à taper, utilisez setTimeout:

var timer; 
$("#signup_page form input[type='text']#username").keyup(function(){ 
    var text = $(this).text(); 
    timer && clearTimeout(timer); 
    timer = setTimeout(function(){ 
     validateSignupEmail(text); 
    }, 400); // <-- this is the amount of milliseconds for the user to pause before making the AJAX call 
}); 

Voici un exemple: http://jsfiddle.net/dMhdD/

Answer 2

Vous ne pouvez pas retourner une variable de la fonction de rappel.

Lorsqu'une requête AJAX est envoyée, le flux d'application est renvoyé directement même si la requête n'est pas encore terminée. Quelque temps plus tard, la demande se termine et le rappel success est exécuté.

Vous devez modifier votre message validateSignupEmail() pour accepter un rappel.

function validateSignupEmail(input, callback){ 
    if (input == ""){ 
     return "Please enter your usernane."; 
    }else if (input.length > 20){ 
     return "Your username cant exceed 20 characters."; 
    }else{ 
     var type = "username_check"; 
     $.ajax({ 
      type: "POST", 
      url: www+"signup/validate", 
      dataType: 'json', 
      data: { 
       type : type, 
       input : input 
      }, 
      success: function(data) { 
       callback(data.response); 
      } 
     }); 

     return "pending"; // let us know the AJAX request is in progress 
    } 
} 

Vous l'utiliseriez ensuite comme ceci;

$("#signup_page form input[type='text']#username").keyup(function(){ 
    var text = validateSignupEmail($(this).val(), function (text) { 
     console.log('text => '+text); 
     $(".signup_ajax_live_messages").find(".username_check").text(text); 
    }); 

    if (text !== "pending") { 
     // text contains the error :(. 
    } 
})