Accordion and ajax

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • quipo
    New Member
    • Jan 2009
    • 5
    #1

    Accordion and ajax

    Hi,
    im using an accordion script but it doesnt work if i use it with ajax.
    example:
    Code:
    <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:
    Code:
    <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
    Code:
    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
    Code:
    <!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
    Code:
    * {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_p ane($pane_id)", instead of how is doing now?

    Thanks.
    Last edited by quipo; Jan 17 '09, 09:41 AM. Reason: update
    Tags: accordion
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Can you show the Ajax code that rewrites the foreach statement.

        Comment

        • quipo
          New Member
          • Jan 2009
          • 5
          #3
          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
          Code:
          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);
};
          Last edited by gits; Jan 18 '09, 11:35 AM. Reason: added code tags

            Comment

            • quipo
              New Member
              • Jan 2009
              • 5
              #4
              forgot the link.
              i use : <a href="#" onclick="ajaxFu nction('var1',' var2','page_to_ query.php','res ult_div','loade r_div')">
              click for ajax</a>
              i like 'cos extremely simple, light, efficient.

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  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.

                    Comment

                    • quipo
                      New Member
                      • Jan 2009
                      • 5
                      #6
                      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.

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          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.

                            Comment

                            • quipo
                              New Member
                              • Jan 2009
                              • 5
                              #8
                              this way "sort of" works", just added an (ugly) onclick function, but stays open.
                              JavaScript Accordion

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

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  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.

                                    Comment

                                    Previous template Next
                                    Working...