Jump to content

Jquery accordion not working?

garethhall

By garethhall
in Javascript Help

 Share

Recommended Posts

garethhall Regular Member

garethhall

Posted
Posted

Hi guys I am working on a big project and I am having trouble with some accordion not working completely. I''l try to explain the problem hopefully it makes sense.

 

I have a page called bookResults.php this page 2 php includes (1. categories.php and 2. header.php). I call (1. jquery.min.js, 2. ddaccordion.js, 3. accordion.js) in header.php. These js file are used in categories.php and it works fine.

 

However I also have some ajax to display my book results and is hooked up like this. header.php calls getBooksResults.js and this in turns call my php page (getBookResults.php). Now my accordion only works partially here. I believe it works partially as all the required divs are folded up when the ajax call if fired but won't unfold them when I click the appropriate element. Note(This used to be a php drive page and it works and only stopped work when I make it ajax). The odd this is then when I include all the js files in the getBookResults.php and access the page directly then the accordion works? but still won't operate when is displayed as part in bookResults.php?

 

Here is my code Any help would be great. Sorry I know it's a lot of code.

 

bookResults.php

<?php require_once("includes/clientConn.php"); 
include("includes/sharedFunctions.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link rel="shortcut icon" href="images/favicon.ico"  />

<title>Kiwi Book Swap</title>
</head>

<body id="generic" >

<div id="container">

    <!--Head and nav-->        
   		  <?php include('includes/header.php');?>
    <!--Categories-->        
   		  <?php include('includes/categories.php');?>

<div id="main_content"> <div id="main_header">
Book Results
</div>

<div class="clear"></div>
<div id="contentArea">
            <div class="clear"></div>
            
            <div id="bookResults"></div>

    	</div>
<div id="main_content_footer"></div>
</div>


<div id="teasers">
<img src="images/1st_teaser.gif" alt="" />
<img class="teaser" src="images/2nd_teaser.gif" alt="" />
</div>


    <!--Footer-->        
   		  <?php include('includes/footer.php');?>

</div> <!-- end container div -->
          
</body>
</html>

 

categories.php

<?php
$sql_cat = "SELECT * FROM categories ORDER BY catName ASC";
$rs_cat = mysql_query($sql_cat, $client);
function subCat($id, $client){
$sql_subCat = "SELECT * FROM subCategories WHERE catId = '$id' ORDER BY subCatName ASC";
$rs_subCat = mysql_query($sql_subCat, $client);
	while($rw_subCat = mysql_fetch_assoc($rs_subCat)){
	echo '<li>';
	//	echo '<a href="bookResults.php?cat='.$id.'&subCat='.$rw_subCat['subCatID'].'" '.($_GET['subCat']==$rw_subCat['subCatID']? 'id="selected"':'').'>';
//	echo '<a href="javascript:void(null)" id="cat'.$id.'subCat'.$rw_subCat['subCatID'].'"  onclick="setSubCatActive('."'cat".$id."subCat".$rw_subCat['subCatID']."'".')" >';	
	echo '<a href="javascript:void(null)" onclick="getBookResult('."'".$id."','".$rw_subCat['subCatID']."'".')">';
		echo $rw_subCat['subCatName'];
		echo '</a>';
	echo '</li>';
}
}

?>
<!--Categories-->  
<div id="leftColumn">      
<div id="categories"> <!-- navigation by category -->
<div id="categories_header">Library</div><div class="clear"></div>

<div class="glossymenu">
<a class="menuitem" href="bookResults.php">Latest Books</a>
<a class="menuitem" href="bookResults">Most Popular</a>
<a class="menuitem" href="bookResults">All Fiction</a>
<a class="menuitem" href="bookResults">All Non-Fiction</a>       
<?php
while($rw_cat = mysql_fetch_assoc($rs_cat)){
echo '<a class="menuitem submenuheader" href="javascript:void(null)" >';
	$catID = $rw_cat['catID'];
	echo $rw_cat['catName'];
	echo '</a>';
	echo '<div class="submenu">';
	echo '<ul>';
	subCat($catID, $client);
	echo '</ul>';
echo '</div>';
}

?>
    	</div>
        
   		 <div id="categories_footer"></div>
    </div>
</div>

 

header.php

<?php
(isset($_SESSION['kbsLogin']) && isset($_SESSION['memID']) && $_SESSION['kbsLogin'] == "1" && $_SESSION['memID'] > "0"? $log ="Log Out" : $log="Log In" );
?>
    <div id="header">
    	<a href="index.php" class="logo"></a>
    </div>
    <div id="mainNav">
    	<form method="post" class="search">
        	<input name="search" type="text"  class="searchField" id="search" value="Enter Search"/>
            <input type="submit" id="go" name="go" src="../images/goBtn.gif" value=""  class="goBtn"/>
        </form>
        <ul class="navigation">
            <li class="home"><a href="index.php" title="Home">Home</a></li>
            <li class="howItWorks"><a href="howitworks.php" title="How It Works">How It Works</a></li>
            <li class="myAccount"><a href="accountoverview.php" title="My Account">My Account</a></li>
            <li class="login"><a href="<? echo($log == "Log In"? 'login.php' : $logoutAction ); ?>" title="<? echo $log?>"><? echo $log?></a></li>
            <li class="register"><a href="registernow.php" title="Register Now">Register Now</a></li>
            <li class="helpMe"><a href="helpme.php" title="Help Me">Help Me</a></li>
          </ul>
    </div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript" src="ajax/js/getBooksResults.js"></script>

 

ddaccordion.js

var ddaccordion={

contentclassname:{}, //object to store corresponding contentclass name based on headerclass

expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
	this.toggleone(headerclass, selected, "expand")
},

collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
	this.toggleone(headerclass, selected, "collapse")
},

expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
	var $=jQuery
	var $headers=$('.'+headerclass)
	$('.'+this.contentclassname[headerclass]+':hidden').each(function(){
		$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
	})
},

collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
	var $=jQuery
	var $headers=$('.'+headerclass)
	$('.'+this.contentclassname[headerclass]+':visible').each(function(){
		$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
	})
},

toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
	var $=jQuery
	var $targetHeader=$('.'+headerclass).eq(selected)
	var $subcontent=$('.'+this.contentclassname[headerclass]).eq(selected)
	if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
		$targetHeader.trigger("evt_accordion")
},

expandit:function($targetHeader, $targetContent, config, useractivated, directclick){
	$targetContent.slideDown(config.animatespeed, function(){
		config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
		if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
			var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
			if (targetLink) //if this header is a link
				setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
		}
	})
	this.transformHeader($targetHeader, config, "expand")
},

collapseit:function($targetHeader, $targetContent, config, isuseractivated){
	$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
	this.transformHeader($targetHeader, config, "collapse")
},

transformHeader:function($targetHeader, config, state){
	$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
	.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
	if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
		$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
		$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
	}
	else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
		$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
	else if (config.htmlsetting.location=="suffix")
		$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
},

urlparamselect:function(headerclass){
	var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
	if (result!=null)
		result=RegExp.$1.split(',')
	return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
},

getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},

setCookie:function(name, value){
	document.cookie = name + "=" + value + "; path=/"
},

init:function(config){
document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('<\/style>')
jQuery(document).ready(function($){
	ddaccordion.urlparamselect(config.headerclass)
	var persistedheaders=ddaccordion.getCookie(config.headerclass)
	ddaccordion.contentclassname[config.headerclass]=config.contentclass //remember contentclass name based on headerclass
	config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
	config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
	if (config.revealtype=="clickgo"){
		config.postreveal="gotourl" //remember added action
		config.revealtype="click" //overwrite revealtype to "click" keyword
	}
	if (typeof config.togglehtml=="undefined")
		config.htmlsetting={location: "none"}
	else
		config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
	config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
	config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
	var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
	var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
	if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
		expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
	var $subcontents=$('.'+config["contentclass"])
	if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
		expandedindices=[]
	if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
		expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
	if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
		expandedindices=[0]
	$('.'+config["headerclass"]).each(function(index){ //loop through all headers
		if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $(this).html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
			$('<span class="accordprefix"></span>').prependTo(this)
			$('<span class="accordsuffix"></span>').appendTo(this)
		}
		$(this).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 needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
		if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
			if (config.animatedefault==false)
				$subcontent.show()
			ddaccordion.expandit($(this), $subcontent, config, false) //Last param sets 'isuseractivated' parameter
			lastexpanded={$header:$(this), $content:$subcontent}
		}  //end check
		else{
			$subcontent.hide()
			config.onopenclose($(this).get(0), parseInt($(this).attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
			ddaccordion.transformHeader($(this), config, "collapse")
		}
	})
	$('.'+config["headerclass"]).bind("evt_accordion", function(e, isdirectclick){ //assign custom event handler that expands/ contacts a header
			var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
			if ($subcontent.css('display')=="none"){
				ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
				if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
					ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
				}
				lastexpanded={$header:$(this), $content:$subcontent}
			}
			else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
				ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
			}
		})
	$('.'+config["headerclass"]).bind(config.revealtype, function(){
		if (config.revealtype=="mouseenter"){
			clearTimeout(config.revealdelay)
			var headerindex=parseInt($(this).attr("headerindex"))
			config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
		}
		else{
			$(this).trigger("evt_accordion", [true])
			return false //cancel default click behavior
		}
	})
	$('.'+config["headerclass"]).bind("mouseleave", function(){
		clearTimeout(config.revealdelay)
	})
	config.oninit($('.'+config["headerclass"]).get(), expandedindices)
	$(window).bind('unload', function(){ //clean up and persist on page unload
		$('.'+config["headerclass"]).unbind()
		var expandedindices=[]
		$('.'+config["contentclass"]+":visible").each(function(index){ //get indices of expanded headers
			expandedindices.push($(this).attr('contentindex'))
		})
		if (config.persiststate==true){ //persist state?
			expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
			ddaccordion.setCookie(config.headerclass, expandedindices)
		}
	})
})
}
}

 

