Eseguire una query senza aggiornare la pagina [AJAX/PHP]

[radiodelmomento]

Ciao a tutti ragazzi, vi chiedo un altro aiuto.
Purtroppo per voi, le mie idee non finiranno mai!

Quello che vorrei fare è perfezionare questa pagina [NO SPAM], facendo in modo che quando viene premuto il pulsante "VOTA" non si aggiorni tutta la pagina, ma soltanto il bottone, che diventerà disabilitato. La query verrà eseguita al momento, ovviamente.
Purtroppo l'AJAX non l'ho ancora studiato, per cui per piacere postatemi il codice commentandolo in modo che possa capire come funzioni (quale guide, io così ho imparato il PHP!), ovvero, quanto mi costa l'implementazione di questo script visto che non so farlo da me?

Devo postarvi i codici?
Grazie e buon lavoro a tutti.

...
Purtroppo l'AJAX non l'ho ancora studiato, per cui per piacere postatemi il codice commentandolo in modo che possa capire come funzioni (quale guide, io così ho imparato il PHP!).
...

Se la tua richiesta è questa, almeno da parte mia, la risposta è

STUDIA.

E quando lo avrai fatto, implementa la cosa.

Perchè mai dovrei sprecare il mio tempo per realizzare gratis un lavoro per uno che vuole tutto e subito?

Questo genere di richieste, sempre a mio avviso, andrebbero fatte così:

Quanto mi costa l'implementazione di questo script visto che non so farlo da me?

[karl94]

Per una cosa simile non è necessario AJAX. AJAX serve solo ad ottenere informazioni esterne, tramite l'esecuzione di una richiesta HTTP.
A te serve solo modificare la pagina, usando quindi il DOM.
È sufficiente quindi impostare la proprietà disabled dell'oggetto DOM rappresentante il pulsante su true.

Per una cosa simile non è necessario AJAX. AJAX serve solo ad ottenere informazioni esterne, tramite l'esecuzione di una richiesta HTTP.
A te serve solo modificare la pagina, usando quindi il DOM.
È sufficiente quindi impostare la proprietà disabled dell'oggetto DOM rappresentante il pulsante su true.

Scusami karl, ma credo che il suo scopo sia, oltre che disabilitare il tasto, anche quello di registrare il voto, sempre senza ricaricare la pagina. Ecco dove serve ajax.

Dimentica però che vanno considerate anche tanti altri fattori tra cui il fatto che se un utente preme F5 il tasto ritorna magicamente attivo ...
Nulla di che, ma neanche le due righe per disabilitare il tasto ...

[radiodelmomento]

Grazie per le risposte.
Quello che dovrei fare è semplicemente eseguire 2 query e rendere il pulsante disabilitato.
Poi c'è un altro script in PHP che, se l'utente ha già votato, disabilita il pulsante. Questo al caricamento della pagina.
Grazie.

[karl94]

Scusami karl, ma credo che il suo scopo sia, oltre che disabilitare il tasto, anche quello di registrare il voto, sempre senza ricaricare la pagina. Ecco dove serve ajax.

Dimentica però che vanno considerate anche tanti altri fattori tra cui il fatto che se un utente preme F5 il tasto ritorna magicamente attivo ...
Nulla di che, ma neanche le due righe per disabilitare il tasto ...

Ops... Sì, hai ragione.
Vediamo di fornire la risposta corretta:

