Results 1 to 4 of 4

Thread: Accordian AJAX question

  1. #1
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordian AJAX question

    1) Script Title: Accordion Content script (v2.0)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.htm

    3) Describe problem: Is there a way to load top level menu items using AJAX? I tried loading the menu items, but the accordian does not show the '+', '-' and does not expand when I drill down to the child menu items.

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    Please post your page with the problem so we can look at it.Otherwise it is hard to know what is wrong or not wrong
    Thanks,

    Bud

  3. #3
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is the html code:

    <script type="text/javascript" src="js/ddaccordion.js"></script>
    <script type="text/javascript">
    ddaccordion.startit = function(){ddaccordion.init({
    headerclass: "itemheader", //Shared CSS class name of headers group
    contentclass: "subitem", //Shared CSS class name of contents group
    revealtype: "clickgo", //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: false, //persist state of opened contents within browser session?
    toggleclass: ["expanded", "collapsed"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.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
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    }
    });
    };
    ddaccordion.startit();
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
    displayItems();
    });

    </script>



    </HEAD>
    <BODY>
    <div id="main_container">
    <div class="main_content">
    <ul class="sidebarmenu" id="menu">
    <div id="itemslist">
    <!--a class="item itemheader" href="#">Main item1</a>
    <div class="subitem">
    <ul>
    <li><a href="#">subitem</li>
    </ul>
    </div>
    <a class="item itemheader" href="#">Main item2 </a>
    <div class="subitem">
    <ul>
    <li><a href="#">subitem</li>
    </ul>
    </div-->
    </div>
    </ul>
    </div>
    </div>

    </body>
    ------------
    displayItems function to add list:


    function displayItems(){
    url = "./items.xml";
    $.ajax({
    type:"GET",
    url:url,
    cache:false,
    dataType:"xml",
    success: function(xml) {
    var i = '#itemslist';
    var item1 = $(i);
    item1.empty();

    $(xml).find("item").each(function(){
    var appendString = "";
    appendString = '<a href="#" class="item itemheader">'+$(this).attr("name")+'</a>';
    appendString += '<div class="subitem">';
    appendString += '<ul>';
    appendString += '<li><a href="#">sub menu</li>';
    appendString += '</ul>';
    appendString += '</div>';
    item1.append(appendString);
    });
    },
    error: function(xml){
    alert('error');
    }
    });


    }
    --------------
    style.css file:


    #main_container{
    margin:0 auto;
    width:1200px;
    padding:10px 0 10px 0;
    }

    .main_content{
    margin:0 auto;
    width:1200px;
    height:auto;
    padding:0px 0 50px 0;
    }

    .sidebarmenu{
    margin:0px 0;
    padding:0;
    width:195px;
    }
    .sidebarmenu a.item{background:url(images/sidebar_menu_top.gif) no-repeat center top;
    color: #FFF;display: block;position: relative;width:185px;height:31px;margin:0 0 5px 0;line-height:31px;padding:0px 0 0 10px;text-decoration: none;
    }
    .sidebarmenu a.item:hover{background:url(images/sidebar_menu_top_a.gif) no-repeat center top;}

    .sidebarmenu a.item:visited, .sidebarmenu .item:active{
    color: white;
    }
    .sidebarmenu a.item .statusicon{
    position: absolute;
    top:11px;
    right:7px;
    border: none;
    }

    .sidebarmenu div.subitem{
    background: white;
    }
    .sidebarmenu div.subitem ul{
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0;
    }
    .sidebarmenu div.subitem ul li{
    border-bottom: 1px dotted #bfd1d9;
    }
    .sidebarmenu div.subitem ul li a{
    display: block;
    color: black;
    text-decoration: none;
    padding:5px 0;
    padding-left: 10px;
    }
    .sidebarmenu div.subitem ul li a:hover{
    background: #e2f0ff;
    color: #0e4354;
    }

    ---------------
    Here is the external file items.xml from which the hierarchy is built:

    <items>
    <item description="Main Item1" id="mainitem1" name="Main Item1"/>
    <item description="Main Item2" id="mainitem2" name="Main Item2"/>
    </items>
    ----------------

    When I load the accordian using dynamic Ajax content, I don't see the accordian with the +, - icons and also the accordian does not expand when I click on the node.

    However, it works if the loading is static from html (uncomment out lines <!--a class="item itemheader" ...), How do I get the accordian to work when content is dynamically loaded using Ajax?

  4. #4
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any help on this thread?

Similar Threads

  1. Replies: 0
    Last Post: 12-23-2009, 08:35 PM
  2. ajax accordian and css
    By janetb in forum CSS
    Replies: 0
    Last Post: 05-05-2009, 05:59 PM
  3. Replies: 2
    Last Post: 05-06-2008, 01:27 AM
  4. xml ajax + php question
    By cursed in forum PHP
    Replies: 0
    Last Post: 10-01-2007, 03:14 AM
  5. ajax question
    By nihalz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-28-2007, 06:24 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •