I have the following code where I edit the field of a row in a table, but I want it to be more Dynamic, that is, when editing a field it jumps to the next field where I will edit. I have a success function where I should jump to the next field to edit what the Item would be, but I do not know why it does not work.
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
<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="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
I have seen an example on the next page. link you must press the checkbox auto-open next field at the moment of editing this jump to the next field to edit. I would like something like that, I hope I have explained myself well.
UPDATE: I add a line of code in my success function but the select give a error Error when loading list
and in the table create a new <tr> with <td>
I just changed $(this).parent().find(".Item").editable('toggle');
to $(this).parent().find(".Item").click();
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
<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="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
I think that your error show up because there is no default value at first try changing item then change text in your snippet
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//CODE TO JUMP TO THE SELECT
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
$('#table .task').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.task');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});
$('#table .Item').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.Item');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});
<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="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With