EasyUI Forum
December 14, 2024, 04:42:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Maintaining EasyUI Formating
Pages: [1]
« previous next »
  Print  
Author Topic: Maintaining EasyUI Formating  (Read 8341 times)
stephenl
Newbie
*
Posts: 30


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #1 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);
Logged
stephenl
Newbie
*
Posts: 30


View Profile
« Reply #2 on: June 01, 2021, 02:01:44 PM »
Such a simple fix - works well !

Thank you Jarry
Logged
stephenl
Newbie
*
Posts: 30


View Profile
« 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


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #5 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>
Logged
stephenl
Newbie
*
Posts: 30


View Profile
« 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...

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
Logged
battlezad
Newbie
*
Posts: 44


View Profile
« Reply #7 on: October 11, 2021, 12:08:54 AM »
Quote from: 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

Use SetText to set displaying value.
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!