View Full Version : [AJAX] Verifica disponibilità username
In teoria la verifica disponibilità username è già stata fatta, però com'è ora visualizza l'eventuale messaggio di errore in una nuova pagina.
Quello che sto cercando di fare è, al evento onblur della form username, esequire la query php che controlla la disponibilità per poi visualizzare nella stessa pagina, se il nome utente scelto è disponibile, il tutto di fianco alla form.
Ho cercato e trovato un po' di guide che spiegano come fare, però in ogni guida c'è sempre un file javascript che occupa un bel po' di KB (80-90-120) con al suo interno righe e righe di codice incapibile (almeno per me).
E' possibile che non c'è un modo più semplice per farlo? Qualcuno sa dirmi dove posso trovare una buona guida, oppure in alternativa anche spiegarmelo direttamente se non è troppo lungo.
Grazie. Mi affido a voi...
E' normale, c'è bisogno di javascript per farlo.
Ok, che c'è bisogno di javascript lo so, però quello che non capisco è perchè c'è tutta questa differenza. Cioè per visualizzare la stessa scritta in una nuova pagina ho fatto poche righe di codice, mentre per visualizzarlo nella stessa pagina dovrei avere un file di centinaia di righe di codice.
http://antirez.com/articoli/spaghettiajax.html lì è scitto abbastanza bene.
Grazie, provo a vedere cosa riesco a combinare poi ti faccio sapere come va.
malocchio
03-11-2009, 00:49
jQuery :sofico:
Ed io aggiungerei: come minimo!
E' abbastanza da incoscienti buttarsi sull'ajax senza un minimo di framework che assicuri compatibilità e facilità di utilizzo.
La versione minimizzata di jQuery si trova a poche decine di kB. E' ovviamente consigliato linkare al file hostato da google..
Io adesso sto provando l'esempio del link, ci sono ancora degli errori da correggere, infatti quando premo controlla il browser mi dice: Error on page
Pagina html:
<HTML>
<HEAD>
<TITLE>CONTROLLO</TITLE>
<script language="Javascript" type="text/javascript">
<!--
var myRequest = null;
function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
function myHandler2() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
e = document.getElementById("ex4result");
e.innerHTML = myRequest.responseText;
}
}
function esempio4() {
var nome = document.f1.username.value;
var r = Math.random();
myRequest = CreateXmlHttpReq(myHandler2);
myRequest.open("GET","check_user.php?username="+escape(nome)+"&rand="+escape(r));
myRequest.send(null);
}
-->
</script>
</HEAD>
<BODY>
<form name="f1">
<input type="text" name="username" style="width: 230px"/><br><input type="button" onClick="esempio4()" value="Controlla dispo" />
<DIV id="ex4result" STYLE="position:absolute; border-style:solid; border-width:1; border-color:black; width:200px; color:black; background-color:white"></div>
<br>
<input type="text" name="password" style="width: 230px"/>
</form>
</BODY>
</HTML>
Pagina php:
<?php
include("connessioneDB.php");
// Se la variabile username è stata settata allora...
if (!isset($_GET['username'])) { echo "Username non inserito";
else
{
$username = $_GET['username'];
$query = "SELECT username FROM utenti WHERE username = '$username'";
$ris = mysql_query($query, $db);
$ris = mysql_num_rows($ris);
if($ris != '0') { echo "Username già in uso" }
else { echo " Username disponibile" }
?>
Fatemi capire... se lo dovessi fare in questo modo, rispetto a farlo utilizzando jQUERY che differenze ci sarebbero?
Con jQuery ti basterebbe
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#elemento").load("/ajax.php");
});
</script>
Funzionante su tutti i browser, senza alcun bug :)
http://docs.jquery.com/Ajax/load
Con jQuery ti basterebbe
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#elemento").load("/ajax.php");
});
</script>
Funzionante su tutti i browser, senza alcun bug :)
http://docs.jquery.com/Ajax/load
Quei file sono di libero utilizzo?
malocchio
03-11-2009, 22:31
Quei file sono di libero utilizzo?
Ovvio! :D
Ok grazie, però non ho capito un'altra cosa.
Quei file li salvo e basta o vanno modificati e adattati in base alle esigenze?
jquery è un framework (http://it.wikipedia.org/wiki/Framework), quindi possiede tante funzionalità(delle quali la maggior parte non ti verrà nemmeno in mente di usare) che ti fanno risparmiare tempo.
Se ti interessa capirci un minimo di javascript ti consiglio iniziare ad usare un framewrok quando già sai come fare le cose, e sei consapevole che sprechi del tempo a riscrivere sempre le stesse cose.
Il codice che hai postato sembra corretto, se dici di preciso in che riga viene l'errore ti possiamo aiutare, sempre se ti interessa ancora capirci qualcosa.
Si si, il fatto è che non mi da errori sulla pagina, però nella barra in basso del browser (IE), quando premo sul bottone "controlla dispo" mi visualizza il triangolino giallo di errore con scritto a lato: Error on page.
Si si, il fatto è che non mi da errori sulla pagina, però nella barra in basso del browser (IE), quando premo sul bottone "controlla dispo" mi visualizza il triangolino giallo di errore con scritto a lato: Error on page.
Se ci clicchi dovrebbe aprirsi una finestrella con i dettagli dell'errore...
dice:
Message: Object expected
Line: 33
Char: 5
Code: 0
URI: http://127.0.0.1/Prove/prova.html
Non capisco il motivo dato che la pagina c'è ed è in quella cartella.
Incollami la riga 33 di quel file.
Incollami la riga 33 di quel file.
function esempio4() {
var nome = document.f1.username.value;
var r = Math.random();
myRequest = CreateXmlHttpReq(myHandler2);
myRequest.open("GET","check_user.php?username="+escape(nome)+"&rand="+escape(r));
myRequest.send(null);
}
la riga 33 è questa:
myRequest.open("GET","check_user.php?username="+escape(nome)+"&rand="+escape(r));
myRequest sembra essere nullo, incollami la funzione CreateXmlHttpReq
function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
no quella è CreateXmlHttpReq2
É vero non ci avevo fatto caso, nell'esempio CreateXmlHttpReq era un po' prima quindi pensavo usasse solo il 2.
Comunque l'uno è questo:
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
É vero non ci avevo fatto caso, nell'esempio CreateXmlHttpReq era un po' prima quindi pensavo usasse solo il 2.
Comunque l'uno è questo:
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
Ok, quella è sbagliato, usa CreateXmlHttpReq2 che è corretta.
Ok, capito nella guida lo chiamava 2 perchè prima aveva fatto un'altro esempio. Togliendo il 2 non da più quel errore.
Ora nella div dove dovrebbe visualizzare l'echo esce la scritta:
Parse error: parse error in C:\Program Files (x86)\EasyPHP5.3.0\www\Prove\check_user.php on line 7
EDIT: Perfetto ora funziona, c'erano 3 piccole dimenticanze 2 ; e una } non chiusa.
Ok, capito nella guida lo chiamava 2 perchè prima aveva fatto un'altro esempio. Togliendo il 2 non da più quel errore.
Ora nella div dove dovrebbe visualizzare l'echo esce la scritta:
Parse error: parse error in C:\Program Files (x86)\EasyPHP5.3.0\www\Prove\check_user.php on line 7
Si hai un errore nel file php
Questo è il tuo file php correttamente indentato.
<?php
include("connessioneDB.php");
// Se la variabile username è stata settata allora...
if (!isset($_GET['username'])){
echo "Username non inserito";
else{
$username = $_GET['username'];
$query = "SELECT username FROM utenti WHERE username = '$username'";
$ris = mysql_query($query, $db);
$ris = mysql_num_rows($ris);
if($ris != '0') {
echo "Username già in uso"
}
else{
echo " Username disponibile"
}
?>
Impara ad indentare bene e il tuo codice sarà molto più leggibile, ed eviterai errori simili.
ps. L'errore c'è ancora lo lascio notare a te.
edit: ok ho visto ora che te ne sei accorto
Si li ho corretti, mancavano i ; sugli echo.
Si li ho corretti, mancavano i ; sugli echo.
e 2 }
Ho notato che quando visualizza gli echo crea alcuni problemi con le lettere accentate, infatti mi visualizza "Username gi�n uso" quindi oltre a non visualizzare le lettere accentate crea problemi anche con alcuni caratteri adiacenti.
header("Content-type: text/html; charset=ISO-8859-1");
nel file php, prima di tutto.
É consigliabile metterlo in tutti i file PHP?
Perchè se così fosse potre scrivere quella riga di codice nel file config.php che includo a inizio di ogni file.
Se generano una risposta per javascript si.
Un'ultima domanda:
Con lo stesso script al posto di scrivere testo potrei per esempio cambiare le proprietà della div oppure visualizzare le imagini, giusto?
Basterebbe modificare questa parte del codice se non ho capito male:
function myHandler2() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
e = document.getElementById("div_username");
e.innerHTML = myRequest.responseText;
}
}
Quindi per visualizzare un immagine mi basterebbe scrivere nel echo un tag html come questo?
<img src="imm/prova.gif">
Si, se aggiungi veri e propri elementi html(come appunto un <img>) meglio che fai una cosetta del genere.
function myHandler2() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
var img=new Image();
img.src=myRequest.responseText;
var e = document.getElementById("div_username");
e.appendChild(img);
}
}
e in php vai solo
echo "imm/prova.gif";
Comunque va bene anche come hai fatto tu.
di niente buon divertimento.
Ho un'altro problema con le stessa funzione, in pratica ora come ora mi inserisce (innerHTML) in una DIV l'echo che ho come risultato dalla pagina PHP.
Questo serve all'utente per capire dove ci sono errori, però ora mi servirebbe poter settare una variabile che poi userò in un'altra funzione javascript per fare il controllo degli errori. Si può fare?
malocchio
07-11-2009, 17:49
Ho un'altro problema con le stessa funzione, in pratica ora come ora mi inserisce (innerHTML) in una DIV l'echo che ho come risultato dalla pagina PHP.
Questo serve all'utente per capire dove ci sono errori, però ora mi servirebbe poter settare una variabile che poi userò in un'altra funzione javascript per fare il controllo degli errori. Si può fare?
Nella funzione handler ci puoi fare tutto quello che vuoi...
Il fatto è che a viriabile dovrei settarla in base hai risultati ottenuti dal controllo che fa il file .php.
In pratica in base al echo che visualizzo setto la variabile in modo diverso.
malocchio
07-11-2009, 18:30
Il fatto è che a viriabile dovrei settarla in base hai risultati ottenuti dal controllo che fa il file .php.
In pratica in base al echo che visualizzo setto la variabile in modo diverso.
Che testo restituisce la richiesta Ajax?
echo "<img src=\"imm/no.gif\"> Username già in uso";
oppure
echo "<img src=\"imm/yes.gif\"> Username disponibile";
malocchio
07-11-2009, 19:47
echo "<img src=\"imm/no.gif\"> Username già in uso";
oppure
echo "<img src=\"imm/yes.gif\"> Username disponibile";
Hm allora partiamo dal presupposto che se la richiesta ajax restituisce del codice html che viene semplicemente inserito nella pagina tramite js allora vuol dire che non ci dovresti fare niente altro.
Hai due possibilità:
- Cambi totalmente la risposta restituita dal server in modo da essere un qualcosa di gestibile molto facilmente da javascript (un esempio stringhe come "YES" o "NO") e interpretabile tramite un paio di if, con cui setterai le variabili che ti servono e modificherai la pagina (esempio banale document.write() )
Altri validi esempi sono JSON e XML
oppure
- puoi usare un trick per interpretare facilmente la risposta del server:
modifichi l'innerHtml sulla pagina e tramite le funzioni del DOM vai a vedere ad esempio se l'attributo src dell'immagine appena inserita (ti converrebbe settargli un id) è "imm/no.gif" o "imm/yes.gif". Non è il massimo al riguardo di best practice ma funziona...
Hm allora partiamo dal presupposto che se la richiesta ajax restituisce del codice html che viene semplicemente inserito nella pagina tramite js allora vuol dire che non ci dovresti fare niente altro.
Hai due possibilità:
- Cambi totalmente la risposta restituita dal server in modo da essere un qualcosa di gestibile molto facilmente da javascript (un esempio stringhe come "YES" o "NO") e interpretabile tramite un paio di if, con cui setterai le variabili che ti servono e modificherai la pagina (esempio banale document.write() )
Altri validi esempi sono JSON e XML
oppure
- puoi usare un trick per interpretare facilmente la risposta del server:
modifichi l'innerHtml sulla pagina e tramite le funzioni del DOM vai a vedere ad esempio se l'attributo src dell'immagine appena inserita (ti converrebbe settargli un id) è "imm/no.gif" o "imm/yes.gif". Non è il massimo al riguardo di best practice ma funziona...
Per adesso mi posso accontentare della prima soluzione (yes-no), è abbastanza semplice e veloce da fare.
Grazie per l'aiuto. ;)
malocchio
07-11-2009, 20:50
Per adesso mi posso accontentare della prima soluzione (yes-no), è abbastanza semplice e veloce da fare.
Grazie per l'aiuto. ;)
Ed è anche la via migliore ;)
Questa è un ottima notizia!
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.