[AJAX] Verifica disponibilità username

[Fede 88]

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...

[ndakota]

E' normale, c'è bisogno di javascript per farlo.

[Fede 88]

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.

[MEMon]

http://antirez.com/articoli/spaghettiajax.html lì è scitto abbastanza bene.

[Fede 88]

Grazie, provo a vedere cosa riesco a combinare poi ti faccio sapere come va.

[nico159]

jQuery

[malocchio]

Originariamente inviato da nico159

jQuery

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..

[Fede 88]

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?

[nico159]

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

[Fede 88]

Originariamente inviato da nico159

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]

Originariamente inviato da Fede 88

Quei file sono di libero utilizzo?

Ovvio!

[Fede 88]

Ok grazie, però non ho capito un'altra cosa.
Quei file li salvo e basta o vanno modificati e adattati in base alle esigenze?

[MEMon]

jquery è un 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.

[Fede 88]

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.

[MEMon]

Originariamente inviato da Fede 88

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...

[Fede 88]

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.

[MEMon]

Incollami la riga 33 di quel file.

[Fede 88]

Originariamente inviato da MEMon

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

[MEMon]

myRequest sembra essere nullo, incollami la funzione CreateXmlHttpReq

[Fede 88]

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