gamerphil
Vielleicht schwirren hier ja doch Genies rum, die von dem gedöns hier Ahnung haben, daher mal ein für dieses Board ungewöhnlicher Thread
ich habe folgendes jquery Accordion:
Code:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
<script type="text/javascript">
$(document).ready(function(){
$(".begegnungen div").eq(1).addClass("active");
$(".begegnungen table").eq(0).show();
$(".begegnungen div").click(function(){
$(this).next("table").slideToggle("slow")
.siblings("table:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("div").removeClass("active");
} );
}); |
|
(Das ist dieses in abgewandelter Form:
http://www.webdesignerwall.com/demo/jquery/accordion1.html)
Nun rufe ich über die Tabelle, die geschlossen und geöffnet wird, auch gleichzeitig eine Funktion (ajax Request) auf. Allerdings möchte ich diese nur ausführen, wenn das Accordion geschlossen ist.
Ich dachte mir ich setze eine Variable auf true wenn offen und auf false wenn geschlossen. In der Ajax-Request Funktion hätte ja eine entsprechende Abfrage stattfinden können.
Allerdings weiss ich nicht wie ich bei dem Accordion eine solche Variable setzen kann, da ich aus dem Code nicht schlau werde, weil es so aussieht als würde über ein und die selben Zeilen sowohl das öffnen als auch das schliessen geregelt.
Wäre sehr nett, wenn mir jemand helfen könnte diese Idee umzusetzen.
Danke schon mal,
Phil
Merialos
Ungefähr so sollte es aussehen, kann mich jetzt aber leider nicht mehr reindenken, werde morgen noch mal drüber schauen:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
|
<div class="accordion">
<h3>Title 1</h3>
<p>Lorem...</p>
<h3>Title 2</h3>
<p>Ipsum...</p>
<h3>Title 3</h3>
<p>Dolor...</p>
</div>
|
|
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
|
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
var $nextP = $(this).next();
var $visibleSiblings = $nextP.siblings('p:visible');
if (!$visibleSiblings.length) {
alert('Alle ausgeblendet');
}
});
});
|
|
kann so natürlich nicht funktionieren, da $nextP nur überprüft ob das nachfolgende p Tag ausgeblendet ist und nicht ob alle ausgeblendet sind (evtl. Schleife?)
Bis morgen
gamerphil
Es kann ja nur eins offen sein. Das andere wird dann automatisch geschlossen.
Merialos
Hmm, stimmt auch wieder, trotzdem funktioniert's nicht.
Werd mich jetzt noch mal damit befassen, Schule is eh fad
Edit:
So müsste es passen:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
|
$(document).ready(function() {
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function() {
$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
if(!$(this).siblings("h3").hasClass('active')&& !$(this).next().siblings("h3").hasClass('active'))
{
alert('Alle ausgeblendet');
}
});
});
|
|
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
|
<div class="accordion">
<h3>Title 1</h3>
<p>Lorem...</p>
<h3>Title 2</h3>
<p>Ipsum...</p>
<h3>Title 3</h3>
<p>Dolor...</p>
</div>
|
|
Der Fehler war, dass ich nicht nur prüfen muss ob alle nachfolgenden p-Tags ausgeblendet sind, sondern auch ob das aktuelle (this) ausgeblendet wird.
Da wo jetzt der Alert kommt, gehört halt dann dein AjaxRequest rein.
Ich hoffe du verstehst mein Kauderwelsch
Wenn du noch willst kannst du noch nen Stylesheet hinzufügen:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
|
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
background-color: blue;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
|
|
gamerphil
Hey,
alles klar danke dir. Css usw brauch ich nicht. Das läuft ja alles schon und soll nur durch Ajax erweitert werden
Hatte bis jetzt über den div (hab das Accordion anstatt auf h3 und p elemente auf table und divs angewendet) ein onclick="loadajax('spiel_id')" eine id an die Ajax Funktion weitergegeben. Bei dem Accordion wird ja beim click auf das div die Funktion ausgeführt ohne, dass sowas wie onclick im div stehen muss.
Dachte mir diese Zeile
$(".begegnungen div").click(function(){
so zuverändern:
$(".begegnungen div").click(function(spiel_id){
Aber wie kann ich jetzt die spiel_id übermitteln? Die muss ja iwie im div stehen. Eventuell als id des divs?
Danke dir schon mal.
Merialos
Du übergibst einfach, in meinem Bsp, im h3-Tag mittels ID die GameID und an die kommst du ran in dem du die ID des aufrufenden Objekts abrfägst:
ca. so: $(this).ID(); wie das genau mit jQuery geht, weiss ich jetzt auch nicht. Hab jetzt leider keine Zeit.
gamerphil
Das funktioniert so nur bedingt.
Mein Accordion hat im Moment nur ein div (bei dir p) Element, da es dynamisch über ne Datenbank erstellt wird.
(Weiss nicht ob von Bedeutung)
Jedenfalls geht das erst beim 2. Klick und die if-Clause trifft auch beim schliessen des Elements zu. Was ja bedeutet, dass es nicht die gewünschte Wirkung zeigt.
Hier mal mein Code:
Merialos
Weg den Stuss. Nach einer Unterredung mit gamer über MSN, weiss ich nun, was er will, die Lösung ist einfach:
das if in meinem vorhergehenden Posting durch das austauschen und pasta:
| code: |
1:
2:
3:
4:
5:
6:
|
if($(this).hasClass('active'))
{
/*Hier kommt der Ajax-Request....*/
}
|
|
Wird ein Spoiler eingeblendet, sollen die Daten mittels AjaxRequest geladen werden, beim Schliessen soll nichts passieren.
Wen's interessiert...
gamerphil
Für Leute dies interessiert und die was mit anfangen können:
Der komplette Code:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
|
$(document).ready(function(){
$(".begegnungen div").eq(1).addClass("active");
$(".begegnungen table").eq(0).show();
$(".begegnungen div").click(function(){
$(this).next("table").slideToggle("slow")
.siblings("table:visible").slideUp("slow");
$(this).toggleClass("active");
if($(this).hasClass('active'))
{
var spiel_id = $(this).attr('id');
var ajaxRequest;
var statussettings={}
statussettings.loadstatustext="Inhalt wird geladen... <br /> <img src='images/content/loading.gif' /><br /><br /><br /><br /><br /><br /><div style='display:none;'>danke</div> "
//Browser Support Code
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
//
ajaxRequest.onreadystatechange = function(){
document.getElementById('spiel_'+spiel_id).innerHTML=statussettings.loadstatustext;
if(ajaxRequest.readyState == 4){
//document.getElementById('loading_image_'+spiel_id).style.display='none';
//alert(ajaxRequest.responseText);
document.getElementById('spiel_'+spiel_id).innerHTML = ajaxRequest.responseText;
}
}
var queryString = "?spielid=" + spiel_id;
ajaxRequest.open("GET", "ajax_soccer.php" + queryString, true);
ajaxRequest.send(null);
}
$(this).siblings("div").removeClass("active");
});
});
|
|
Danke Merialos!