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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -