Here's how I would do it, especially the adding of the form's new HTML.
First off, I would add the HTML to the Page, with a display of none
and some sort of template
ID, like so:
<div id="formTemplate" style="display: none;">
<form id="1">
<label class="dbright">DashBoard ID:</label><span class="dbleft"><select id="dashboard_id" class="dbSettingDD"><option>-------Select-------</option><option id="#dashboard">Inventory</option><option id="#dashboard2">Quality</option><option id="#dashboard3">Complaints</option></select><br></span>
<label class="dbright">Filtering parameter:</label><span class="dbleft"><select id="filter_by"><option>-------Select-------</option></select><br></span>
<label class="dbright">Y-Axis:</label><span class="dbleft"><select id="yAxis"><option>-------Select-------</option></select><br></span>
<label class="dbright">Chart Tiltle:</label><span class="dbleft"><input type="text" id="title"><br></span>
<label class="dbright">Chart Type:</label><span class="dbleft"><input type="text" id="chart_type"><br></span>
<label class="dbright">Main Chart:</label><span class="dbleft"><input type="radio" name="mainchart" value="yes">Yes <input type="radio" name="mainchart" value="No">No<br></span>
</form>
</div>
Then, I can use this in the add method
to quickly clone the material i need, remove the display none, and paste new form in! Something like so:
$("#dbSetting_div").css("font-size", "12px").dialog({
height: 315,
width: 500,
autoOpen: false,
modal: true,
draggable: false,
buttons: {
"Save": function () { /* do work */ },
"Add More": function () {
$("#dbSetting_div").append($('<p />').append($('#formTemplate').clone().show()))
.animate({ scrollTop: $('#dbSetting_div')[0].scrollHeight}, 500);
}
}
});
Within that, I use .animate
to scroll dialog to bottom whenever a new form is added. You could also just go pure straight change and skip the animation like: $("#dbSetting_div").scrollTop($('#dbSetting_div')[0].scrollHeight);
Anyway, that should help ya get started. Let me know if you need more help. For now, check out the