Question

i have this accordion with only one title, that will show an document name and number, if you click on the title, the accordion opens and shows like a detail page of the document, now what i want to ask is.
each user that logs into the mobile app, will have a different amounts of documents connected to the username… now what i need is how to get that one accordion to copy itself for the X amount of documents loaded by the webservice. i need this in javascript because what i am using is :
-visual studio express for windows phone/HTML5/CSS/Javascript.
all the tutorials show a for loop that creates a new for the data, but i allready have a div(accordion) all i need is to get it loaded lest say 10 times just to see if it works, and then enter fake data into the input field

HTML for accrodion

    <div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1)">
  <div class="Accordiontitle" onselectstart="return false;">
    <a>
      <input class="AccordionLink" type="button" href="ItemPages.html" id="docname"/>
    </a>
    <br/>
    <a id="POnumber"></a>
  </div>
</div>
<div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
  <form>
    <p>
      <label for="create" >Created by :</label>
      <input type="text" style="margin-left:60px;" readonly="readonly" DISABLED="DISABLED" size="22" id="create"/>
    </p>
    <p>
      <label for="createdate" >Created Date :</label>
      <input type="text" style="margin-left:43px;" readonly="readonly" DISABLED="DISABLED" size="22" id="createdate"/>
    </p>
    <p>
      <label for="process" >Process name :</label>
      <input type="text" style="margin-left:36px;" readonly="readonly" DISABLED="DISABLED" size="22" id="process"/>
    </p>
    <p>
      <label for="transtype">Transaction type :</label>
      <input type="text" style="margin-left:20px;" readonly="readonly" DISABLED="DISABLED" size="22" id="transtype"/>
    </p>
    <p>
      <label for="lastact">Last action :</label>
      <input type="text" style="margin-left:61px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastact"/>
    </p>
    <p>
      <label for="lastuser">Last user :</label>
      <input type="text" style="margin-left:73px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastuser"/>
    </p>
    <p>
      <label for="lastupd">Last update :</label>
      <input type="text" style="margin-left:55px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastupd"/>
    </p>
    <p>
      <label for="duration">Duration :</label>
      <input type="text" style="margin-left:78px;" readonly="readonly" DISABLED="DISABLED" size="22" id="duration"/>
    </p>
    <p>
      <label for="saved">Saved :</label>
      <input type="text" style="margin-left:93px;" readonly="readonly" DISABLED="DISABLED" size="22" id="saved"/>
    </p>
    <p>
      <label for="adhoc">Ad hoc user :</label>
      <input type="text" style="margin-left:53px;" readonly="readonly" DISABLED="DISABLED" size="22" id="adhoc"/>
    </p>
  </form>
</div>
</div>

even proper links to sites will work aswell 🙂
thnx

Answer 1

I guess this is the first step…

/* a helper method */

function getElsByClassName(classname, container){
    var rv = [];
    container = container || document;

    var elems  = container.getElementsByTagName('*')
    if (elems.length){
        for (var x in elems ){
            if (elems[x] && elems[x].className && elems[x].className == classname){
                rv.push(elems[x]);
            }
        }
    }
    return rv; 
}

/* the code */
var accordions = document.getElementById("accordions"),
    accordion = getElsByClassName("AccordionContainer")[0],
    numberOfAcc = 10;

for(var i = 0; i< numberOfAcc; i++){
    var obj = accordion.cloneNode(true),
        btn = getElsByClassName("runAccordionButton", obj)[0];
    /* here you can attach on click handlers and set values using javascript */
   btn.onclick = function() {
      alert('clicked It');
      //here goes the logic
   };

    //setting values
   var creator = getElsByClassName('create',obj)[0]
   creator.value = 'John Do the ' + i + 'th';  


    //add it to the container       
    accordions.appendChild(obj);
}



​