[JS] Filtro Prodotti

webmachine

Utente Attivo
12 Gen 2016
43
0
6
Ciao,
ho uno scirpt PHP che dal DB estrae dei prodotti con determinate caratteristiche...

Vorrei creare in JS una sorta di "Finalizza Risultato" in modo tale da permettere all'utente, tramite checkbox, di visualizzare solo gli elementi con determinate caratteristiche...
In sostanza l'utente deve poter filtrare il risultato in base a 3 criteri,
-Pubblicato
-Privato
-Ordinato

Di seguito vi lascio in HTML l'aspetto che ha il risultato di ogni record:
Codice:
    <h2 id="h2_a">$nome_ar</h2>
    <p style="word-wrap: break-word;" id="p_a">$desc_ar</p>       
   
    <div id="action">
       
        <a href="regalo.php?r=$ID_r"><div id="share_a"><i id="ico_a"class="fa fa-gift fa-2x" aria-hidden="true"></i></div></a>
        <a target="_blank" href="$link_ar"><div id="lin_a"><i id="ico_a" class="fa fa-link fa-2x" aria-hidden="true"></i></div></a>
    </div>
Sapreste aiutarmi?

Grazie Mille,
A presto
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non ti serve javascript : metti dei filtri direttamente nella query.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Amazon probabilmente utilizza ajax per inviare i filtri alla pagina che fa la query sul database.
Ls struttra è questa :
Codice:
<form id="form_filtri">
    <input type="checkbox" name="filtro">
</form>
<div id="response"></div>
<script>
    $.post("pagina.php", $("#form_filtri").serialize(), function (response) {
        $("#response").html(response);
    });
</script>
tutto quello che la psgina.php stampa verrà visualizzato nel div response, i filtri vengono passati come secondo parametro.

EDIT
avevo dimenticato il richiamo
Codice:
<form id="form_filtri">
    <input type="checkbox" name="filtro" onchange="mostraTabella()">

</form>
<div id="response"></div>
<script>
    function mostraTabella() {
        $.post("pagina.php", $("#form_filtri").serialize(), function (response) {
            $("#response").html(response);
        });
    }

</script>
 
Ultima modifica:

webmachine

Utente Attivo
12 Gen 2016
43
0
6
Ciao, scusa ma in questo modo devo cambiare/ricaricare pagina per poter visualizzare i filtri applicati...
Probabilmente mi sono spiegato male, quello che cerco io è semplicemente dare la possibilità all'utente di visualizzare "un po' per volta" i contenuti... ad esempio:

// MEX RESTITUITO

-rosso
-blu
-verde
-giallo
-rosa
-arancione

[ ] Ckbox Mostra solo Colori Primari:
-rosso
-blu
-giallo

Tutto questo senza ricaricare la pagina ma solamente modificato la proprietà display:none/block dei singoli div...

Secondo te è possibile? Se si come?

Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Il codice che ti ho postato non cambia pagina ne la ricarica : le chiamate ajax vengono effettuate in background e il risultato viene inserito in un div all'interno della pagina. Qui trovi l'esempio di quello che ti ho postato, se ci fai caso la pagina non si ricarica.
Quello che vuoi fare tu lo puoi ottenere con i metodi hide() e show() di jquery, quando crei la lista di prodotti dovrai assegnare una classe con il colore ad ogni riga quando spunti una checkbox richiami una funzione javascript tipo questa
Codice:
function filtra() {
                $('input[type=checkbox]').each(function () {
                    if (this.checked) {
                        $("." + $(this).val()).show();
                    } else {
                        $("." + $(this).val()).hide();
                    }
                });
            }
ma non è un bel lavoro e se domani decidi di aggiungere un altro filtro devi riscrivere tutto.
 
Discussioni simili
Autore Titolo Forum Risposte Data
V Semplice barra di ricerca con filtro categorie prodotti E-Commerce 0
A filtro su tabella jQuery 3
Q Filtro effetti di luce Photoshop 1
R Filtro multiplo di selezione Sql PHP 2
motleyrulez Ricerca filtro con Ajax PHP 1
Shyson Spostare filtro php di WordPress WordPress 0
felino Filtro Aqua FP3 9" 3/4: quale cartuccia scegliere? Discussioni Varie 0
J [MS Access] Filtro su combo in sottomaschera MS Access 11
C filtro rendering effetti di luce photoshop Photoshop 0
H [Photoshop] Filtro Nik Dfine non funziona. Photoshop 1
M [PHP] Filtro da TXT con collegamento ipertestuale PHP 13
M [PHP] o [APACHE] - Filtro geo per accesso sito PHP 6
S [PHP] filtro PHP 25
R Filtro login tramite mac-address su apache2 SSL Apache 1
sandropochi [PHP] Form per creare filtro di ricerca su DB PHP 8
myblacksloth Filtro di ricerca Java Java 0
A [Photoshop] Problema filtro fluidifica Photoshop 1
I [Photoshop] Che filtro è questo? Photoshop 1
P Filtro selettore e variabile jQuery 2
M [PHP - MYSQL] Mantenere filtro query in tabelle paginate PHP 3
P Filtro dipinto a olio Photoshop CC Photoshop 1
B Filtro per advanced custom fields WordPress 0
G Con Photoshop per applicare la Nitidezza (Filtro>Nitidezza) Photoshop 1
G Filtro per record sottomaschera MS Access 8
J Creare un filtro Javascript 24
I filtro tabella between and / or PHP 8
I Datagrid Jquery PHP, mi servirebbero alcune soluzioni... Insrimento immagine e filtro PHP 2
D Filtro su una datagridview ASP.NET 1
I Filtro maschera tramite combobox Database 0
C Creare un filtro in base alle checkbox selezionate Javascript 15
Sevenjeak JFileChooser: inserire in nome file l'estensione del filtro Java 5
W Problemi con filtro tabella HTML Javascript 0
asevenx applicare filtro anti spam PHP 6
davidec Disabilitare il filtro XSS (cross site scripting) via PHP PHP 3
Z Filtro su pagine protette Classic ASP 6
G filtro in php con Drupal CMS (Content Management System) 3
F Filtro Antispam Hotmail Sicurezza e Virus 6
G Come rimettere filtro mostra in Thunderbird 2 Windows e Software 0
D filtro sql su campo data PHP 1
I filtro in asp su una query di Access Classic ASP 1
S Filtro alpha per lo sfondo di un box HTML e CSS 3
A filtro data nulla Database 0
W Filtro dati PHP 1
I filtro in query access MS Access 2
A Filtro body per motore di ricerca PHP 0
S filtro Database 0
D Pulsante aggiungi al carrello nello slider prodotti in offerta WordPress 2
E Sito con procedure guidate per la scelta prodotti CMS (Content Management System) 0
L Plugin per scheda prodotti Woocommerce WordPress 0
D Categoria prodotti in evidenza su Vetrina Social Media Marketing 0

Discussioni simili