aggiungere classe tramite javascript a uno span

[claire89]

Ho un form di registrazione con un campo userid dove inserire l'id utente. Nel momento in cui viene scritto un nuovo id utente, tramite ajax faccio un controllo sul database per scrivere in tempo reale mentre l'utente scrive se quell'id è libero o già occupato.


JS:

 $("input[name='userid']").keyup(function() { 	
var id = $(this).val(); 	
$('#verifica').load('ajax/ajaxVerificaNick.jsp?id='+id);         
var span=$("#verifica");            
 if(span.text()=="Ok"){               
 $(span).toggleClass("Ok",true);             
}else $(span).toggleClass("Ok",false);     });

AJAX:

<%@page import="it.polito.elite.qax.db.UserDataDAO"%><%@page contentType="text/html" pageEncoding="UTF-8"%><%      
String id=request.getParameter("id");     
UserDataDAO Duser=new UserDataDAO();     
if (Duser.controllaUser(id))         out.print("userid already exist");      
  else         out.print("Ok");  %>

PEZZO HTML:

<div class="in">                         
<label for="user">Userid*: </label>
  <input id="user" name="userid" class="required number">                     
 <span id="verifica"></span>                    
 </div>

Io vorrei che se mi viene scritto Ok(id valido) venga aggiunto allo span la classe ok alla quale poi dirò che il colore della scritta deve essere verde. Di per se lo fa ma in ritardo di un passaggio. Se per es esiste già un utente con id =1 ma non 12, quando clicco 1 nello span viene scritto 'utente non valido', quando aggiungo il 2 mi dice 'ok' ma la classe ok lo aggiungo solo se al 12 aggiungo un altro numero come se rimanesse alla scritta precedente, come mai? avengo messo il toggleClass subito dopo la parte di ajax nel momento in cui digito 12 lo span.text() non dovrebbe leggere già come valore Ok anzichè user already exist?

[Vindav]

Prova cosi:

$('#verifica').load('ajax/ajaxVerificaNick.jsp?id='+id, function(){
 $(this).text()=="Ok" ? $(this).toggleClass("Ok",true) : $(this).toggleClass("Ok",false);
});

[claire89]

Originariamente inviato da Vindav
Prova cosi:

$('#verifica').load('ajax/ajaxVerificaNick.jsp?id='+id, function(){
 $(this).text()=="Ok" ? $(this).toggleClass("Ok",true) : $(this).toggleClass("Ok",false);
});

uuu grazie mille cosi funziona senza problemi sapresti solo dirmi cm mai prima rimaneva un passo indietro e adesso no?

[Vindav]

perchè la chiamata ajax è asincrona, dopo aver effettuato la chiamata ajax, js continua ad elaborare i dati successivi senza aspettare la risposta del server. Quindi prima che lo span sia stato valorizzato va ad eseguire le righe di codice successive.

 $("input[name='userid']").keyup(function() { 	
var id = $(this).val(); 	
$('#verifica').load('ajax/ajaxVerificaNick.jsp?id='+id);         
var span=$("#verifica");            
 if(span.text()=="Ok"){               <-- lo span è vuoto perche la chiamata ajax non è ancora terminata
 $(span).toggleClass("Ok",true);             
}else $(span).toggleClass("Ok",false);     });

Nel mio codice invece la funzione viene eseguita solo quando la chiamata ajax è terminata

$('#verifica').load('ajax/ajaxVerificaNick.jsp?id='+id, function(){
 //la chiamata ajax è terminata ed è stato valorizzato lo span con la risposta del server
 $(this).text()=="Ok" ? $(this).toggleClass("Ok",true) : $(this).toggleClass("Ok",false);
});