1

Tengo el siguiente código donde edito el campo de una fila en una tabla, pero quiero que este sea mas didactico, es decir, al momento de editar un campo este salte al siguiente campo donde voy a editar. Tengo una function de success donde deberia saltar al siguiente campo para editar que seria el Item, pero nose porque no funciona.

$('#TablaDespachos').editable({
        container: 'body',
        selector: 'td.pedido',
        title: 'pedido',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Este campo es necesario';
            }
        },  
        success: function(response) {
          
            // $('#TablaDespachos tbody .editable').on('hidden', function(e, reason) {
            //
            //         var $next = $(this).closest('tr>td').next().find('.Clasificacion');
            //         setTimeout(function() {
            //             $next.editable('show');
            //         }, 300);
            // });
        }
    });
    var Item = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        Item.push({
            value: k,
            text: v
        });
    });
    
    $('#TablaDespachos').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: Item,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Este campo es necesario';
            }
        }
    });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="TablaDespachos" class="table table-bordered">
  <thead>
    <tr id="EncabDespachos">
      <th>Id</th>
      <th>Pedido</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="pedido" class="pedido" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="pedido" class="pedido" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

He visto un ejemplo en la siguiente pagina. LINK debes presionar el checkbox auto-open next field al momento de editar este salta al siguiente campo para editar. Me gustaria algo asi, espero haberme explicado bien.

2 respuestas 2

1
+50

Bueno agarre tu mismo código y en el success lo que hice fue irme a un nivel superior osea al tr con el parent() y luego buscar con find() el hijo de esa fila que contenga la clase Item, luego de eso le doy un toggle() para que muestre el campo para editarlo:

$('#TablaDespachos').editable({
        container: 'body',
        selector: 'td.pedido',
        title: 'pedido',
        type: "POST",
        showbuttons: false,
        type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Este campo es necesario';
            }
        },  
        success: function(response) {
        
          $(this).parent().find(".Item").editable('toggle');
        }
    });
    var Item = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        Item.push({
            value: k,
            text: v
        });
    });
    
    $('#TablaDespachos').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: Item,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Este campo es necesario';
            }
        }
    });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="TablaDespachos" class="table table-bordered">
  <thead>
    <tr id="EncabDespachos">
      <th>Id</th>
      <th>Pedido</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="pedido" class="pedido" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select" data-source='[{value: 1, text: "text1"}, {value: 2, text: "text2"}]'>Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="pedido" class="pedido" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select" data-source='[{value: 1, text: "text1"}, {value: 2, text: "text2"}]'>Item1</td>
  </tr>
  </tbody>
</table>

3
  • Esta saltando al próximo select funcionando bien pero me sale esto en el select Error when loading list aparte me crea <tr><td></td></tr>
    – MoteCL
    Commented el 11 oct. 2018 a las 13:09
  • El error es por que el tipo select no tiene data, allí le agregue data para que veas que funciona, y no veo que agregue <tr><td></td></tr>. Commented el 11 oct. 2018 a las 13:24
  • Con esta linea de codigo funciona bien $(this).parent().find(".Item").click(); pero gracias me ayudaste mucho!
    – MoteCL
    Commented el 11 oct. 2018 a las 13:59
0

Como no aclarás que error, voy a suponer que primero es el que da tu código-ejemplo al ejecutarlo: "message": "TypeError: a.fn.popover is undefined"

El problema es el orden en que incluís las librerías, debería ser algo así como:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

Nota: respecto al código en sí, a simple vista aparecen varios problemas como la declaración duplicada de la tabla, la función success comentada, etc. Pero no eso si eso está incluído en tu pregunta o si son modificaciones de pruebas por el error de las librerías. En cualquier caso, también ahí hay problemas.

1
  • Gracias por la ayuda a reparar el post. Ahora funciona el editable
    – MoteCL
    Commented el 11 oct. 2018 a las 12:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.