Hi,
im using an accordion script but it doesnt work if i use it with ajax.
example: - <div id="accordion">
-
<dl class="accordion" id="slider">
-
<dt>click here for the 1st pane</dt>
-
<dd>content of the 1st pane</dd>
-
<dt>click here for the 1st pane</dt>
-
<dd>content of the 1st pane</dd>
-
<dt>click here for the 1st pane</dt>
-
<dd>content of the 1st pane</dd>
-
</dl>
-
</div>
works ok, but if i do: - <div id="accordion">
-
<dl class="accordion" id="slider">
-
<?
-
foreach ($array as $n)
-
{
-
<dt>click here for the $n pane</dt>
-
<dd>content of $n </dd>
-
}
-
?>
-
</dl>
-
</div>
it works only for the first page, but when i use the ajax to reload the foreach statement, when i click the script it does nothing, not even an error and the panes are all collapsed.
it seems that the script lack of an onclick function in the <dt> pane, instead the onclick function that's triggered from within the script.
accordion.js - var accordion=function(){
-
var tm=sp=10;
-
function slider(n){this.nm=n; this.arr=[]}
-
slider.prototype.init=function(t,c,k){
-
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
-
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
-
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
-
l=s.length;
-
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
-
}
-
slider.prototype.pro=function(d){
-
for(var i=0;i<this.l;i++){
-
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
-
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
-
else if(s.style.display==''){su(s,-1); h.className=''}
-
}
-
}
-
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
-
function sl(c,f){
-
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
-
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
-
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
-
}
-
return{slider:slider}
-
}();
HTML - <!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=iso-8859-1" />
-
<title>JavaScript Accordion</title>
-
<link rel="stylesheet" href="style.css" type="text/css" />
-
<script type="text/javascript" src="accordion.js"></script>
-
</head>
-
<body>
-
<div id="accordion">
-
<dl class="accordion" id="slider">
-
<dt>CLICK ME</dt>
-
<dd>test </dd>
-
<dt>CLICK ME</dt>
-
<dd>test 2 </dd>
-
<dt>CLICK ME</dt>
-
<dd>Test 3 </dd>
-
</dl>
-
</div>
-
-
<script type="text/javascript">
-
var slider1=new accordion.slider("slider1");
-
slider1.init("slider");
-
</script>
-
-
</body>
-
</html>
style.css - * {margin:0; padding:0}
-
-
#accordion {width:459px; margin:50px auto}
-
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
-
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
-
.accordion dt:hover {background:url(images/header_over.gif)}
-
.accordion dd {overflow:hidden; background:#fff}
-
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}
-
-
#accordion2 {width:259px; margin:50px auto; border:1px solid #333; border-top:none}
-
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
-
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
-
.accordion2 dt:hover {background-color:#555}
-
.accordion2 .open {background-color:#444; background-image:url(images/arrow_up.gif)}
-
.accordion2 dd {overflow:hidden; background:#fff}
-
.accordion2 span {display:block; width:229px; border-top:none; padding:15px}
So my question is:
would it be possible to create an onClick function, like "onClick=open_pane($pane_id)", instead of how is doing now?
Thanks.
8  3582 
Can you show the Ajax code that rewrites the foreach statement.
sure,
i use the basic (only 1k) 'cos i dont need the fancy stuff of jquery, mootools, etc..., i also tried to wrap the whole accordion.js with a "function abc(){
$#!$@#
}, but no luck.
ajax.js -
function ajaxFunction(_1,_2,pag,res_div,ldr){
-
// alert(ldr);
-
var vi = document.getElementById(ldr);
-
vi.style.visibility = "visible";
-
var _3;
-
try{
-
_3=new XMLHttpRequest();
-
}
-
catch(e){
-
try{
-
_3=new ActiveXObject("Msxml2.XMLHTTP");
-
}
-
catch(e){
-
try{
-
_3=new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
catch(e){
-
alert("Your browser broke!Need faster, safer, better browser? Get Firefox! Free!");
-
return false;
-
}}}
-
_3.onreadystatechange=function(){
-
var _4=document.getElementById(res_div);
-
if(_3.readyState==4){
-
vi.style.visibility = "hidden";
-
_4.innerHTML=_3.responseText;
-
}
-
};
-
var _5="?var1="+_1+"&var2="+_2;
-
_3.open('GET',pag+_5,true);
-
_3.send(null);
-
};
-
forgot the link.
i use : <a href="#" onclick="ajaxFunction('var1','var2','page_to_query .php','result_div','loader_div')">
click for ajax</a>
i like 'cos extremely simple, light, efficient.
This Ajax code obviously doesn't appear in the HTML code that you posted earlier. Can you post that version of the page? I'd also like to see what page_to_query returns and the div "result_div". A link would probably be better in this case.
hey men,
is all here, test page and files: JavaScript Accordion
i still think it's a js issue, however thanks for your time, whatever the result.
In your test.php file, you've got a div with id "accordion" which will cause problems (duplicate IDs).
Also, since you're overwriting content, you will have to set up the accordion again.
this way "sort of" works", just added an (ugly) onclick function, but stays open. JavaScript Accordion
'ssorait, getting kinda tired of it.......
You have two possibilities:
1. Add the init statement after the content is replaced in the Ajax function; or
2. Modify the Ajax function to replace each dt/dd element individually.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: srilakshmim |
last post by:
Hello
I want to create Accordion (Ajax Control Tool Kit).
My Code is as follows
protected void Page_Load(object sender, EventArgs e)
{
try
{
Accordion...
|
by: srilakshmim |
last post by:
Hello
I want to create Accordion (Ajax Control Tool Kit)dynamically.
My Code is as follows
Code: ( cpp )
protected void Page_Load(object sender, EventArgs e)
{
try
...
|
by: John Graham |
last post by:
I have a form where I separate several of the sections with the use of
an accordion. Because of the requirements I have, I need the form to
be saved every time the user clicks on a different pane...
|
by: =?Utf-8?B?V2FubmFiZQ==?= |
last post by:
We are looking at Ajaxing our existing web application. Question is...Should
we Ajax any and everything we can, or not? One example...if a page posts back
to itself, is that a good candidate for...
|
by: jrcapp |
last post by:
Let's see if I can clearly explain what I am doing with AJAX.
On my Web site, I have a TabContainer that has 2 TabPanels. Inside
each Panel, I am dynamically (using a SQL query) creating an...
|
by: Amzul |
last post by:
hello all
i post the same Q in php forum i believe here its more suitable.
was wondering if anyone have a snipt of accordion in ajax/php before i have to dig in the .net section
does it have...
|
by: ameshkin |
last post by:
Hi Everybody,
I'm just now learning javascript and I'm using mootools. What I want
to do is to dynamically load a php page into accordian panel 2,
depending on which radio button is selected in...
|
by: Tomasz J |
last post by:
Hello developers,
After migrating my web project application (using the old model) to .Net
Framework 3.5 and Ajax Control Toolkit release 20820 the Accordion control
no longer works correctly....
|
by: E11esar |
last post by:
Hi there. I have created an asp.net page with C# and have added two tabs using the respective AJAX control.
I am trying to add a table within an AJAX Accordion control in the second tab but I am...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
