Creare un filtro

[james81]

Ciao a tutti!
volevo chiedervi un consiglio, tramite questo codice prelevo dei dati da un db (tabella.php) e li visualizzo.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="squadre"></div>
<script>
$("#squadre").load("http://www.misito.it/tabella.php");
</script>

ora vorrei associare alla tabella un piccolo filtro con delle checkbox e delle select che se selezionate in automatico cambi la query della tabella.

 

[criric]

Ciao, puoi costruirti con javascript la stringa da passare in get alla pagina php
un esempio al volo

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>    
    $(document).ready(function() {
        loadSquadre();
        $("input[name='filtra']").click(function(){
            loadSquadre();
        });
    });
    
    function loadSquadre() {
        var params = "?";
        $("input.filtro").each(function(){
            if($(this).is(":checked")){
                params += "&" + $(this).attr("name") + "=on";
            }
        });
        $("#squadre").load("tabella.php" + params);
    }
    
</script> 
<div id="squadre"></div>
filtro 1 <input class="filtro" type="checkbox" name="filtro1"/>
filtro 2 <input class="filtro" type="checkbox" name="filtro2"/>
filtro 3 <input class="filtro" type="checkbox" name="filtro3"/>
<input type="button" name="filtra" value="Filtra"/>

 

[james81]

perfetto...ho associato all'input onclick="loadSquadre()" così mi effettua la ricerca appuna clicco (stò ancora implementado il form di ricerca).
Ho notato che da quando invo a quando mi restituiscre la tabella pssano 3/4 secondi nei quali non si vede nulla, è possible aggiungere un piccolo loader (tipo gif animata)

 

[criric]

 $("#squadre").html("caricamento in corso");

puoi metterlo prima del load
ps:
3/4 secondi sono tanti per una query

 

[james81]

infatti il problema dei 3/4 secondi è dovuto al fatto che

da un primo form di ricerca, passo alla pagina dove visualizzo il risultato è quella che appunto contiene il codice javascript (con i successivi i filtri di ricerca).

Il probema è che non riesco a passare la prima variabile (quella utilizzata nel primo form) anche alla pagina che richiamo tramite il JS e quindi visualizzo una query non corretta, ma prelevo tutti i dati del db

 

[james81]

penso di aver risolto, ho creato un campo gli input e gli ho assegnato lavariabile del form precedente, e lo messo checked, sembra funzionare

 

[james81]

volevo chiedere una cosa:
se dovessi usare un radiobutton
<input class="filtro" type="radio" name="price" value="10" onclick="loadSquadre()"/>
<input class="filtro" type="radio" name="price" value="20" onclick="loadSquadre()"/>
<input class="filtro" type="radio" name="price" value="30" onclick="loadSquadre()"/>

cosa dovrei fare?

 

[criric]

lo aggiungi ai parametri

params += "&price=" + $("input[name='price']:checked").val();

 

[james81]

ti volevo ringraziare per il supporto :fonzie:

volevo chiederti una conferma: la pagina che richiamo dalla funzione javascript
http://www.misito.it/tabella.php");

contiene a sua volta del codice javascript con una query che visualizza una googlemaps, però ho notato che il codice jascascript contenuto nella pagina non viene elaborato....come mai?

 

[criric]

Io ho provato con un semplice alert ed ha funzionato, anche se il documento del W3C dice che gli script contenuti nell apagina richiamata da una richiesta ajax non verranno eseguiti.
Dai un occhiata aella documentazione jquery sul metodo .load(), c'è un paragrafo dedicato. Molto interessante è il secondo parametro che puoi passare al metodo.

 

[criric]

Esempio di utilizzo usando il secondo parametro del metodo .load();

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>    
    $(document).ready(function() {
        loadSquadre();
        $("input[name='filtra']").click(function(){
            loadSquadre();
        });
    });
    function loadSquadre() {
        $("#squadre").html("caricamento in corso").load("tabella.php",$("#foo").serialize());
    }    
</script> 
<div id="squadre"></div>
<form id="foo">
    filtro 1 <input class="filtro" type="checkbox" name="filtro1"/>
    filtro 2 <input class="filtro" type="checkbox" name="filtro2"/>
    filtro 3 <input class="filtro" type="checkbox" name="filtro3"/>
    radio 1 <input type="radio" name="radio" value="radio1"/>
    radio 2 <input type="radio" name="radio" value="radio2"/>
    radio 3 <input type="radio" name="radio" value="radio3"/>
    select 
    <select name="selct">
        <option value=""/>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
    </select>
    <input type="button" name="filtra" value="Filtra"/>
</form>

Molto più semplice recuperare tutti i campi del form

 

[james81]

si effettivamente è come pensavo, anche perchè cercando in giro non avevo trovato soluzione al riguardo, quello che volevo ottenere era utilizzando gli stessi parametri della query, utilizzarli per prelevare i marker per una mappa

 

[james81]

scusa ma non ho capito, l'utimo esempio che mi ha postato, come faccio ad utilizzarli nella mia query ?

 

[criric]

Devi modificare la funzione loadSquadre() com ti ho postato e racchiudere tutti i campi dentro un form, nell'esempio con id = "foo".
Per eseguire codice javascript all'interno delle pagine chiamate si può utilizzare la funzione eval();
Qui trovi uno dei tanti esempi che offre la rete.

 

[james81]

scusa ma ho fatto forse un pò di confusione:
con le modifiche che mi hai suggerito, compilo la query che utilizzo per elencare i prodotti...giusto?

perchè il mio problema è associare a questa query la possibilità di visualizzare una mappa con la posizione di tutti i prodotti (ogni prodotto ha un campo latitudine e longitudine).

Prima (utilizzando solo php) dopo aver recuperato le variabili del form, facevo due query uguali identiche nella stessa pagina dove una seriviva per i prodotti e l'altra per la mappa. Ora il mio problema è effettuare quella seconda query per la mappa, non sò come gestirla e dove posizionarla

 

[james81]

questo è lo scrip della mappa

<script type="text/javascript">
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png");
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: 'inco.png',
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng($lats,$lont),
 zoom: 8,
 scrollwheel: false,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });

<?php
 qui eseguo la famosa query
?>

 center = bounds.getCenter();
 map.fitBounds(bounds);
 
 }
 </script>

 

[james81]

ho notato un problema:
praticamente se ricerco una sola parola "casa" funziona correttamente, ma se ricerco due parole esempio "ponte san", mi rimane sempre in ricerca e si blocca li.
Dalla consonle errori ho riscontrato questo:

Errore: Error: Syntax error, unrecognized expression: san&valore=0
File sorgente: http://code.jquery.com/jquery-latest.js
Riga: 1473

 

[james81]

ho risolto...controllando la variabilie prima del suo utilizzo.
ora vorrei associare due pulsati(bottoni o link) che mi permettessero di ordinare la query per un valore in maniera crescente o decrescente,in php so come farlo, ho provato ad integrarlo nello script che mi hai consigliato ma non ne vengo a capo

 

[james81]

sono riuscito a risolvere solo in parte sul come ordinare i risultati, utilizzando due radio button, però per esigenze grafiche dovrei posizionare i due pulsanti in un file esterno che viene richiamata nella stessa pagina dove richiamo il file dove ho il mio form di ricerca, ma mi ritrovo a non riuscire a passare le due variabili

 

[criric]

Posta un po di codice, non riesco a capire a che punto sei arrivato