Creare un filtro

james81

Utente Attivo
14 Set 2010
72
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi costruirti con javascript la stringa da passare in get alla pagina php
un esempio al volo
HTML:
<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

Utente Attivo
14 Set 2010
72
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Codice:
 $("#squadre").html("caricamento in corso");
puoi metterlo prima del load
ps:
3/4 secondi sono tanti per una query
 
Ultima modifica:

james81

Utente Attivo
14 Set 2010
72
0
0
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
 
Ultima modifica:

james81

Utente Attivo
14 Set 2010
72
0
0
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

Utente Attivo
14 Set 2010
72
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lo aggiungi ai parametri
Codice:
params += "&price=" + $("input[name='price']:checked").val();
 

james81

Utente Attivo
14 Set 2010
72
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Esempio di utilizzo usando il secondo parametro del metodo .load();
HTML:
<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

Utente Attivo
14 Set 2010
72
0
0
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

Utente Attivo
14 Set 2010
72
0
0
scusa ma non ho capito, l'utimo esempio che mi ha postato, come faccio ad utilizzarli nella mia query ?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
14 Set 2010
72
0
0
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

Utente Attivo
14 Set 2010
72
0
0
questo è lo scrip della mappa

PHP:
<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

Utente Attivo
14 Set 2010
72
0
0
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

Utente Attivo
14 Set 2010
72
0
0
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

Utente Attivo
14 Set 2010
72
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Posta un po di codice, non riesco a capire a che punto sei arrivato
 
Discussioni simili
Autore Titolo Forum Risposte Data
sandropochi [PHP] Form per creare filtro di ricerca su DB PHP 8
C Creare un filtro in base alle checkbox selezionate Javascript 15
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0

Discussioni simili