Accordion and ajax

quipo

Hi,
im using an accordion script but it doesnt work if i use it with ajax.
example:

Expand|Select|Wrap|Line Numbers

 <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:

Expand|Select|Wrap|Line Numbers

 <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

Expand|Select|Wrap|Line Numbers

 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

Expand|Select|Wrap|Line Numbers

 <!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

Expand|Select|Wrap|Line Numbers

 * {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.

acoder

Can you show the Ajax code that rewrites the foreach statement.

quipo

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

Expand|Select|Wrap|Line Numbers

 
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);

};

quipo

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.

acoder

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.

quipo

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.

acoder

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.

quipo

this way "sort of" works", just added an (ugly) onclick function, but stays open.
JavaScript Accordion

'ssorait, getting kinda tired of it.......

acoder

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.

Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

re: Accordion and ajax

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about