accordion.js

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
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: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/category_arrow.gif' class='statusicon' />", "<img src='images/category_arrowD.gif' class='statusicon' />"], //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(headers, 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
}
})


ddaccordion.init({
headerclass: "infoheader", //Shared CSS class name of headers group
contentclass: "infobox", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
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: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/arrowDown.gif' class='infoicon'/>", "<img src='images/arrowUp.gif' class='infoicon' />"], //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(headers, 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
}
})



ddaccordion.init({
headerclass: "bookheader", //Shared CSS class name of headers group
contentclass: "bookdetails", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
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: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
//togglehtml: ["suffix", "<img src='images/readMoreArrow.gif' class='infoicon'/>", "<img src='images/arrowUp.gif' class='infoicon' />"], //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(headers, 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
}
})

 

getBooksResults.js

var xmlHttp
function getBookResult(catID,subCatID){
xmlHttp=GetXmlHttpObject(catID,subCatID)
if(xmlHttp==null){
	alert("Browser does not support HTTP Request");
	return;
}; 

var url="ajax/getBookResults.php";
url += "?cat="+catID;
url += "&subCat="+subCatID;
//	alert(url);
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
};

function stateChanged(){ 
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
	document.getElementById("bookResults").innerHTML=xmlHttp.responseText;
//		alert("test");
};
};
function GetXmlHttpObject(){
var xmlHttp=null;
try{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
}catch (e){
	// Internet Explorer
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}catch (e){
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	};
};
return xmlHttp;
};

 

getBookResults.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>


<div class="infoContainer">

<?php if($rf_books){ 
while($rw_books = mysql_fetch_assoc($rs_books)){ 
    $i++;
    ?>
    <div <? echo($i % 2? 'class="bookBox"':'class="bookBoxAlt"')?> >
        <a class="featureItem bookheader" href="javascript:void(null)" >
        <img src="images/book1.jpg" alt=""  width="80" border="0" class="left"/><? echo $rw_books['bookTitle']?>  |  <span class="greysmalltext"><? echo $rw_books['bookDate']?></span></a><br />
        <span class="bookInfo">
        <br /><span class="greysmalltext"><? echo $rw_books['bookAuthor']?> </span><a href="bookResults.php" target="_self">More from this author</a><br /><br />  
        <strong>ISBN:</strong> <? echo $rw_books['bookISBN10']?>    |    <strong>Condition:</strong> <? echo $rw_books['bookCondition']?><br /><br />
        </span>
    </div>
    <div class="bookdetails"><? echo $rw_books['bookDesc']?><br /><br />
                        <a href="displayprofile.php?memID=<? echo base64_encode($rw_books['memId'])?>"><? echo $rw_books['memName']?></a> <img alt="" src="images/stars_5.gif"/></a>    |    <a href="swaprequest.php" target="_self">request book</a>    |    <a href="bookwishlist.php">add to wishlist</a>  |   Damage: <? echo $rw_books['bookDamage']?> </div>              
    <? }
}else{
	echo "No books found";	
}?>                         
</div>  


   
</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.