i have jquery ui dialog popup displays form. clicking add more button can add new form jquery ui dialog.
how can make jquery ui dialog automatically scroll , show user new blank form when add new button clicked.
div added
<div> <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> dialog
$("#dbsetting_div").dialog({ height: 315, width: 500, autoopen: false, modal: true, draggable: false, buttons: { "save": function () {}, "add more": function () { l_i++; formhtml = "<div>"; formhtml += "<form id='" + l_i + "'>"; formhtml += "<label class = 'dbright'>dashboard id: </label><span class = 'dbleft'><select id='dashboard_id' class='dbsettingdd'><option>-------select-------</option>" + dropdowndashboardname + "</select></br></span>"; formhtml += "<label class = 'dbright'>filtering parameter: </label><span class = 'dbleft'><select id='filter_by'><option>-------select-------</option></select></br></span>"; formhtml += "<label class = 'dbright'>y-axis: </label><span class = 'dbleft'><select id='yaxis'><option>-------select-------</option></select></br></span>"; formhtml += "<label class = 'dbright'>chart tiltle: </label><span class = 'dbleft'><input type='text' id='title'/></br></span>"; formhtml += "<label class = 'dbright'>chart type: </label><span class = 'dbleft'><input type='text' id='chart_type'/></br></span>"; formhtml += "<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>"; formhtml += "</form>"; formhtml += "</div>"; $("#dbsetting_div").append("<p>" + formhtml + "</p>"); console.log(scroll); } } }).css("font-size", "12px");
here's how it, adding of form's new html.
first off, add html page, display of none , sort of template id, 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, can use in add method clone material need, remove display none, , paste new form in! so:
$("#dbsetting_div").css("font-size", "12px").dialog({ height: 315, width: 500, autoopen: false, modal: true, draggable: false, buttons: { "save": function () { /* work */ }, "add more": function () { $("#dbsetting_div").append($('<p />').append($('#formtemplate').clone().show())) .animate({ scrolltop: $('#dbsetting_div')[0].scrollheight}, 500); } } }); within that, use .animate scroll dialog bottom whenever new form added. go pure straight change , skip animation like: $("#dbsetting_div").scrolltop($('#dbsetting_div')[0].scrollheight);
anyway, should ya started. let me know if need more help. now, check out working example
Comments
Post a Comment