Incrementare una variabile di 1 dinamicamente senza ricaricare la pagina

[goalmanager]

Salve a tutti,

avrei bisogno di incrementare una variabile di 1 ad ogni click su una cella...

Grazie ad altri interventi precedenti di utenti del forum riesco a incrementarla di 1 la prima volta, ma non le successive...

in particolare ho questo pulsante

...

<td class='ancora' onclick="loadXMLDoc2(<?php echo $variabile+1; ?>)">
</td>

...

collegato alla funzione nella stessa pagina

 <script>
/* AJAX = Asynchronous JavaScript and XML */

function loadXMLDoc2(id)
{
/* questa prima parte della funzione apre la comunicazione con il server in background , senza dover riaggiornare la pagina */


var xmlhttp;
if (window.XMLHttpRequest)
  {// codice per le nuove versioni di browser che hanno XMLHttpRequest integrato IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// codice per le vecchie versioni di browser  IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  
/*  qui catturiamo l'evento di quando il readyState cambia  */ 
/* 0: richiesta non inizializzata                                      */
/* 1: connessione con il server attivata                         */
/* 2: il server ha ricevuto la richiesta                            */
/* 3: il server sta eseguendo la richiesta [query]            */
/* 4: il server ha finito e la risposta e' pronta !               */
/* mentre lo STATUS e' lo stato della pagina , cioe' : 200: "OK" 404: Page not found */

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    /* qui si inserisce la risposta dal server (quindi l'informazione che abbiamo chiesto al nostro file php    */
    /* di prendere dal DataBase , e la si passa al nostro elemento (in questo caso un div)                      */
    /* da notare che abbiamo richiesto una stringa come risposta , questo perche' non stiamo usando un file XML */
    /* altrimenti avremmo dovuto usare responseXML                                                              */
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

/* qui apri il file dettaglio.php a cui passi la richiesta id e imposti il parametro asincrono=true        */ 
/* l'importanza di avere una comunicazione asincrona e' che JS non deve aspettare la risposta del server  */
/* ma puo' continuare ad eseguire il codice ed eventualmente a ritardare la risposta in attesa del server */ 
/* in questo modo non si creano "colli di bottiglia" , ovvero rallentamenti dovuti a lunghe attese        */
/* chiaramente se si imposta asincrono=false (quindi sincrono) JS fermera' l'esecuzione del codice fino a */
/* quando il server non gli avra' fornito la risposta ..                                                  */

xmlhttp.open("GET","dettaglio2.php?ID="+id,true); 
xmlhttp.send();  
  
/* da notare che AJAX puo' usare sia ASP che PHP */  
  
}
</script>

poi la pagina dettaglio2.php dove recupero il valore della variabile

$ID = $_GET['ID'];

$variabile = $variabile +$ID; 

riesco a farla incrementare di 1...ma io avrei bisogno che ad ogni click mi si incrementasse di uno...

Grazie in anticipo per eventuali consigli ed aiuti!!

[NLSweb]

Allora ...

in pratica tu hai una variabile ($variabile) che inizialmente ha un valore definito (esempio 1) , quindi hai associato all'evento click del mouse su di una cella che esegui la funzione AJAX incrementado la varibile di 1 (quindi riferendomi all'esempio hai passato il valore 2);
la funzione esegue poi un file esterno in cui e' presente un altra variabile (sempre con lo stesso nome $variabile) a cui sommi il valore passato (esempio: variabile = variabile + 2).

mi sa che proprio non ci siamo..


presumo che la variabile sia univoca (che non ce siano due distinte..)

ora quello che non e' chiaro e se la variabile va incrementata ad ogni click e quindi il valore cosi incrementato va passato al file esterno php con la funzione AJAX .

oppure

ad ogni click viene passato un valore univoco (che identifica la cella) alla funzione AJAX che , eseguendo il file php , aggiorna un contatore.


nel primo caso:

<td class='ancora' onclick="loadXMLDoc2(<?php echo $variabile = $variabile + 1; ?>)"></td>

quindi nel file PHP esterno prelevi la variabile ma non c'e' bisogno che esegui un nuovo incremento.


nel secondo caso:

<td class='ancora' onclick="loadXMLDoc2(<?php echo $variabile; ?>)"></td>

e nel file esterno

$ID = $_GET['ID'];
$variabile = $variabile + 1;

[goalmanager]

Ciao Noel!! Grazie mille per il tuo intervento...

Quello che mi servirebbe è il caso b)

ma purtroppo anche seguendo ciò che mi hai detto non riesco...O meglio riesco sempre e solo ad incrementare la variabile di 1 la prima volta...ma non le successive....

questo il mio codice...

<?php
$variabile= 0;

?>

..poi la parte iniziale della pagina...


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
   
   <script>
/* AJAX = Asynchronous JavaScript and XML */

