Eseguire Query senza refresh pagina

[danielebarisano]

https://www.booking-lagodigarda.it/a...o-di-garda.php In questa paginetta ho caricato tramite query sql i dati degli hotel sulla parte centrale e località e numero di stelle sulla sidebar di sinistra.
La cosa che devo fare è il funzionamento dei filtri di sinistra senza ricaricare la pagina. Ad esempio se clicco su Bardolino devono comparire solo hotel di Bardolino, se clicco su 1 stella devono comparire solo hotel a 1 stella. So scrivere query che facciano questo, quello che mi interessa è come fare ad eseguire questo quando c'è il click dell'utente su una select movimentando la parte centrale della pagina senza ricaricare la pagina. Mi servirebbero consigli o un link pagina dove c'è scritto come fare questa cosa.

[Walessio]

AJAX

[danielebarisano]

AJAX

Ciao, come da te suggerito, ho studiato AJAX su Html.it e ho iniziato a scrivere codice:

<select id="citta" name="citta" class="wpas-select form-control" onchange="vislocal(this.value)"> <option value="0"> Selezionare localita </option>

<scripttype="text/javascript">            function vislocal(localita){
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", "alloggi-lago-di-garda.php?q=" + localita, true);
                xmlhttp.send();
            }

</script>

//visualizzo filtro localita    $querylocspec = "Select nomeHotel,descrizione from lista_hotel,info_hotel where lista_hotel.idHotel = info_hotel.idHotel and locazione ='" + $_GET["localita"] + "'; ";    $resultlocspec = mysqli_query($con,$querylocspec);    while ($rowresultlocspec = mysqli_fetch_assoc($resultlocspec)){        ?>                             <div class="eintrag">              <div class="media">              <div class="media-left">                <img src="images/hotel1.jpg" alt="hotel1" width="400px" height ="300px" >                                             <h4><?php echo $rowresultlocspec["nomeHotel"]; ?></h4>                                    <?php echo $rowresultlocspec["descrizione"]; ?>                                       </div>                    </div>              </div>    <?php    }//chiusura while

La pagina èhttps://www.booking-lagodigarda.it/a...o-di-garda.php .Quando vado a cliccare sulla select non succede niente, sull'URL non viene visualizzato niente. Dove è l errore?

[Walessio]

Visitando la pagina noto che c'è scritto onchange="vislocal()" che è diverso dal tuo esempio.
Da console di chrome risulta che la chiamata parte ma invece di spedire il valore selezionato spedisce l'elemento html.
Controlla anche tu con la console di chrome (CTRL+SHIFT+J) -> Network -> filtra XHR.
Inoltre visto che sei alle prime armi prendi in considerazione di usare jQuery che consente di gestire le chiamate ajax in modo semplice e cross-browser.

Bye

[danielebarisano]

Visitando la pagina noto che c'è scritto onchange="vislocal()" che è diverso dal tuo esempio.
Da console di chrome risulta che la chiamata parte ma invece di spedire il valore selezionato spedisce l'elemento html.
Controlla anche tu con la console di chrome (CTRL+SHIFT+J) -> Network -> filtra XHR.
Inoltre visto che sei alle prime armi prendi in considerazione di usare jQuery che consente di gestire le chiamate ajax in modo semplice e cross-browser.

Bye

Si. Avevo cambiato e volevo recuperarlo tramite id. Comunque adesso dovrebbe essere adesso vislocal(localita), la mia intenzione è di recuperare il valore che viene cliccato

[danielebarisano]

Allora Ale. Ho visto che la richiesta è stata inviata, ho aggiunto anche un altro parametro. Solo che non mi viene letta dal codice PHP. Dov'è l errore?

[Walessio]

dunque,
la pagina richiamata non fa altro che richiamare sè stessa con dei parametri in query string, la risposta è il codice HTML della pagina che si sta guardando.
Tanto per cominciare la pagina richiamata via ajax dovrebbe essere un'altra così da separare meglio i compiti, poi essa dovrebbe restituirti solo ed esclusivamente i dati che devi cambiare nella pagina principale, magari in formato json che è comodo, leggero, leggibile e facile da elaborare.
Farsi restituire l'intero codice HTML di una pagina per cambiarne solo una parte è utile come fare un mutuo per mille euro quando ne devi spendere solo dieci, non so se rendo l'idea

[danielebarisano]

dunque,
la pagina richiamata non fa altro che richiamare sè stessa con dei parametri in query string, la risposta è il codice HTML della pagina che si sta guardando.
Tanto per cominciare la pagina richiamata via ajax dovrebbe essere un'altra così da separare meglio i compiti, poi essa dovrebbe restituirti solo ed esclusivamente i dati che devi cambiare nella pagina principale, magari in formato json che è comodo, leggero, leggibile e facile da elaborare.
Farsi restituire l'intero codice HTML di una pagina per cambiarne solo una parte è utile come fare un mutuo per mille euro quando ne devi spendere solo dieci, non so se rendo l'idea

