• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Scripte kombinieren

A

agodesign

Mitglied
Hi an alle,

habe ein kleiens Problem und hoffe dass mir dabei jemand helfen kann.... :)

Ich bin momentan dabei ein kleines Filtersystem für meinen Betrieb zu schreiben und bin eigentlich schon recht weit gekommen.

Das ganze sieht so aus:
jQuery Checkbox Filter Test

Da de Kontrollkästchen noch etwas langweilig aussehen, wollte ich diese etwas aufpeppen.
(http://jsforest.bplaced.net/checkboxen/readme.html)

sobald ich diese jedoch einfüge funktioniert das Filtersystem nicht mher, ich kanns mir echt nicht erklären....

Grüße Daniel
 
Deiner verlinkten Homepage nach verwendest du jQuery, dem Beispiel der Checkboxen zufolge wird MooTools verwendet. In diesem Beispiel wird auf eine lokale Kopie von MooTools zugegriffen.

HTML: 
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moocheck.js"></script>

Ich nehme an, moocheck.js ist die Datei, die die Checkboxen abändert.


Ich vermute jetzt einfach mal ganz banal, dass du diese Dateien nicht im angegebenem Verzeichnis (relativ dem jetzigen) liegen hast. Falls doch könnte es zu Kompabilitätsproblemen zwischen den beiden Libraries kommen. Da ich jQuery selbst verwende und auch etwas durchstöbert habe, weiß ich, dass jQuery einen Befehl besitzt ($.noConflict), der "$" als jQuery-Zugriff freigibt. Das hilft dann vielleicht...

Falls dies dein Problem immer noch nicht löst, bitte ich dich ein Beispiel mit eingebautem Moocheck vorzuführen.
 
Am besten direkt nachdem du jQuery eingebunden hast. Spätestens jedoch bevor du eine andere Library einbindest.

Also

HTML: 
<script src="script/jquery.js"></script>
<script>
  // Soweit ich mich nicht irre liefert noConflict direkt jQuery zurück.
  // Also kurz auf Nummer sicher und noch eine Referenz zu jQuery erzeugen. :D
  var jQuery = $.noConflict( );
</script>
 
Ok also so?
Ich lad gleich mal ein Test hoch mit dem
var jQuery = $.noConflict( );
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input.serie_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('serie_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('serie_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.raum_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('raum_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('raum_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.stil_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('stil_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('stil_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
});
var jQuery = $.noConflict( );</script>

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moocheck.js"></script>
Zum Vergrößern anklicken....

Also ich hab etz mal den noConflict Befehl eingefügt, ändert aber nichts....


EDIT:
http://jsforest.bplaced.net/mootools/readme.html
(hier das Beispiel)
 
Zuletzt bearbeitet:
oh verdammt... hab den js ordner nicht rüberkopiert :S

also der ist etz drin und derpfad stimmt auch, aber was hat es damit (Uncaught ReferenceError: $ is not defined (readme.html, line 10) ) auf sich?

*EDIT*
also des hier wäre mein aktueller code:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
var jQuery = $.noConflict( );
$(document).ready(function(){
$("input.serie_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('serie_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('serie_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.raum_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('raum_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('raum_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.stil_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('stil_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('stil_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
});

</script>
<script type="text/javascript" src="/mootools.js"></script>
<script type="text/javascript" src="/moocheck.js"></script>
Zum Vergrößern anklicken....

no conflict hat nichts geändert und an der fehleneden jquery.js lag es scheinbar auch nicht :S

(link)
http://jsforest.bplaced.net/mootools/readme.html
 
Zuletzt bearbeitet:
Herrje, du musst unbedingt nen Debugger benutzen... xD
Wieso bindest du denn mootools.js und moocheck.js von verschiedenen Ordnern aus ein, wobei ein Ordner nicht auffindbar ist? jQuery findet er übrigens auch noch immer nicht, was erklärt, dass "$" unreferenced ist, also nicht in diesem Scope (in diesem Fall window) auffindbar ist.

Du bindest jQuery über
/js/jquery.js/
Zum Vergrößern anklicken....
ein, was bei deiner Domain bei
http://jsforest.bplaced.net/js/jquery.js
Zum Vergrößern anklicken....
landet. allerdings liegt die Datei in
http://jsforest.bplaced.net/mootools/js/jquery.js
Zum Vergrößern anklicken....
, also entferne entweder den anführenden Slash oder verwende absolute Adressen.
 
ok hab ihn jetzt ans ende :) passiert immernoch nix :S

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$("input.serie_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('serie_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('serie_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.raum_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('raum_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('raum_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});

$("input.stil_check").click(function() {
if($(this).is(':checked')) {
$("#events li."+$(this).attr('id')).removeClass('stil_hidden');
$("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
} else {
$("#events li."+$(this).attr('id')).addClass('stil_hidden');
$("#events li."+$(this).attr('id')).slideUp();
}
});
});
var jQuery = $.noConflict( );
</script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/moocheck.js"></script>
Zum Vergrößern anklicken....
 
Gut, der Fehler liegt tatsächlich in der Inkompabilität zwischen jQuery und MooTools. Beide Libraries liefern das $-Symbol als Zugriff für sich selbst.

Jetzt ein wenig Nachhilfe in JavaScript:
Wenn du Handler zu einem Event hinzufügst wie in diesem Fall $( document ).ready( ); (das Event für das Abschließen des Ladens des DOM-Baums) werden diese höchstwahrscheinlich zu einem späteren Zeitpunkt ausgeführt als das sie referenziert wurden. In unserem Fall ändern wir $ von jQuery auf $ von MooTools. Wenn das Dokument fertig geladen hat greifen wir nun auf $ von MooTools zu, das ein gültiges DOM-Element als 1. Parameter verlangt und keinen Selector.

Du weißt, was du zutun hast?
Tausche jedes $-Symbol gegen jQuery aus, dann sollte es funktionieren. ;)
 
ok danke :) werds gleich ausprobieren

*EDIT* funktioniert leider immernoch nicht :(

(aktueller link) http://jsforest.bplaced.net/mootools/readme.html

*EDIT 2*
Unbenannt.png


anscheinen funktioniert die checkbox einwandfrei, jedoch bleibt der effekt aus...
 
Zuletzt bearbeitet:
Schön, dass es geklappt hat. :)
Nachdem ich mir das alte Script nochmal angesehen habe, bin ich, glaube ich, auf das Problem gestoßen. Moocheck versteckt die eigentlichen Checkboxen und zeigt die Imitate an. Du überprüfst mit deinem Script allerdings, ob die Checkboxen geklickt wurden und ob diese nun checked oder unchecked wurden. Eigentlich hättest du überprüfen müssen, ob das Label geklickt wurde, damit dann die Checkbox manipulieren (falls du das in ein Formular packen möchtest) und die Filter aktivieren.

Mit freundlichen Grüßen,


DarkDragon1993
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben