Antworten auf deine Fragen:
Neues Thema erstellen

jQuery und checkboxen mit onclick

H

higgehagge

Guest

Hallo Leute,

ich habe ein Problem mit jQuery und bekomme es einfach nicht hin.
ich hoffe ihr könnt mir dabei behilflich sein, nach stundenlanger suche hier und bei google werde ich einfach nicht schlau aus den code-schnipseln die ich überall gefunden habe.

Mein Problem:

ich habe eine Tabelle mit ein paar Zeilen, die daten in der Tabelle werden über eine Datenbank gefüllt!
Nun möchte ich gerne das mit 4 checkboxen bei jeweils bei Klick der Inhalt gefiltert wird.

hier auf der seite ein Beispiel wie das bei mir auch sein sollte
Prepaid Tarife | Handy Prepaid Karten Vergleich

wenn man dort jetzt auf die checkbox (Netze) t-mobile klickt wird der inhalt in der tabelle nun gefiltert nach t-mobile. wird dann noch vodafone geklickt wird dann der inhalt t-mobile und vodafone ausgegeben usw.


Mein Code (produkt-filter.php):


PHP:
<link rel="stylesheet" type="text/css" href="style.css" />

<script src="js/jquery.js"></script>

<table border="0">
  <tr>
    <td><table  border="0">
      <tr>
        <td>
        
                <table border="0">
          <tr>
            <td>&nbsp;</td>
            <td><span class="tagline">Filter Produkte </span></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>
            
<form action="produkt-filter.php" method="post" name="ProduktFilterForm" id="ProduktFilterForm">
<input name="produktsearch[produkt_list][]" type="checkbox" value="0" id="produktsearch_produkt_list_0" />&nbsp;
<label for="produktsearch_produkt_list_0">PC</label>

<input name="produktsearch[produkt_list][]" type="checkbox" value="1" id="produktsearch_produkt_list_1" />&nbsp;
<label for="produktsearch_produkt_list_1">Notebook</label>

<input name="produktsearch[produkt_list][]" type="checkbox" value="2" id="produktsearch_produkt_list_2" />&nbsp;
<label for="produktsearch_produkt_list_2">Software</label>

<input name="produktsearch[produkt_list][]" type="checkbox" value="3" id="produktsearch_produkt_list_3" />&nbsp;
<label for="produktsearch_produkt_list_3">Zubeh&ouml;r</label>

<input type="submit" value="suchen" />
</form>


<script type="text/javascript">
    var filterProdukt = function(el)
    {
        jQuery.ajax(
        {
            type:'POST',
            dataType:'html',
            data:jQuery($("#ProduktFilterForm")).serialize(),
            success:function(data, textStatus){
                jQuery('#ajax_space').html(data);
                initTooltip();
            },
            url:'produkt-filter.php'
        });
        pageTracker._trackEvent('Produkttabelle', 'Filter', $("label[for='" + el.target.id + "']").text());
    }
    $(document).ready(function () {

        $("#ProduktFilterForm :input").change(filterProdukt);
        $("#ProduktFilterForm input[type=submit]").hide();

        $("#loader").ajaxSend(function(evt, request, settings){

            $("#loader").height($("#ajax_space").height()+400);
            $("#loader").width($("#ajax_space").width()+30);
            $("#loader_img").css('margin-top', $(window).scrollTop() + 'px');

            $("#loader").show();
        });

        $("#loader").ajaxComplete(function(evt, request, settings){
            $("#loader").hide();
        });

    });
</script>

            </td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        <td width="200">&nbsp;</td>
        <td width="200">&nbsp;</td>
        <td width="200">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
<div class="span-18 last maincontent">
                  <div id="loader" style="display: none; position: absolute;">
    <div style="background-color: rgb(255, 255, 255); width: 100%; height: 100%; opacity: 0.9; position: absolute;">

        <div id="loader_img" style="position: absolute; margin-left: 240px;">

            <div class="box box_light">
                <p class="tagline">Daten werden aktualisiert</p>
                <div class="box_content">
                    <center><img alt="Lade..." src="img/loader.gif"> </center>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="ajax_space">
         
<div id="table_compare">

<div id="landingpage">

<table id="meineTabelle" cellpadding="0" cellspacing="0">
   <thead>
      <tr>
         <th><abbr>Anbieter</abbr></th>
         <th><abbr>Produkt</abbr></th>
         <th><abbr>Kaufpreis</abbr></th>
         </tr>
   </thead>
   
   
   <tbody>

<?php 

include("include/dbconnect.php");

$sql = "SELECT * FROM tabelle_produkte ORDER by pr_id ";
$res = mysql_query($sql);

while($row = mysql_fetch_assoc($res)) {
$pr_id = $row['pr_id']; 
$pr_anbieter = $row['pr_anbieter']; 
$pr_produkt = $row['pr_produkt']; 
$pr_preis = $row['pr_preis']; 
?>   

<tr >
         <td><?php echo $pr_anbieter; ?></td>
         <td><?php echo $pr_produkt; ?></td>
         <td><?php echo $pr_preis; ?> &euro;</td>
</tr>
<?php } ?>


   </tbody>
</table>
</div>
</div>
            </div>
            </div>
<script>
$(function() { $(document).ready(function() 
    { 
        $("#meineTabelle").tablesorter( {} ); 
    } 
); 
    
});

</script>

wie übergebe ich denn die variable an php weiter, damit ich die sql nach dem value der checkbox auslesen kann und ist das mit jquery gar nicht nötig?


ich weiss absolut nicht mehr weiter, vielleicht bin ich auch etwas auf dem holzweg. vielleicht gibt es auch eine andere lösung damit die filterung so funtz.

vielen dank schonmal im voraus
lg
 

pluspiano

Nicht mehr ganz neu hier

AW: jQuery und checkboxen mit onclick

Ohne DEINE Online-Präsentation wird es recht schwierig sein. Bislang sehe ich, dass es nach der Vorgabe, wie Du es gernehättest, läuft. Wo ist nun Dein Auftritt?:)
 
H

higgehagge

Guest

AW: jQuery und checkboxen mit onclick

hallo,
also mit der online präsenz ist schlecht, habe die ganze geschichte erst noch local zu laufen :hmpf:

was meinst du damit das es funzt, wie ich es haben möchte?
ich bekomme einfach nicht die daten aus der sql, wenn ich zum beispiel auf filtern (Notebook) klicke.
es werden immer alle daten angezeigt aber leider nicht gefiltert :hmpf:

lg
 

pluspiano

Nicht mehr ganz neu hier

Localhost. OK. Schon mal die php.ini gecheckt, ggf. httpd.conf angepasst?
Teile bitte mit, mit welcher Konfiguration Du unterwegs bist oder sein möchtest.

Mac oder PC? Versionsnummer. Da sind die vermutlichen Baustellen.

