Title: Maintaining EasyUI Formating Post by: stephenl on May 31, 2021, 04:18:04 AM Hello
I am using EasyUI with Tabs to create a form.. I found an excellet piece of Javascript to help add lines to a dynamic form, I have adopted to meet my requirements and while it works very well, it seems that the EasyUI formating for input boxes and buttons no longer work on added lines The attached image shows my problem, the 1st line is generated when the form loads, additional lines have been added with the Javascript below :- $(document).ready(function () { var counter = 0; counter = $('#myTable tr').length - 2; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; cols += '<td width="100"> <select class="easyui-combobox" name="func' + counter + '" style="width:100px;" required>' +'<option value = "Add" selected>Add</option>' +'<option value = "Remove">Remove</option> </select> </td>'; cols += '<td><input class="easyui-textbox" style="width:100px" name="name' + counter + '"/></td>'; cols += '<td><input class="easyui-textbox" style="width:50px" name="qty' + counter + '"/></td>'; cols += '<td><input type="button" id="ibtnDel" value="Delete"></td></tr>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; if (counter == 10) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit"); }); $("table.order-list").on("click", "#ibtnDel", function (event) { $(this).closest("tr").remove(); counter --; if (counter < 10) $('#addrow').attr("disabled", false).prop('value', "Add Row"); }); }); Im looking for suggestions how I can keep the EasyUI formating, and also use the EasyUI buttons, while maintaining the same functionality, when adding additional lines Assistance is appreciated Thank you Title: Re: Maintaining EasyUI Formating Post by: jarry on June 01, 2021, 04:57:00 AM After appending new html elements, please parse them using $.parser.parse method.
Code: $("table.order-list").append(newRow); $.parser.parse(newRow); Title: Re: Maintaining EasyUI Formating Post by: stephenl on June 01, 2021, 02:01:44 PM Such a simple fix - works well !
Thank you Jarry Title: Re: Maintaining EasyUI Formating Post by: stephenl on June 18, 2021, 02:18:45 PM Hello
The formating is now working well thanks to Jarry, however I now need an event to fire everytime an item changes. The EasyUI event for textbox changes, will not work as the textbox name changes as the list builds :- $('#name').textbox({ onChange: function(value){ console.log('The value has been changed to ' + value); } }); ie the row number is appended to name, as the lists builds I have therefore added the following event to my previously posted code $("table.order-list").on("change", 'input[name^="item' + counter + '"]', function (event) { console.log("Changed !"); }); which i believe should work, but doesn't ?? I would appreciate suggestions as to why this isnt working Thank you Title: Re: Maintaining EasyUI Formating Post by: stephenl on June 19, 2021, 05:43:39 AM Hello
Removig - class="easyui-textbox" from my input statement resolves the problem, however thw text boxes revert back to loosing the EasyUI formating Ie back where i started - Is there a different solution ?? Thank you Title: Re: Maintaining EasyUI Formating Post by: jarry on June 20, 2021, 08:39:05 PM Please refer to the code below.
Code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic TextBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> var counter = 0; function addRow() { var tr = $('<tr></tr>').appendTo('.order-list'); var td = $('<td></td>').appendTo(tr); $('<input>').attr('name', 'func' + counter).appendTo(td).combobox({ data: [{ value: 'Add', text: 'Add', selected: true }, { value: 'Remove', text: 'Remove' }], editable: false }); td = $('<td></td>').appendTo(tr); $('<input>').attr('name','name'+counter).appendTo(td).textbox({ onChange: function(value){ console.log('changed:'+value); } }); td = $('<td></td>').appendTo(tr); $('<input>').attr('name','qty'+counter).appendTo(td).textbox({ onChange: function(value){ console.log('changed:'+value); } }); $('<td><input type="button" id="ibtnDel" value="Delete"></td>').appendTo(tr); counter++; if (counter>=10){ $('#addrow').attr('disabled',true); } } $(function () { $("#addrow").on("click", function () { addRow(); }); $("table.order-list").on("click", "#ibtnDel", function (event) { var tr = $(this).closest("tr"); tr.find('.combobox-f').combobox('destroy'); tr.remove(); counter--; if (counter < 10) $('#addrow').attr("disabled", false).prop('value', "Add Row"); }); }) </script> </head> <body> <table id="myTable"></table> <table class="order-list"></table> <button id="addrow">Add Row</button> </body> </html> Title: Re: Maintaining EasyUI Formating Post by: stephenl on June 22, 2021, 11:58:30 AM Hi
Thanks for the example.. I'm now trying to set a value (using the "setvalue" method) to the qty0 textbox, on name change ie... Code: $('<input>').attr('name','name'+counter).appendTo(td).textbox({ onChange: function(value){ console.log('changed:'+value); [b] $('#qty0').textbox('setValue', "TEST DATA");[/b] // <--- This doesnt seem to work ??? } }); What am i doing wrong ? Thank you Title: Re: Maintaining EasyUI Formating Post by: battlezad on October 11, 2021, 12:08:54 AM Hi Use SetText to set displaying value.Thanks for the example.. I'm now trying to set a value (using the "setvalue" method) to the qty0 textbox, on name change ie... Code: $('<input>').attr('name','name'+counter).appendTo(td).textbox({ onChange: function(value){ console.log('changed:'+value); [b] $('#qty0').textbox('setValue', "TEST DATA");[/b] // <--- This doesnt seem to work ??? } }); What am i doing wrong ? Thank you |