stephenl
Newbie
Posts: 30
|
|
« 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
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #1 on: June 01, 2021, 04:57:00 AM » |
|
After appending new html elements, please parse them using $.parser.parse method. $("table.order-list").append(newRow); $.parser.parse(newRow);
|
|
|
Logged
|
|
|
|
stephenl
Newbie
Posts: 30
|
|
« Reply #2 on: June 01, 2021, 02:01:44 PM » |
|
Such a simple fix - works well !
Thank you Jarry
|
|
|
Logged
|
|
|
|
stephenl
Newbie
Posts: 30
|
|
« Reply #3 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
|
|
|
Logged
|
|
|
|
stephenl
Newbie
Posts: 30
|
|
« Reply #4 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
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #5 on: June 20, 2021, 08:39:05 PM » |
|
Please refer to the code below. <!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>
|
|
|
Logged
|
|
|
|
stephenl
Newbie
Posts: 30
|
|
« Reply #6 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... $('<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
|
|
|
Logged
|
|
|
|
battlezad
Newbie
Posts: 44
|
|
« Reply #7 on: October 11, 2021, 12:08:54 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... $('<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 Use SetText to set displaying value.
|
|
|
Logged
|
|
|
|
|