function loadXMLDoc2(id)
{
/* questa prima parte della funzione apre la comunicazione con il server in background , senza dover riaggiornare la pagina */


var xmlhttp;
if (window.XMLHttpRequest)
  {// codice per le nuove versioni di browser che hanno XMLHttpRequest integrato IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// codice per le vecchie versioni di browser  IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  
/*  qui catturiamo l'evento di quando il readyState cambia  */ 
/* 0: richiesta non inizializzata                                      */
/* 1: connessione con il server attivata                         */
/* 2: il server ha ricevuto la richiesta                            */
/* 3: il server sta eseguendo la richiesta [query]            */
/* 4: il server ha finito e la risposta e' pronta !               */
/* mentre lo STATUS e' lo stato della pagina , cioe' : 200: "OK" 404: Page not found */

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    /* qui si inserisce la risposta dal server (quindi l'informazione che abbiamo chiesto al nostro file php    */
    /* di prendere dal DataBase , e la si passa al nostro elemento (in questo caso un div)                      */
    /* da notare che abbiamo richiesto una stringa come risposta , questo perche' non stiamo usando un file XML */
    /* altrimenti avremmo dovuto usare responseXML                                                              */
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

/* qui apri il file dettaglio.php a cui passi la richiesta id e imposti il parametro asincrono=true        */ 
/* l'importanza di avere una comunicazione asincrona e' che JS non deve aspettare la risposta del server  */
/* ma puo' continuare ad eseguire il codice ed eventualmente a ritardare la risposta in attesa del server */ 
/* in questo modo non si creano "colli di bottiglia" , ovvero rallentamenti dovuti a lunghe attese        */
/* chiaramente se si imposta asincrono=false (quindi sincrono) JS fermera' l'esecuzione del codice fino a */
/* quando il server non gli avra' fornito la risposta ..                                                  */

xmlhttp.open("GET","dettaglio2.php?ID="+id,true); 
xmlhttp.send();  
  
/* da notare che AJAX puo' usare sia ASP che PHP */  
  
}
</script> 


...dopo inizio body


<div id="myDiv">

<?php


//$variabile= $_GET['$variabile'];


echo $variabile;

?>


</div>






poi la cella...

<td class='ancora' onclick="loadXMLDoc2(<?php echo $variabile;  ?>)">
</td>

nella pagina dettaglio2.php

$ID = $_GET['ID'];
$variabile= $ID;
$variabile= $variabile+  1;

riesco solo ad incrementare la variabile di 1 la prima volta....non le successive cliccando sulla cella....

Me ne accorgo dal fatto che nella pagina dettaglio2.php ho impostato differenti css al variare del valore della variabile...

[goalmanager]

Forse ho capito...

così facendo praticamente visto che non aggiorno la pagina il valore php mi rimane sempre uguale....

<td class='ancora' onclick="loadXMLDoc2(<?php echo $variabile; ?>)">

c'è un modo per aggiornare il valore senza ricaricare la pagina?

[NLSweb]

Il problema e' che per mantenere l'indice del contatore lo devi memorizzare da qualche parte...
puoi memorizzarlo direttamente nella pagina , o in un cookie , o in un file di testo , o nel DB , ecc.

se lo gestisci solo con una variabile , se aggiorni la pagina o c'e' un problema qualsiasi .. perdi il dato..

e se lo mantieni (il contatore) in un file esterno (es: dettaglio2.php) , questo non manterra' in memoria il dato .. quindi ogni volta che esegui il file (con la funzione AJAX) sara' come la prima volta (ecco perche' sempre 1 e non si incrementa).

ora quale soluzione preferisci .... dipende da come gestisci gli eventi..
vuoi che il contatore si azzeri se si aggiorna la pagina ? oopure no ?

[goalmanager]

Allora sto pensando alle varie soluzioni...però desidero porti la questione con maggiore dettaglio così da farti capire...

praticamente ciò che volevo realizzare è (ed è l'ultimo tassello del gioco che poi è completo :-))))))) ) una "ricerca giocatore" tra quelli presenti nel mercato...

quindi pensavo che potrei dare la possibilità all'utente di effettuare una scrematura dei calciatori messi in cessione dagli utenti (per i quali ho già impostato un sistema fatto ad asta con un termine temporale)...

quindi l'utente può avvalersi di taluni parametri da specificare per appunto ottenere pochi nomi aderenti alle sue esigenze (magari per esempio vuole solo un attaccante e che non abbia più di 25 anni...)...

però siccome ho un pò di esperienza in questi giochi non volevo predisporre la classica cosa banale (che è anche brutta esteticamente) ossia la solita select dove non ci sono possibilità di abbellimento o sono comunque limitate....

quindi pensavo ad una cosa del tipo: clicco su un pulsante, mi si aggiorna un valore e di conseguenza mi si aggiorna il ruolo che l'utente desidera....e così poi per l'età, o la skill....

certo è, che questi parametri poi andranno passati alla pagina e quindi credo che inevitabilmente dovrò ricaricarla...

Quindi alla fin fine, posso anche valutare altre modalità visto che anche per le mie capacità attuali non sono poi in grado di elaborare una 'ricerca' particolarmente complessa...

grazie ai tuoi interventi passati (e a quelli di Ale e Miki) sono riuscito con jquery a far scegliere dinamicamente all'utente i propri colori sociali, e di conseguenza la tipologia (con annessi i colori) di maglia...il tutto mutando i css in tempo reale oltretutto... per me è stata una cosa grandiosa...in quel caso mi sono appoggiato inevitabilmente al database....ma in fondo era giusto visto che è un qualcosa che caratterizza ogni club del gioco...

però in questo caso non vorrei andare a finire sul database per una semplice ricerca di alcuni parametri....

Tu cosa mi consiglieresti di provare?

[NLSweb]

allora... se ho ben capito..

vuoi far scegliere i giocatori inserendo dei filtri per poterli selezionare piu' facilmente
(tipo eta' , abilita' , ecc.)

solo che non vuoi usare un select per scegliere i filtri .. ma qualcosa di piu' gradevole..

quindi una volta impostati i filtri , vuoi che la lista che giocatori si aggiorni illustrando solo le corrispondenze , e per farlo devi inviare ad un file esterno i filtri selezionati e questo ti ritorna la lista aggiornata.

.....spero fin qui tutto bene.....

non so quanti filtri e dove tu li voglia inserire...
comunque per renderli "carini" , puoi creare un DIV che contenga le varie scelte e poi visualizzarle in modo grafico
quindi usarei una immagine per ogni scelta possibile ed una sorta di galleria animata per scorrere le immagini.

ogni immagine che si seleziona (click) viene evidenziata (esempio con un bordo colorato) , quando si finisce la selezione dei parametri
si esegue un funzione che verifica quali parametri siano stati scelti ed esegue (con AJAX) il file PHP (a cui passa i parametri) che esegue la ricerca e restituisce la lista aggiornata; quindi la lista aggiornata viene messa a disposizione per la scelta dei giocatori.


....prima di andare nel dettaglio , dimmi se ho capito bene ed e' questo quello che vuoi...

[goalmanager]

Buongiorno,

hai perfettamente capito ciò volevo fare!!

Io una base l'ho fatta (però mi sono anche arenato su un punto perchè ieri non riescivo ad andare avanti)...

Ho una pagina generale 'mercato' dove con il richiamo al database estrapolo la lista di calciatori cedibili e li organizzo in pagine da 10 righe...sotto mi avanza uno spazio di 100 px ed è li che volevo inserire la 'ricerca giocatore'...

ieri ho provato a fare una bozza...

Praticamente ho predisposto due select (si lo so avevo detto che le select non le volevo fare, ma ieri preso dallo 'sconforto' ho pensato che se lo facevo prima nel modo più semplice magari dopo potevo cambiarlo e implementarlo..), dove in una si consente all'utente di scegliere il ruolo del calciatore, la scelta porta alla funzione jquery che hai predisposto te e mi muta i css di una cella dove viene caricata l'immagine collegata al ruolo (è un semplice tondino colorato con scritto l'abbreviativo del ruolo es: PO, AT..ecc.. però almeno è più carino di cose che ho visto in altri giochi online..); con la seconda select ho fatto lo stesso, solo che l'utente può scegliere un intervallo 1-2 ; 2-3 ; 3-4 di skill del calciatore....anche in questo caso si aggiorna una immagine (che ancora non ho deciso ma poco importa questo...)...

Ho predisposto un pulsante e volevo che cliccando sullo stesso si ricarisse la pagina con i due dati scelti (che, non ti ho detto, popolano anche dinamicamente rispettivamente due input invisibili), ma non sono riuscito a farlo funzionare...

Sono fermo qua...

te l'ho detto solo perchè (visto che non sono molto addentrato) non so se questa situazione poteva essere una base di partenza per quello che hai detto te...oppure no...e comunque tra la mia e la tua 'idea' di ricerca mi sembra molto più carina la tua quindi sono ovviamente disposto anche a lasciar perdere quello che ho fatto...

ho sempre una pagina base in cui ho l'elenco di calciatori cedibili organizzato in pagine da 10 righe che ti dicevo prima...e da li si può partire...

Grazie per l'aiuto!!

[NLSweb]

l'aspetto grafico lo si puo' definire dopo....

una volta fatta la selezione , puoi "nascondere" i giocatori che non rientrano nelle scelte effettuate , cio' significa che lasci intatte le liste solo escludi (nascondi) i giocatori "filtrati"

alternativa

premi il pulsante leggi i dati delle select , quindi passi i valori (AJAX) al file PHP che in background ti rigenera la lista dei giocatori , quindi rimuovi la vecchia lista e la sostituisci con la nuova.