This is a migrated thread and some comments may be shown as answers.

Duplicating controls

0 Answers 160 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Christian asked on 25 Sep 2012, 04:40 AM
I made an interface with some controls, from Kendo. It's a number, textbox and dropdownlist. What it does it's create many copies of itself by the press of the "+" button and delete a row by the press of it's "-" button.

Here's the code:
{% extends "saloons/templates/base.html" %}
{% from "ui/forms/macro.html" import wtform %}
{% block content %}
  <form method="POST" action="">
            <td>{{ form.order_date.label }}</td>
            <td>{{ form.order_date }}</td>
  <div id="grid-users"  class="grid-content" style="text-align: center; width: 100%!important">
      <table id="grid">
        <th data-field="number" style="text-align: center">Nro.</th>
        <th data-field="item" style="text-align: center">Articulo</th>
        <th data-field="staff" style="text-align: center">Usuario</th>
        <th data-field="button" style="text-align: center">AƱadir/Remover</th>
    <tbody id="pedidos">
        <td>{{ form.item }}</td>
        <td>{{ form.staff }}</td>
        <td><button type="button" id="add_textbox">+</button></td>
     <div class="buttons">{{ }}</div>
<script type="text/javascript">
    $(function() {
        $("#c0").attr('class', 'k-input');
        var sel = $("#t0").clone();
        var sel2 = $("#c0").clone();
        var i = 1;
        var data = "{{ inventory }}".replace("[", "").replace("]", "");
                var a = data.split(",");
                  if(j == 0){
                   a[j] = a[j].substring(2,a[j].length -1);
                    a[j] = a[j].substring(3,a[j].length -1);
        $("#add_textbox").attr('class', 'k-button');
        $("#add_textbox").live('click', function() {               
            $("#pedidos").append('<tr>' +
                        '<td>'+ i +'. </td>' +
            '<td id="c'+ i +'"></td>' +
            '<td id="t'+ i +'"></td>' +
            '<td><button type="button" rel="del" class="k-button">-</button></td>' +
            $("#tc"+i).css('width', 180);
                   dataSource: a
            sel = $(sel).clone();
            sel2 = $(sel2).clone();
            $("#ts"+i).css('width', 270);
                $("button[rel=del]").live('click', function() {
                   var a2 = 0;
                   $("#pedidos tr").each(function(i){
             min: new Date(),
             value: new Date(),
                     format: "dd/MM/yyyy"
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:40},
                {field:"staff", width:80, editor: function(container, options){
                {field:"button", width:40}]
        $("#t0").css('width', 270);
        $("#c0").css('width', 180);
                    dataSource: a
{% endblock %}

Happens that at some point when you start deleting rows, some dropdowns and textboxes are assigned to the wrong rows. At first I thought that it was because some ids didn't match when making the recount in the minus button, but I already tried that.

Can you help on this one, please?

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question