ajax e bottone + passaggio di dati senza refresh pagina

[-AA-]

Mi spiego

- ho una serie di record che estraggo da mysql utilizzando php
- per ogni record ho 1 immagine con un link che valorizza un campo
es:
recordi 1 [img]pubblica.jpg[/img]

--------------------------------
quando clicco su questa immagine vado ad una pagina che fa l'update di 1 valore
es:
update tabella set campo = $valore where id = idrecord
(il campo da upgradare è 1 integer zero o 1)
e poi faccio un redirect alla pagina che mostra i record
--------------------------------
Nota:
Quando ciclo sulla tabella a seconda dello stato del campo integer viene mostrata accesa o spenta
--------------------------------
Funziona tutto ok utilizzando php
--------------------------------

DOMANDA:
mi piacerebbe far si che al click il dato fosse passato con ajax senza fare il refresh della pagina e anche l'immagina si aggiorni

Qualcuno ha qualche suggerimento?

[m4rko80]

Ciao, e' abbstanza semplice... forse se non hai mai usato ajax dovresti prenderci un po la mano pero' potresti fare cosi':

Io per comodita' uso jquery(libreria javascript orami usata da molti)
questo il sito con la documentazione http://jquery.com/ e download volendo anche se puio includere direttamente con
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

A questo punto avendo la libreria usi ajax di jquery
Avrai la tua funzione tipo:

function updateDB(idRecord){
$.ajax({
   type: "POST", //metodo get o post
   url: "publica.php", //lo script da richiamare
   data: "idrecord="+idRecord, //tutto quello che passi come parametri (non serve ? iniziale)
   success: function(dati){ //arrivi qui se la chiamata va a buon fine
     //dati è quello che ritorna lo script chiamato
    

   }
 });

}

Ora tu hai come parte di html questo:
<a href="publica.php?idrecord=100">[img]pubblica.jpg[/img]

Che dovra' diventare per esempio:
<a href="publica.php?idrecord=100">[img]non_pubblica.jpg[/img]

Ora non so se interessa cambiare solo l'immagine o che nel tuo esempio; in tal caso ti basta dare un id al tag IMG e cambiare con javascript SCR a seconda del nuovo stato oppure se ti viene piu' comodo cambiare tutto il blocco <a href="publica.php?idrecord=100">[img]pubblica.jpg[/img] coi nuovi dati.

Tutto questo va gestito da quelle che ritorna ..success: function(dati){.. scritto sopra dove dati sarebbe o il valore per farti capire lo stato nuovo o tutto il nuovo pezzo html da usare e quindi:

function updateDB(idRecord){
$.ajax({
   type: "POST", //metodo get o post
   url: "publica.php", //lo script da richiamare
   data: "idrecord="+idRecord, //tutto quello che passi come parametri (non serve ? iniziale)
   success: function(dati){
    if(dati==1){
      $('#idRecord').attr('scr','pubblica.jpg');
    }else{
      $('#idRecord').attr('scr','non_pubblica.jpg');
    }
      //$('#idRecord') per jquery equivale a document.getElementById(idRecord)
      //supponendo che avrai <img id="idRecord"..... />
   }
 });

}

Magari visto così senza aver mai provato sembra un casino ma se ci prendi la mano diventa molto semplice

[-AA-]

Grazie 1000 m4rko80
Sei stato chiaro, si ho jquery e conosco ajax (oddio conosco è una parola grossa) ora mi leggo bene quel che hai scritto e poi ti faccio sapere, grazie ancora.

[-AA-]

Ciao m4rko80
Ho provato e non mi funziona, sicuramente non ho capito qualcosa, ti riporto di seguito quanto ho fatto

AJAX

updateDB(idRecord){
$.ajax({
   type: "GET", //metodo get o post
   url: "gestione_prodotto_online.php", //lo script da richiamare
   data: "idrecord="+idRecord, //tutto quello che passi come parametri (non serve ? iniziale)
   success: function(dati){
    if(dati==1){
      $('#idrecord').attr('scr','1.jpg');
    }else{
      $('#idrecord').attr('scr','0.jpg');
    }
      //$('#idRecord') per jquery equivale a document.getElementById(idRecord)
      //supponendo che avrai <img id="idRecord"..... />
   }
 });

}

Immagine con link:

[img]./images/0.png[/img]

Se metto
<a href="gestione_prodotto_online.php?idrecord=26548" >
quando premo l'icona va alla pagina in questione io volevo evitarlo questo


Dove sbaglio?
[/code]

[m4rko80]

Ciao, forse ho tralasciato delle cose scontate per me...


[img]./images/0.png[/img]
IDRECORD e' l'id effettivo che sta a db, da passare alla funzione, quello che ho messo qui

updateDB(idRecord){ (manca il "funcrion" --> function updateDB(idRecord){....

updateDB(idRecord){
$.ajax({
   type: "GET",
   url: "gestione_prodotto_online.php",
   data: "idrecord="+idRecord, 
   success: function(dati){
    if(dati==1){
      $('#idrecord').attr('scr','1.jpg');
    }else{
      $('#idrecord').attr('scr','0.jpg');
    }
      //$('#idRecord') per jquery equivale a document.getElementById(idRecord)
      //supponendo che avrai <img id="idRecord"..... />
   }
 });

}

dati ritorna 1 o altro ma questo lo scelgi tu dal php, e sarà quindi un echo 1 o echo 'ok'.... quello che vuoi ... ti serve per gestirti l'esito.

Aggiungi alla chiamata ajax:

type: "GET",
dataType: "html",

url: "gestione_prodotto_online.php",

[m4rko80]

Ciao, forse ho tralasciato delle cose scontate per me...


[img]./images/0.png[/img]
IDRECORD e' l'id effettivo che sta a db, da passare alla funzione, quello che ho messo qui

updateDB(idRecord){ (manca il "funcrion" --> function updateDB(idRecord){....

updateDB(idRecord){
$.ajax({
   type: "GET",
   url: "gestione_prodotto_online.php",
   data: "idrecord="+idRecord, 
   success: function(dati){
    if(dati==1){
      $('#idrecord').attr('scr','1.jpg');
    }else{
      $('#idrecord').attr('scr','0.jpg');
    }
      //$('#idRecord') per jquery equivale a document.getElementById(idRecord)
      //supponendo che avrai <img id="idRecord"..... />
   }
 });

}

dati ritorna 1 o altro ma questo lo scelgi tu dal php, e sarà quindi un echo 1 o echo 'ok'.... quello che vuoi ... ti serve per gestirti l'esito.

Aggiungi alla chiamata ajax cosi':

type: "GET",
dataType: "string",
url: "gestione_prodotto_online.php",

se guardi sulla documntazione vedrai che puoi far ritornare il tipo di dati che vuoi..

[-AA-]

Grazie m4rko80
ora provo

[attiliobs]

Ciao m4rko80,
stavo guardando il tuo script, ti volevo chiedere un paio di cose:

sull'immagine il link da mettere è così? )">[img]images/pub.png[/img]

un altra cosa, nel file php basta che creo una variabile dati=1 se il tutto va a buon fine?

grazie mille