www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Accordion XML Help

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    resolved [RESOLVED] Accordion XML Help

    Hello, I am a university student in the uk and have recently started learning JavaScript and jQuery. I need to make an accordion that dynamically loads XML. I believe this is known as an xml parse. I have managed to populate the accordion with the data from the xml file, however I need to be able to separate the members of staff by their role within the university. There are three types of role academic, administrative and support staff. At the present time I can only get them to populate the first section (academic) of the accordion so if anyone could help me on separating/filtering them into the correct part of the accordion it would be greatly appreciated. Thanks in advanced and sorry if this is the wrong section

    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    var xmlDoc; //holds the XML file
    var xmlSource = "staff.xml";

    try //Internet Explorer
    {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.load(xmlSource);
    } catch (e) {
    try //Firefox, Mozilla, Opera, etc.
    {
    xmlhttp = new window.XMLHttpRequest();
    xmlhttp.open("GET", xmlSource, false);
    xmlhttp.send(null);
    xmlDoc = xmlhttp.responseXML.documentElement;
    } catch (e) {
    alert(e.message);
    }
    }
    </script>
    <script type="text/javascript">
    $(document).ready(function() {


    $('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');
    $(this).next().slideDown('normal');
    });


    $("div.accordionContent").hide();

    });
    </script>

    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="wrapper">
    <div class="accordionButton">Academic Staff</div>
    <div class="accordionContent" id="acordionStaff">
    <script type="text/javascript">
    if (xmlDoc != null) {
    document.write("<table border='1' cellpadding='5' width='100%'>");
    document.write("<tr>");
    document.write("<th><strong>Image</strong></th>");
    document.write("<th><strong>Name</strong></th>");
    document.write("<th><strong>Surname</strong></th>");
    document.write("<th><strong>Role</strong></th>");
    document.write("<th><strong>Type</strong></th>");
    document.write("<th><strong>Email</strong></th>");
    document.write("<th><strong>Phone</strong></th>");
    document.write("</tr>");
    var x = xmlDoc.getElementsByTagName("Staff");
    for (i = 0; i < x.length; i++) {
    document.write("<tr>");
    document.write("<td>");
    document.write("<img src=" + x[i].getElementsByTagName("Image")[0].childNodes[0].nodeValue) + "/>";
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("First_Name")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("Surname")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("Role")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("Type")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("Email")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("Phone")[0].childNodes[0].nodeValue);
    document.write("</td>");
    document.write("</tr>");
    }
    document.write("</table>");
    }
    </script>
    </div>
    <div class="accordionButton">Administrative Staff</div>
    <div class="accordionContent">Administrative Staff</div>
    <div class="accordionButton">Support Staff</div>
    <div class="accordionContent">Support Staff</div>

    </div>

    <div id="acordionStaff"></div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2012
    Posts
    2
    sorry i posted this twice as i didn't know how to delete this as the description was incorrect

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles