如何在添加新div時自動滾動JQuery UI對話框？

Question

我有一個顯示錶單的JQuery UI對話框彈出窗口。通過點擊添加更多按鈕，我可以添加新的表單到JQuery UI對話框中。

如何使JQuery UI對話框自動滾動並在單擊添加新按鈕時向用戶顯示新的空白表單。

股利增加

<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> 

對話框

$("#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"); 

Answer 1

這是我會怎麼做，尤其是形式的新的HTML的增加。

首先，我將在HTML添加到頁面，用none顯示器和某種template ID的，就像這樣：

<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> 

然後，我可以在add method快速克隆使用我需要的材料，刪除顯示沒有，並粘貼新的表單！事情是這樣：

$("#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); 
     } 
    } 
}); 

在那，我用.animate每當增加了新的形式滾動對話框底部。你也可以直接去純粹的直接改變，跳過這樣的動畫：$("#dbSetting_div").scrollTop($('#dbSetting_div')[0].scrollHeight);

無論如何，這應該有助於你開始。讓我知道你是否需要更多的幫助。現在，檢查出

Working Example