Ho capito perfettamente quello che dici. ora la pagina che uso per la chiamata è returnlocalita.php. Adesso per far tornare i valori sulla pagina principale (alloggi-lago-di-garda.php) come devo fare? Può postarmi codice o un link dove vedere questo passaggio?

[Walessio]

scusa ma forse mi sono perso qualche pezzo.
A meno che inizialmente in lista non ci siano già tutti gli alberghi, la pagina chiamata via ajax (che attualmente torna sei righe vuote) dovrebbe tornarti un json contenente gli alberghi che corrispondono alla località scelta o più precisamente la foto, il titolo, la descrizione etc di ciascun albergo.
Sto dando per scontato che l'elenco degli alberghi sia presente in un database o quantomeno in un array codificato lato server.
Se non è così correggimi e spiegami da dove hanno origine i dati degli alberghi

[danielebarisano]

scusa ma forse mi sono perso qualche pezzo.<br>
A meno che inizialmente in lista non ci siano già tutti gli alberghi, la pagina chiamata via ajax (che attualmente torna sei righe vuote) dovrebbe tornarti un json contenente gli alberghi che corrispondono alla località scelta o più precisamente la foto, il titolo, la descrizione etc di ciascun albergo.<br>
Sto dando per scontato che l'elenco degli alberghi sia presente in un database o quantomeno in un array codificato lato server.<br>
Se non è così correggimi e spiegami da dove hanno origine i dati degli alberghi <img src="images/smilies/smile.gif" border="0" alt="" title="Smile" smilieid="1" class="inlineimg">

<br>Questo lavoro l ho preso da Internet tramite il from del mio sito&nbsp;<a data-cke-saved-href="https://www.danielebarisano.it/" href="https://www.danielebarisano.it/">https://www.danielebarisano.it/</a>. Nome Hotel e Descrizione sono ricavati tramite query dal database, l immagine per ora rimane sempre quella (l ho fatto io in PHP). La cosa che mi è complicata perchè non ho mai usato AJAX è ricavare solo info (nome e descrizione) dell elemento della select selezionato senza ricaricare la pagina.<br>Quindi se all'interno di returnlocalita.php inserisco queste righe di codice:<br>

<span style="background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre; color: rgb(156, 220, 254);">$localb</span><span style="background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre;"> =</span><span style="background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre; color: rgb(156, 220, 254);">$_GET</span><span style="background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre;">[</span><span style="background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre; color: rgb(206, 145, 120);">"localb"</span><span style="background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre;">];</span><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div>  <span style="color: #9cdcfe;">$localita</span> =<span style="color: #9cdcfe;">$_GET</span>[<span style="color: #ce9178;">"localita"</span>];</div><div>  <span style="color: #c586c0;">if</span>(<span style="color: #9cdcfe;">$localita</span> != <span style="color: #b5cea8;">0</span>){</div><div>     <span style="color: #608b4e;">//visualizzo filtro localita</span></div><div>   <span style="color: #9cdcfe;">$querylocspec</span> = <span style="color: #ce9178;">"Select nomeHotel,descrizione from lista_hotel,info_hotel where lista_hotel.idHotel = info_hotel.idHotel and locazione ='"</span> + <span style="color: #9cdcfe;">$localita</span> + <span style="color: #ce9178;">"'; "</span>;</div><div>   <span style="color: #9cdcfe;">$resultlocspec</span> = <span style="color: #dcdcaa;">mysqli_query</span>(<span style="color: #9cdcfe;">$con</span>,<span style="color: #9cdcfe;">$querylocspec</span>);</div><div>   <span style="color: #c586c0;">while</span> (<span style="color: #9cdcfe;">$rowresultlocspec</span> = <span style="color: #dcdcaa;">mysqli_fetch_assoc</span>(<span style="color: #9cdcfe;">$resultlocspec</span>)){</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">?</span><span style="color: #569cd6;">&gt;</span> </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"eintrag"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"media"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"media-left"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"images/hotel1.jpg"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"hotel1"</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"400px"</span> <span style="color: #9cdcfe;">height</span> =<span style="color: #ce9178;">"300px"</span> <span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #808080;">&lt;</span><span style="color: #569cd6;">h4</span><span style="color: #808080;">&gt;</span><span style="color: #569cd6;">&lt;?php</span> <span style="color: #dcdcaa;">echo</span> <span style="color: #9cdcfe;">$rowresultlocspec</span>[<span style="color: #ce9178;">"nomeHotel"</span>]; <span style="color: #569cd6;">?</span><span style="color: #569cd6;">&gt;</span><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">h4</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #569cd6;">&lt;?php</span> <span style="color: #dcdcaa;">echo</span> <span style="color: #9cdcfe;">$rowresultlocspec</span>[<span style="color: #ce9178;">"descrizione"</span>]; <span style="color: #569cd6;">?</span><span style="color: #569cd6;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span>      </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span></div><div>    <span style="color: #569cd6;">&lt;?php</span></div><div>   }<span style="color: #608b4e;">//chiusura while </span></div></div><span style="background-color: rgb(30, 30, 30); color: rgb(212, 212, 212); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; white-space: pre;">  }</span> 

<br>
<br>Dovrebbe funzionare?