Anzitutto AJAX serve solo a comunicare con l'esterno, tramite l'esecuzione di una richiesta HTTP, le modifiche sul documento (leggasi pagina) vengono effettuate mediante il DOM.
Per disabilitare il pulsante è sufficiente impostare la proprietà disabled dell'oggetto DOM rappresentante il pulsante su true.
Per inviare la richiesta, ti serve un oggetto XMLHttpRequest, una volta creato, chiamerai il metodo open passando come parametri il metodo HTTP (lo stesso che hai specificato con l'attributo method nel modulo) e l'indirizzo (attributo action).
Infine chiamerai il metodo send, passando come parametro i dati della richiesta (se per esempio hai scelto il metodo POST).
Dovrai però anche assicurarti che la richiesta sia andata a buon fine, dovrai dunque ascoltare per i diversi eventi che indicheranno lo stato della richiesta.

[radiodelmomento]

Scusa ma AJAX per me è arabo.
Iniziamo dall'open.

open(method, url, async, user, password)

method: significa il metodo del form? POST o GET?
url: che sarebbe
async: IDEM
user, password: del database?

Grazie.

[karl94]

Prima di poter chiamare un metodo, ti serve costruire l'oggetto.
In Javascript un oggetto si costruisce mediante l'operatore new, esattamente come in PHP, Java o C++.
Una volta costuito e memorizzato in una variabile, potrai chiamare il suo metodo open.
Gli argomenti che devi passare sono quelli che ti ho indicato prima:

metodo HTTP (lo stesso che hai specificato con l'attributo method nel modulo) e l'indirizzo (attributo action).

Gli altri tre parametri non sono necessari, e raramente vengono usati.

[alemoppo]

Se vuoi imparare ajax, leggi questo.
Altrimenti, (una via più facile) è usare jQuery (jQuery.ajax()).
Penso che questo esempio (preso dalla pagina che ti ho linkato) chiarisca tutto:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

..ovvero invia alla pagina "some.php" i dati contenuti in "data" tramite POST. Quando ha fatto la richiesta, se tutto è andato a buon fine (success), appare l'alert() con msg che è quello che ha scritto (ad esempio, con echo()) la pagina "some.php"


Ciao!

EDIT: anticipato, ma lascio :P

[radiodelmomento]

OK grazie tante.
Ho capito.
Fra quali tags dovrei mettere quello script?

Poi (dimmi se non sbaglio) dovrei modificarlo in questo modo:

   type: "POST",
   url: "Classifica.php", //perché quando uno clicca sul bottone, per ora, viene reindirizzato alla stessa pagina
   data: "id=$id&pos=$pos&ok=$ok&thread=$thread", //i valori li ho messi uguali per fare un esempio: è corretto così? P. S.: i valori li prende da uno script PHP
   success: function(msg){
     //Qui, se tutto è andato a buon fine, dovrei far diventare il bottone disabilitato: come faccio con DOM?
   }

Grazie a tutti e due.

[alemoppo]

   type: "POST",
   url: "Classifica.php", //perché quando uno clicca sul bottone, per ora, viene reindirizzato alla stessa pagina
   data: "id=<?= $id ?>&pos=<?= $pos ?>&ok=<?= $ok ?>&thread=<?= $thread ?>", //i valori li ho messi uguali per fare un esempio: è corretto così? P. S.: i valori li prende da uno script PHP
   success: function(msg){
     //Qui, se tutto è andato a buon fine, dovrei far diventare il bottone disabilitato: come faccio con DOM?
   }

Teoricamente dovrebbe essere corretto.
Ricordati che stai usando jQuery, quindi lo devi includere nella pagina.

Ciao!

[radiodelmomento]

OK grazie.
È la stessa cosa se metto <?php oppure semplicemente <? (è soltanto per imparare).

Poi fra quali tags dovrei mettere quello script?
Ultima cosa: come rendo il bottone disabilitato?

Thanks a lot.

[alemoppo]

OK grazie.
È la stessa cosa se metto <?php oppure semplicemente <? (è soltanto per imparare).

<?= $variabile ?>

è equivalente a:

<?php echo $variabile; ?>

Poi fra quali tags dovrei mettere quello script?

Cerca "includere jQuery js" su google.

Ultima cosa: come rendo il bottone disabilitato?

cerca "disabilitare button js" su google.

Ciao!

[radiodelmomento]

Qui (il primo risultato trovato con la tua ricerca) ho trovato questo, ma non capisco cosa devo inserire in jquery.js...

<script src="jquery.js"></script>

Poi dice

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

(questo è quello che dicono molti siti)
Che devo fare?
Per quanto riguarda la disabilitazione del bottone io vorrei che si disabilitasse soltanto se tutto è riuscito: su Google ho trovato come disabilitare il bottone dopo averlo premuto (Su HTML, ad esempio).

[alemoppo]

Se vuoi usare il file "jquery.js", devi creare un file (chiamato appunto jquery.js) con dentro ad esempio questa roba.

Oppure, puoi usare il secondo metodo, ovvero quello di includerlo da remoto, senza occupare kb sul tuo spazio.

Per il bottone, la pagina che hai linkato:

<form name="mio">
<input type="submit" name="mioInput">
</form>
Basterà scrivere:

mio.mioInput.disabled=true;

non c'é alcun cenno che viene disabliltato dopo la pressione.. dove l'hai letto? Da soltanto il codice per disabilitare il pulsante. Puoi, puoi "invocarlo" quando vuoi (nel tuo caso, dopo l'invio corretto dei dati).

Ciao!

[radiodelmomento]

Grazie, ho capito.
Dovrei quindi scrivere:

<form name="mio">
//...
<input type="submit" name="GO">
<script src="jquery.js">
   type: "POST",
   url: "Classifica.php", //perché quando uno clicca sul bottone, per ora, viene reindirizzato alla stessa pagina
   data: "id=<?= $id ?>&pos=<?= $pos ?>&ok=<?= $ok ?>&thread=<?= $thread ?>", //i valori li ho messi uguali per fare un esempio: è corretto così? P. S.: i valori li prende da uno script PHP
   success: function(msg){
mio.GO.disabled=true;
   }
</script>
//..
</form>

Giusto?
P. S.: ho cambiato il nome dell'input in GO per sapere se è giusto cambiare quella parte.

Scusa ma mi ero dimenticato COMPLETAMENTE del voto: appena viene cliccato il bottone dovrei aggiungere +1 al voto della canzone... come si dovrebbe fare?

Grazie ancora.

[alemoppo]

Ti sei dimenticato un pezzo di codice. (io prima non l'ho messo per renderlo uguale al tuo; pensavo che avessi tagliato il sorgente per farlo più corto)

Comunque, credo che hai capito male il funzionamento degli eventi....

Se tu hai un pulsante, e subito dopo metti un codice js, non ha senso pensare che quel codice viene eseguito dopo la pressione del pulsante...

Guardati l'evento onClick.

Ciao!

[radiodelmomento]

Sì, scusa.

<head>
<script src="jquery.js">
$.ajax({
   type: "POST",
   url: "Classifica.php",
   data: "id=<?= $id ?>&pos=<?= $pos ?>&ok=<?= $ok ?>&thread=<?= $thread ?>",
   success: function(msg){
mio.GO.disabled=true;
   }
});
</script>
</head>
//..
<form name="mio">
//...
<input type="submit" name="GO">
//..
</form>

Adesso è corretto?

[alemoppo]

sembra che sia corretto. Adesso devi far in modo che quando clicchi sul pulsante, parta lo script ajax.
Se però fai un form e clicchi sul submit, la pagina si "ricarica" in automatico, cosa che con ajax non deve accadere.
Io di solito metto un <button> e, onclick faccio eseguire lo script.
Se vuoi farlo tramite un submit di un form, dopo l'onclick devi mettere un "return false". in questo modo:

<form>
...
<input type='submit' onClick='Funzione_che_invia_i_dati(); return false;'>
...
</form>

Ciao!

[radiodelmomento]

OK, ma quale sarebbe l'azione?
$.ajax?
Se no, come faccio a fargli capire che $.ajax è la funzione?
Grazie.

[alemoppo]

function Funzione_che_invia_i_dati()
{
$.ajax({
   type: "POST",
   url: "Classifica.php",
   data: "id=<?= $id ?>&pos=<?= $pos ?>&ok=<?= $ok ?>&thread=<?= $thread ?>",
   success: function(msg){
mio.GO.disabled=true;
   }
});
}

Ti è chiaro adesso?

Ciao!

[radiodelmomento]

Chiarissimo, grazie mille! Ti chiedo l'ultima cosa: come faccio ad aggiornare anche il numero dei voti periodicamente e quando viene premuto il bottone?
Mi spiego meglio: i voti si aggiornano automaticamente ogni minuto (ad esempio). Se l'utente preme il bottone si aggiorna in quell'istante e non attende i due minuti.
Esempio:
Ore 17:00 entro nella classifica.
Ore 17:02 si aggiorna la classifica.
Ore 17:03 voto e si aggiorna tutta la classifica.
Ore 17:05 si aggiorna la classifica.

Grazie mille!

[radiodelmomento]

Se qualcuno sa come fare l'aggiornamento automatico glie ne sarei grato, ma vorrei chiedere un'altra cosa, cioè quella di modificare il bottone...
Quando non è stato cliccato si visualizza il bottone "VOTA".
Quando viene premuto il testo del bottone cambia in "ATTENDERE" e diventa disabilitato.
Se tutto è andato bene il bottone torna a "VOTA" disabilitato.
Thanks :-)

al click sul pulsante:

$(this).val('Attendere...').attr('disabled', 'disabled'); 

all'evento success della chiamata ajax

$(this).val('VOTA').attr('disabled', ''); 

[radiodelmomento]

Se ho ben capito...

function invio()
{
$.ajax({
   type: "POST",
   url: "Classifica.php",
   data: "id=<?= $id ?>&pos=<?= $pos ?>&ok=<?= $ok ?>&thread=<?= $thread ?>",
$(this).val('Attendere...').attr('disabled', 'disabled');
   success: function(msg){
mio.GO.disabled=true; ?//è la stessa cosa di:
$(this).val('VOTA').attr('disabled', '');  //?
     }
});
}

Giusto?
Grazie!

EDIT:

Scusate ma non riesco a fare funzionare il codice...
Questa è la pagina.
Quando clicco il pulsante si esegue il return false;, che però non funziona con il richiamo della funzione.
Mi spiego meglio.
La funziona l'ho chiamata "vota".
Se metto onClick="vota(); return false;" si aggiorna tutta la pagina, se invece metto solo onClick="return false;" si preme solo il bottone e alla pagina non succede niente.
Anche se si aggiorna la pagina, però, non si esegue la query.
Grazie.

[alemoppo]

Sostituisci:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
function vota()
{
$.ajax({
   type: "POST",
   url: "ClassificaAJAX.php",
   data: "id=&pos=&ok=&thread=",
$(this).val('Attendere...').attr('disabled', 'disabled');
   success: function(msg){
$(this).val('VOTA').attr('disabled', '');
     }
});
}
</script>

Con:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
function vota(numero)
{
	$('#pulsante'+numero).val('Attendere...').attr('disabled', true);	
	$.ajax({
		type: "POST",
		url: "ClassificaAJAX.php",
		data: "id=&pos=&ok=&thread=",
		success: function(msg){
				$('#pulsante'+numero).val('  VOTA  ');
		},
		error:function()
		{
			$('#pulsante'+numero).val('  VOTA  ').attr('disabled', false);	
		}
	});
}
</script>

Però, nei pulsanti, devi aggiungere il "numero della canzone", in questo modo:

<input type="submit" name="Submit" value="  VOTA  " id='pulsante1' onClick="vota('1'); return false;" />
<input type="submit" name="Submit" value="  VOTA  " id='pulsante2' onClick="vota('2'); return false;" />
etc etc...

p.s: la riga:

data: "id=&pos=&ok=&thread="

credo che dovresti aggiungere qualcosa... Ovvero, dare dei valori ai vari parametri, no?

Ciao!

[radiodelmomento]

OK, ho modificato il tutto come mi hai detto tu, ma non cambia niente, se non il codice HTML.
La pagina si aggiorna come prima.
Non avevo pensato a quella riga: come la dovrei sistemare?
Avevo pensato a id=<?= $id ?>, ma $id non è scritto da nessuna parte prima.
Poi id=<?= $_GET['id'] ?> non significa niente perché i valori non passano tramite GET.
Cosa dovrei utilizzare?
Grazie ancora per l'aiuto!

--------

Non credo, ma $_REQUEST può servire a qualcosa in questo caso?

OK, ho modificato il tutto come mi hai detto tu, ma non cambia niente, se non il codice HTML.
La pagina si aggiorna come prima.
Non avevo pensato a quella riga: come la dovrei sistemare?
Avevo pensato a id=<?= $id ?>, ma $id non è scritto da nessuna parte prima.
Poi id=<?= $_GET['id'] ?> non significa niente perché i valori non passano tramite GET.
Cosa dovrei utilizzare?
Grazie ancora per l'aiuto!

Non credo, ma $_REQUEST può servire a qualcosa in questo caso?

Stai facendo un po' di confusione.

I parametri indicati da alemoppo (id, ...) sono riferiti a JS, e quindi lato client, e non via PHP (lato server), anche perchè con una sola funzione gestisci più casi (i pulsanti sono diversi e devi gestire la pressione di ognuno di essi).

Ciao

[radiodelmomento]

Ciao
Come dovrei impostare il pulsante, o il form quindi?
Per ora utilizzo questo:

<form id="form1" name="form1" method="post" action="Classifica.php?id=$id&pos=$item&ok=ok&thread=$thread">
  <input type="submit" name="Submit" value="  VOTA  " />
</form>

Il codice è rinchiuso tra i tag del PHP e ho tolto \ per farvi leggere meglio il codice.
Grazie. :-)

Se rileggi i messaggi di alemoppo vedrai che la chiamata ajax è stata inserita in una funzione, ed è questa che devi richiamare con l'evento click sul pulsante. I parametri ti servono per passare alla pagina che processerà il voto a chi deve attribuire la preferenza.