Results 1 to 8 of 8

Thread: Populating Accordion Menu Content via AJAX

  1. #1
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Populating Accordion Menu Content via AJAX

    1) Script Title: Accordion Content

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

    3) Describe problem: I have spent the better part of four days trying to get a nested accordion which fetches Ajax content to work.

    A stripped-down version is here: http://www.themacdonaldcase.com/test_dda/test.html

    A user should be able to click "A" or "B" and get a list of "A" names or "B" names, each one of which can also be clicked to open and close and show content about each person.

    Everything works in IE8 (both locally and live), but neither Chrome nor Firefox will fetch the Ajax content properly.

    Locally and live, when I click "A" or "B," Firefox (22.0) just give me a blank screen and "Connecting."

    Chrome (local): When I click "A" or "B," they "jump" a little, but nothing opens.
    Chrome (live): The screen goes white when "A" or "B" is clicked.

    Here's a snippet of the main header code (styles not shown):
    Code:
    <HEAD>
    //Initialize MAIN content:
    ddaccordion.init({
        headerclass: "technology", //Shared CSS class name of headers group
        contentclass: "thelanguage", //Shared CSS class name of contents group
        ....
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
        }
    })
    </HEAD>
    <BODY>
    <h3 class="technology">"A" names</h3>
    <div class="thelanguage">
    <a class="hiddenajaxlink" href="A.htm">A</a>
    </div>
    </BODY>
    And here's a snippet from one of the fetched Ajax pages (styles not shown):
    Code:
    <HEAD>
    //Initialize SUB content:
    ddaccordion.init({
        headerclass: "Aheader", //Shared CSS class name of headers group
        contentclass: "Acontent", //Shared CSS class name of contents group
        ....
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
        }
    })
    </HEAD>
    <BODY>
    <h3 class="Aheader">Aaron</strong></h3>
    <div class="Acontent">
    <BR>Biography for Aaron goes here.
    <BR><BR>
    </div>
    </BODY>
    Side note: Most accordion scripts I've tried require unique identifieers for each content group. I have no probem with creating unique IDs for the A through Z main headers, but there are thousands of individual names in total, and it would be impractical and very labor-intensive to create unique IDs for each name. That's why I chose the Accordion Content script, because it doesn't need unique IDs for the various headers.

    I've tried just about everything I know to do, including adapting the script shown on this page. I also tried using the Switch Content script (DD http://www.dynamicdrive.com/dynamici...tchcontent.htm) for the main A-Z headers, and the Accordion Content script for the sub-content. I've also tried putting all scripts in the main page and none on the fetched pages; I've tried putting all scripts on the fetched pages and none on the main page; I've tried putting the top-level scripts on the main page and sub-level scripts on the sub-pages, but nothing works.

    Can someone please help? I don't have much hair left at this point since I've ripped most of it out trying to figure out why my Ajax content doesn't get fetched in Chrome or Firefox.

    I came back to edit this post to say that I hope I didn't post this in the wrong place. I just realized that the topic here is Accordion Menu, not Accordion Content. If I need to repost elsewhere, please let me know. Thank you.
    Last edited by Beverleyh; 07-09-2013 at 07:10 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,038
    Thanks
    16
    Thanked 316 Times in 314 Posts
    Blog Entries
    13

    Default

    I have moved your question to its own thread since the one you posted it in originally was last active in 2009 and could have been deleted as spam.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you, Beverleyh. And thanks for the nice formatting on my script snippets. Hope to get an answer from someone soon. Thanks again.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    There could also be other problems. However, the accordion script uses document.write() to add style to the page each time it's initialized. In most browsers that will overwrite the page.

    Use this version of the script which I've edited to use jQuery's append() function instead of document.write() (right click and 'Save As'):

    ddaccordion.js

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    I experimented and this does fix the problem. I also discovered that you can remove:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <HEAD>
    <TITLE>Test Ajax content to fetch</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    
    <link rel="stylesheet" type="text/css" href="style_names.css">
    
    
    <!--------------- START OF ACCORDION CONTENT HEAD --------------->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="ddaccordion.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
    ***********************************************/
    
    </script>
    from the A.htm, B.htm, etc., as these are already on the 'top' page.

    In fact, by changing things a bit on the 'top' page, the sub pages can (also with a few changes) be greatly simplified (right click and 'Save As'):

    accordion.zip

    Be sure to use the updated script with these new pages.

    Demo:

    http://home.comcast.net/~jscheuer1/s...dion/test.html

    The styles on the top page can and should be made external.
    Last edited by jscheuer1; 07-10-2013 at 03:54 PM. Reason: tried it out
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1:

    I'm so happy at this moment, I almost feel like weeping with joy. IT WORKS.

    I've been coding since 1978, in machine language, DOS and beyond (even wrote my own custom font for ROM on an old Commodore back in the early '80s), but this really had me stumped. I was also a moderator for eight years on CompuServe, managing 32 forums and answering people's questions, so my hat is off to you for your quick and easy-to-understand reply.

    Thank you also for the simplified pages you created. I had made some similar pages during my testing process, with all my styles in an external file (and the ddaccordion script removed from the fetched pages) but nothing worked no matter what I tried, and by the time I posted here, I was so worn-out from all the testing that I just put up the last version I was working on and left it at that.

    THANK YOU again, from the bottom of my heart. You've made this woman a very, very happy camper. Now I can not only finish this project but will also have the ability to apply nested accordions to other projects in the future. Fantastic.
    Last edited by Bunny1; 07-10-2013 at 05:26 PM. Reason: fix typo

  6. #6
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    One more question (please and thank you):

    The docs for Accordion Content say that the following is needed for the script to work:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    I'm going to want to have a banner, etc. for this new "Names" page that matches another page that has been online for a long time, and that page uses a "4.01 Transitional" doctype and a plain <HTML>:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    Using the first DOCTYPE lines above throws off the formatting for my banner, etc. But I've tested your accordion.zip files with the DOCTYPE I've been using, and it seems to work perfectly.

    My question is: Is there any foreseeable problem I might have in the future if I use the "4.01 Transitional" DOCTYPE (and just "<HTML>"> that I've used elsewhere on my site?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I'm not certain. You should test in IE though. That's usually the browser that needs standards mode to operate correctly, if any, though others can be a problem sometimes. Certain measurements that the script needs might not be accurate in quirks mode.

    I didn't write the accordion script, so it might not really be that important. Sometimes the Dynamic Drive coder(s) put things in there like that rather than worry about testing in quirks mode, that way if anything goes wrong in quirks mode, they don't have to worry about it.

    Even if standards are required, that exact DOCTYPE and html tag are not required, so we know that advice is at least a little bit of an exaggeration. But your preferred DOCTYPE is quirks mode.

    As I say, test in IE, as many versions as possible. You can skip 6 and 7 if you like, if you don't think people will be using those much, but remember folks with IE 8 and up can use modes like IE 7, even like IE 5.5, sometimes not even realizing it, but 8, 9, and 10 should be tried in any case. Our simple demo, the one I gave you, seems OK though, at least in IE 10's IE 7 mode with the quirks rendering of IE 5.5, so that's a good sign.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    So far, everything's working great in IE8, Chrome and FF, but I'll try different browser tests as you suggest. Thanks!

Similar Threads

  1. Accordion Content script (v1.7) and Ajax???
    By garethhallnz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-18-2009, 12:12 AM
  2. Dynamically populating a Drop Down content using an external file (Ajax)
    By deepaks.123 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-24-2008, 09:37 PM
  3. Replies: 2
    Last Post: 08-21-2008, 05:34 PM
  4. Accordion Content Script and AJAX help
    By reden in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-28-2008, 08:22 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
  •