Ich würde ja allzugerne im Kaffesatz lesen, allein -- es funktioniert noch nicht so gut, wie ich es mir selber gerne wünschte :(.

Alternative: Ich sehe, dass Du vllt. dein JS nicht richtig im Pfad eingebunden hast. Es ist relativ. Mach es mal so C:/.../foo/bar/ Also absolut.

Auf dem Server ändere das aber wieder relativ!
 
Zuletzt bearbeitet:

pluspiano

Nicht mehr ganz neu hier

Sry. Da hat sich um die frühe Morgenstunde der Server von psd.tutorial selbst aufgehangen.

Versuche sogar mal, alle Pfade sowohl für CSS und JS absolut einzubinden. Ungefähr C:/.../foo/bar/

Stell Dir vor, ich halte Dir, Du bist der Fahrer, während der Fahrt die Augen zu, aber wir wollen in Paris partout frühstücken.
 
Zuletzt bearbeitet:

Duddle

Posting-Frequenz: 14µHz

AW: jQuery und checkboxen mit onclick

Also einfach deren Code zu copy&pasten bringt überhaupt nichts, wenn du nicht verstehst was passiert. Besonders wenn du deren PHP-Code nicht kennst, wird das nicht magisch einfach funktionieren.

Du könntest so eine Funktion (meiner Meinung nach) viel einfacher umsetzen, indem du die Tabelle so aufbaust, dass jede Zeile Klassen hat, die beschreiben welcher Gruppe sie zugehörig ist. Also bspw.:
HTML:
<table id="vergleichstabelle">
  <tr class="o2">
    <td>Ich bin o2</td>
  </tr>
  <tr class="o2">
    <td>Ich bin auch o2</td>
  </tr>
  <tr class="tmobile">
    <td>Ich bin T-Mobile</td>
  </tr>
</table>

...

<form action="#" id="vergleichsauswahl">
  <input type="checkbox" value="o2">O2<br>
  <input type="checkbox" value="tmobile">T-Mobile<br>
</form>

Wenn du filtern willst, zeigst du eben genau die an, die angeklickt wurden. Den Rest versteckst du. Im Ansatz also sowas:

Code:
//alle verstecken
$("#vergleichstabelle tr").hide();

var auswahl="";
//welche sind angeklickt?
$("#vergleichsauswahl input[type=checkbox][checked]").each(
  function() {
    auswahl=$(this).attr("value");
    $("#vergleichstabelle tr."+auswahl).show();
});

Ich kann das gerade hier nicht testen, aber in die Richtung sollte es gehen. Obige Funktion führst du dann jedes Mal aus, wenn eine Checkbox geklickt wird.


Duddle
 
H

higgehagge

Guest

AW: jQuery und checkboxen mit onclick

hallo,
erstmal vielen dank für die schnellen Antworten!
also:

erstmal zu @pluspiano: habe das script nun zur demonstration auf einen freehoster hochgeladen. Nun kann man sich das auch besser vorstellen und betrachten :)
die pfad-angaben zur .js scheinen zu stimmen, da die seite ja schon nachlädt, nur der tabellen inhalt ändert sich leider nicht.
wenn ich die .js rausnehme wird der inhalt auch nicht mehr nachgeladen.
wenn es bei dir funtzt, hast du denn noch etwas verändert am code?

Demo 1: http://test-hilfe.byto.de/checkbox_1/produkt-filter.php

-----------------------------------------
zu @Duddle:
vielen Dank auch für deine Mühe,
finde diese Idee auch übersichtlicher und verständlicher!
Gerne würde ich zu dieser greifen, funtzt aber leider auch nicht wirklich.
vielleicht hast du noch eine Idee woran es liegen könnte?

bin für jede Hilfe sehr Dankbar!

Demo 2: http://test-hilfe.byto.de/checkbox_2/produkt-filter.php


PS: die Quellcodes befinden sich jeweils unter der demonstration. bei veränderungen werde ich den code aktualisieren bis es dann funtzt :)
 
Zuletzt bearbeitet:

Doitsu

Aktives Mitglied

AW: jQuery und checkboxen mit onclick

Kenne mich jetzt zwar noch nicht wirklih mit jQuery aus, aber:
1. Muss das ganze Javascript ding unter deine Seite - Oder, du schreibst es in .ready
2. Muss man doch den Checkboxen quasi ein onclick 'hinzufuegen', und damit dann die Funktion aufrufen? So wie es da stehst, wird das jedenfalls direkt ausgefuehrt. Aber wie gesagt: Kenne mich mit jQuery nicht wirklich aus.

Aber warum es nicht ganz einfach machen: Ganz ohne jQuery, du hast ja eine Klasse, wenn ich nun bei einer Checkbox klicke, gibst du an die Funktion den Klassennamen mit, den du dann auf display: block setzt? Standard waere dann per CSS das ganze auf display: none; zu setzen.
 
Zuletzt bearbeitet:
H

higgehagge

Guest

AW: jQuery und checkboxen mit onclick

hallo doitsu,

also: das der java code am "ende" musste stimmt, sieht nun schonmal etwas anders aus bei demo_2 !

http://test-hilfe.byto.de/checkbox_2/produkt-filter.php

ich versuche schon die ganze zeit ein onclick auf die funktion zu setzen, aber bekomme ich nicht hin. habe mit java einfach zu wenig erfahrungen :mad:
wie muss die onclick funktion denn aussehen.. stehe total aufen schlauch !


2. sicher mag es noch einfache lösungen geben, aber ich weiss nicht wie, zumal ja auch noch dann die daten aus der sql tabelle die tabelle fühlen sollen.

eine lösung oder ein guten ansatz.. immer her damit ;) möchte das gerne so funktionstüchtig haben wie auf

Beispiel: Prepaid Tarife | Handy Prepaid Karten Vergleich
 

Doitsu

Aktives Mitglied

AW: jQuery und checkboxen mit onclick

Wenn du es genauso Funktionstuechtig haben willst, wie auf deiner Beispielseite, kommst du an AJAX nicht vorbei, da ich aber selbst erst mit AJAX Anfange, kann ich dir dabei kaum helfen.. Probiere selbst schon mehr als 7 Stunden rum, um 'nen simples Script zu schreiben. :/

Wie du jetzt mit jQuery ein onclick hinzufuegen kannst: Sollte mit .attr gehen, also each( $(this).attr('onclick', function ..)) Lies dir dazu am besten einfach mal die Seite durch, ggf. mal googlen.
 

Duddle

Posting-Frequenz: 14µHz

AW: jQuery und checkboxen mit onclick

Es wird dir nicht viel bringen, weil du offenbar die Grundlagen von jQuery nicht verstanden hast, trotzdem hier die richtige Version. Zumindest funktioniert sie lokal in meiner Testdatei:

HTML:
<script type="text/javascript">
	$(document).ready(function() {
		$("#vergleichsauswahl input:checkbox").click(function() {
			//alle verstecken
			$("#vergleichstabelle tr").hide();

			//jede Checkbox durchgehen, falls gesetzt -> Zeilen zeigen
			$("#vergleichsauswahl input:checkbox").each(function() {
				if($(this).is(":checked")) {
					var auswahl=$(this).attr("value");
					$("#vergleichstabelle tr."+auswahl).show();
				}
			});
		});
	});
</script>


Duddle
 
H

higgehagge

Guest

AW: jQuery und checkboxen mit onclick

Danke danke duddle,
ja ich schrieb ja auch das ich neuling in sachen jquery bin :'(

aber dank deiner hilfe, sieht es nun schon sehr gut aus bis jetz, aber ein anliegen gibt es nun noch und zwar...

wenn nun alle haken bei den checkboxen wieder entfernt werden, müsste
in der tabelle wieder alles angezeigt werden.

wie kann ich das jetzt noch realisieren, dann ist es so wie es eigentlich sein sollte.

vielen dank nochmal.

Demo: http://test-hilfe.byto.de/checkbox_2/produkt-filter.php
 

Duddle

Posting-Frequenz: 14µHz

AW: jQuery und checkboxen mit onclick

Zum Beispiel kannst du das so machen:
HTML:
//falls nichts ausgewählt, alle anzeigen
aktiv = $("#vergleichsauswahl input:checkbox:checked").size();
if(aktiv == 0) {
	$("#vergleichstabelle tr").show();
}


Duddle
 
H

higgehagge

Guest

AW: jQuery und checkboxen mit onclick

Duddle... vielen Dank du hast mir sehr geholfen, klappt jetzt soweit alles bestens.

ich werde dann nochmal zusammengefasst für andere interessierte user das hier posten.

wie müsste denn eingentlich die funktion erweitert werden wenn man das wie in der beispielseite mit radio buttons noch erweitern möchte?
vielleicht interessiert sich der eine oder andere dafür.

lg
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben