Twitter loading table editable json data
Why can't I use bootstrap bootstrap table this way?
<table id="addElements" data-height="299">
<thead>
<tr>
<th data-field="id" data-align="right">Item ID</th>
<th data-field="element" data-align="center">Element</th>
<th data-field="weight" data-align="">TeΕΎina</th>
<th data-field="default_thickness" data-align="">Debljina</th>
</tr>
</thead>
</table>
//put data in js variable and fill the table
var elementData = [{
"id": "1",
"element": "c",
"weight": "20",
"default_thickness": "6"
}, {
"id": "2",
"element": "k",
"weight": "21",
"default_thickness": "2"
}, {
"id": "3",
"element": "p",
"weight": "18",
"default_thickness": "2"
}];
$(function () {
$('#addElements').bootstrapTable({
data: elementData
});
})
$.fn.editable.defaults.mode = 'inline';
$('td').editable({
url: '/post',
type: 'text',
pk: 1,
name: 'parket',
title: 'Enter username'
});
In this fiddle https://jsfiddle.net/aleksacavic/03agu1ex/1/ it works when clicked the table cells are in edit mode. But the identical code doesn't work on my site? What am I missing? As I see, on my side, when clicked, the cells are not allowed to change the class, only the table stream is highlighted, no additional element (input field) is created. Thanks to
+3
source to share
2 answers
You missed the ready function, jquery cannot bind data because of this.
//put data in js variable and fill the table
$(window).bind("load", function() {
var elementData = [{
"id": "1",
"element": "c",
"weight": "20",
"default_thickness": "6"
}, {
"id": "2",
"element": "k",
"weight": "21",
"default_thickness": "2"
}, {
"id": "3",
"element": "p",
"weight": "18",
"default_thickness": "2"
}];
$(function () {
$('#addElements').bootstrapTable({
data: elementData
});
})
$.fn.editable.defaults.mode = 'inline';
$('a').editable({
url: '/post',
type: 'text',
pk: 1,
name: 'parket',
title: 'Enter username'
});
$('td').editable({
url: '/post',
type: 'text',
pk: 1,
name: 'parket',
title: 'Enter username'
});
});
+3
source to share
try adding a delay on loading, fix it:
setTimeout(function(){
$.fn.editable.defaults.mode = 'inline';
var a = $('a');
$('a').editable({
type: 'text',
pk: 1,
name: 'parket',
title: 'Enter username'
});
$('td').editable({
type: 'text',
pk: 1,
name: 'parket',
title: 'Enter username'
});
},500);
0
source to share