Jquery html page dynamic control and load -
i creating html table complex logic have created html page row gridrow.html, , 1 main page contents table tag load gridrow.html page using ajax request , result string html. in page have selection option list need fill using dynamic data
var optionlist = $(data).find('#drpoprtions')
$(document).ready(function () { var binddrpvalues = function (control, valuelist, setting) { (var = 0; < valuelist.length; i++) { var option = $("<option>"); option.attr("value", valuelist[i][setting.id]); option.html(valuelist[i][setting.displayname]); $(control).append(option); } }; var bindcontrolvalue = function (control, valuelist, setting,data) { var controltype = $(control).prop('tagname'); var oldval = control.outerhtml; switch (controltype) { case "select": binddrpvalues(control, valuelist, setting); break;; case "input": break; default: } }; var addrow = function (data) { var drptypeofpharma = $(data).find('#drptypeofpharma')[0]; var txtdosage = $(data).find('#txtdosage')[0]; var control = $(data); bindcontrolvalue(drptypeofpharma, [{ "drgtypeid": 1, "drgname": "xyx" }, { "drgtypeid": 2, "drgname": "xyx1" }], { id: 'drgtypeid', displayname: 'drgname' },data); $("#tblgrid").append(data); }; var addnewrow = function () { debugger; addrow("<tr>\r\n <td>\r\n <select id=\"drptypeofpharma\"></select>\r\n </td>\r\n <td>\r\n <input type=\"text\" id=\"txtdosage\"/>\r\n </td>\r\n</tr>"); // $.ajax({ // url: 'url', // success: addrow, // error: function (data) { // debugger; // alert("fail" + data); // } // }); }; var addevent = function () { $("#btnadd").click(addnewrow); }; addevent(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table> <thead> <tr> <td>drp list</td> <td>name</td> </tr> </thead> <tbody id="tblgrid"> </tbody> </table> <input type="button" value="add" id="btnadd"/> <br> <br> <br>drop down list not fill
this add options select options
filloptions(optionlist)
//append table $("#tblgrid").append(data);
but ui not update filled select options
the options added virtual select not reflected. either can write tr dom , try binding values or return updated data.
http://jsfiddle.net/mn5b0hjg/2/
var binddrpvalues = function (control, valuelist, setting) { (var = 0; < valuelist.length; i++) { var option = $("<option>"); option.attr("value", valuelist[i][setting.id]); option.html(valuelist[i][setting.displayname]); $(control).append(option); } return control; }; var bindcontrolvalue = function (control, valuelist, setting,data) { var controltype = $(control).prop('tagname'); var oldval = control.outerhtml; switch (controltype) { case "select": updatedcontrol = binddrpvalues(control, valuelist, setting); var newvalue =$(data).find("select").parent().append(updatedcontrol).closest('tr') $(newvalue).find('select')[0].remove() $("#tblgrid").append(newvalue); break;; case "input": break; default: } }; var addrow = function (data) { var drptypeofpharma = $(data).find('#drptypeofpharma')[0]; var txtdosage = $(data).find('#txtdosage')[0]; var control = $(data); bindcontrolvalue(drptypeofpharma, [{ "drgtypeid": 1, "drgname": "xyx" }, { "drgtypeid": 2, "drgname": "xyx1" }], { id: 'drgtypeid', displayname: 'drgname' },data); }; var addnewrow = function () { addrow("<tr>\r\n <td>\r\n <select id=\"drptypeofpharma\"></select>\r\n </td>\r\n <td>\r\n <input type=\"text\" id=\"txtdosage\"/>\r\n </td>\r\n</tr>"); // $.ajax({ // url: 'url', // success: addrow, // error: function (data) { // debugger; // alert("fail" + data); // } // }); }; var addevent = function () { $("#btnadd").click(addnewrow); }; addevent();
Comments
Post a Comment