javascript - Dynamic accordion being funny. Every other element treated like content and content not parsed. Why? -
i have following code:
$(document).ready(function() { function gendiv () { var = document.getelementbyid("teacher_num").value; // returns fine var thisdiv = document.getelementbyid("effect"); // div i'm stuffing accordion (var num = 1; num <= i; num++) { // generate accordion many elements in variable var elem = document.createelement('div'); // generates fine elem.id = 'teacher' + num; // fine elem.innerhtml = '<h3> teacher ' + num + ' </h3> \n <div> \n <p> <input type="text" name="teacher_name' + num + '" id="teachername' + num + '" /> </p> \n </div>'; // first accordion element generates takes <h3> of second 1 , treats if it's content of first. !!! document.getelementbyid("effect").appendchild(elem); // runs fine } $("#effect").accordion(); // runs fine? } // end gendiv $("#foo").click(function(){ $("#effect").css("margin-top", "10%").show("blind", {direction: "horizontal"}, 400); gendiv(); }); }); as mentioned in comment generates "teacher 1" first <h3> , puts <h3> teacher 2 </h3> content div of second element. why happen , how fix it? building html string incorrectly? jquery thing i'm doing wrong?
also output (verbaitum) handed browser:
<div id="effect" style="background-color: transparent; float: right; height: 400px; width: 400px; display: block; margin-top: 10%;" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> <div id="teacher1" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" aria-controls="teacher2" aria-selected="true" aria-expanded="true" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> <h3> teacher 1 </h3> <div> <p> <input type="text" name="teacher_name1" id="teachername1"> </p> </div> </div> <div id="teacher2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="teacher1" role="tabpanel" aria-hidden="false" style="display: block; height: 400.79999923706055px;"> <h3> teacher 2 </h3> <div> <p> <input type="text" name="teacher_name2" id="teachername2"> </p> </div> </div> <div id="teacher3" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top" role="tab" aria-controls="ui-accordion-effect-panel-1" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> <h3> teacher 3 </h3> <div> <p> <input type="text" name="teacher_name3" id="teachername3"> </p> </div> </div> </div>
the cause of issue had (simplified) html structure each accordion box:
<div> <h3></h3> <div> <p><input /></p> </div> </div> what needed this:
<h3></h3> <div> <p><input /></p> </div> what i've done used jquery simplify html building , make bit more manageable while fixing root issue. new gendiv function:
function gendiv() { var = document.getelementbyid("teacher_num").value, $effect = $("#effect"); (var num = 1; num <= i; num++) { var $inner = $('<p />').append( $('<input />', { type: 'text', name: 'teacher_name' + num, id: 'teachername' + num }) ); $('<h3 />', { text: 'teacher ' + num }).appendto($effect); $('<div />', { id: 'teacher' + num }).append( $inner ).appendto($effect); } $("#effect").accordion(); } the p tag redundant i've included keep original structure. remove it, change $inner variable this:
var $inner = $('<input />', { type: 'text', name: 'teacher_name' + num, id: 'teachername' + num }); here working: http://jsfiddle.net/bdgcv/
of course, you'd fine plain javascript. create h3 element, set innertext , append thisdiv before append elem.
Comments
Post a Comment