PDA

View Full Version : Resolved Accordion Ajax problems



larrysanders
01-21-2011, 01:06 PM
1) Script Title: Accordion Content script (v1.9) again

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem: I have accordions within accordions to present sub-information. I'm loading the subcontent via ajax, but the top level div thinks it should load the "hiddenajaxlink" it finds. So let's say there's a main category called Sports with sub-categories soccer, baseball, and football- when you open sports it just loads the soccer page because it thinks that link is supposed to be loaded in that div not the sub-category's div. So I added a parameter called ajax class name to make the ajax loading unique to each menu


headerclass: "sportsmenu", //Shared CSS class name of headers group
contentclass: "sportsdiv", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
ajaxclassname: "sports",

I added the unique name to the css hiding mechanism


document.write('a.'+config.ajaxclass+'hiddenajaxlink{display: none}\n') //CSS class to hide ajax link

Then I tried to add that unique name to the jquery that determines whether or not to load via ajax. I don't understand the syntax fully, how can I make it look for the unique name instead of just the "hiddenajaxlink"?



$header.attr('headerindex', index+'h') //store position of this header relative to its peers
$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
var $subcontent=$subcontents.eq(index)
var $ajaxsearchterm = 'a.'+$ajaxclass+'hiddenajaxlink:eq(0)'; //trying to find specific to the current accordian
var $hiddenajaxlink=$subcontent.find($ajaxsearchterm) //see if this content should be loaded via ajax

if ($hiddenajaxlink.length==1) {
$header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
}

larrysanders
01-22-2011, 04:20 AM
I solved it.

You can grab the modified ddaccordion: http://httu.co/scripts/ddaccordion.js

Usage:


//Initialize main menu:
ddaccordion.init({
headerclass: "hobies", //Shared CSS class name of headers group
contentclass: "hobbiesdiv", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
ajaxclassname: "hobies",
mouseoverdelay: 300, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["hobiesclosed", "hobiesopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "500", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

//Initialize home menu:
ddaccordion.init({
headerclass: "sports", //Shared CSS class name of headers group
contentclass: "sportsdiv", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
ajaxclassname: "sports",
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["sportsclosed", "sportsopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
//togglehtml: ["prefix", "<a href=\"#\" name=\"subclosed\"></a>", "<a href=\"#\" name=\"subopened\"></a>"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//donothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

html:


<div class="hobbies">Sports</div>
<div class="hobbiesdiv">
<div class="sports">Football</div>
<div class="sportsdiv">
<a class="sportshiddenajaxlink" href="sports/football.html">Loading football div. The hobbies div knows this isn't meant for it.</a>
</div>
<div class="sports">Soccer</div>
<div class="sportsdiv">
<a class="sportshiddenajaxlink" href="sports/soccer.html">Loading soccer div. The hobbies div knows this isn't meant for it.</a>
</div>

</div>

<div class="hobbies">Crafts</div>
<div class="hobbiesdiv">

<a class="hobbieshiddenajaxlink" href="crafts.html">Loading the crafts div. The hobbies div knows it's meant for it.</a>

</div>



I'm sure my code isn't optimal, but it works :-)