Pass Identifier With Ajax Request?
rapier1 opened this issue · 7 comments
I'm using tabledit as a front end to an sql table. The identifier corresponds to the index in the table so I don't want people to be able to edit it. However, I'd like to be able to pass that into the Ajax request so I can update the table. As it is it seems the Ajax request can only send the cells that are marked as 'editable'.
Is this possible? Am I missing something?
Never mind - I figured out a workaround using hidden cells.
Note: If you are using hiudden cells. Make sure they do not update their value when clicking an editable field and then clicking away. Had this issue myself.
If you face same issue, you can fix it by changing
var
to
var
where field is the name of your hidden fields.
@rapier1 Chris, I'm looking for the same thing. Can you elaborate a bit as to how you used the hidden cell approach. I also do not want the user to edit the id/key.
@rapier1 Chris, I'm looking for the same thing. Can you elaborate a bit as to how you used the hidden cell approach. I also do not want the user to edit the id/key.
I can share what i did with hidden cells.
EDIT: The code doesnt not really work here, check this instead: http://codepad.org/rZSfSeWT
Lines are my: 87 - 156
Around line 87 to 156:
` var Draw = {
columns: {
identifier: function() {
// Hide identifier column.
if (settings.hideIdentifier) {
$table.find('th:nth-child(' + parseInt(settings.columns.identifier[0]) + 1 + '), tbody td:nth-child(' + parseInt(settings.columns.identifier[0]) + 1 + ')').hide();
}
var $td = $table.find('tbody td:nth-child(' + (parseInt(settings.columns.identifier[0]) + 1) + ')');
$td.each(function() {
// Create hidden input with row identifier.
var span = '<span class="tabledit-span tabledit-identifier">' + $(this).text() + '</span>';
var input = '<input class="tabledit-input tabledit-identifier" type="hidden" name="' + settings.columns.identifier[1] + '" value="' + $(this).text() + '" disabled>';
// Add elements to table cell.
$(this).html(span + input);
// Add attribute "id" to table row.
$(this).parent('tr').attr(settings.rowIdentifier, $(this).text());
});
},
editable: function() {
for (var i = 0; i < settings.columns.editable.length; i++) {
var $td = $table.find('tbody td:nth-child(' + (parseInt(settings.columns.editable[i][0]) + 1) + ')');
$td.each(function() {
// Get text of this cell.
// var text = $(this).text();
var text = $(this).html();
// Add pointer as cursor.
if (!settings.editButton) {
$(this).css('cursor', 'pointer');
}
// Create span element.
var span = '<span class="tabledit-span">' + text + '</span>';
// Check if exists the third parameter of editable array.
if (typeof settings.columns.editable[i][2] !== 'undefined') {
// Create select element.
var input = '<select class="tabledit-input ' + settings.inputClass + '" name="' + settings.columns.editable[i][1] + '" style="display: none;" disabled>';
// Create options for select element.
$.each(jQuery.parseJSON(settings.columns.editable[i][2]), function(index, value) {
if (text === value) {
input += '<option value="' + index + '" selected>' + value + '</option>';
} else {
input += '<option value="' + index + '">' + value + '</option>';
}
});
// Create last piece of select element.
input += '</select>';
} else {
// Create text input element.
console.log("Create text input element.");
var input = '<input class="tabledit-input ' + settings.inputClass + '" type="text" name="data" value="' + $(this).text() + '" style="display: none;" disabled>';
input += '<input class="tabledit-input ' + settings.inputClass + '" type="hidden" name="field" value="' + settings.columns.editable[i][1] + '" style="display: none;" disabled>';
// input += '<input class="tabledit-input" type="hidden" name="field[][' + settings.columns.editable[i][1] + ']" value="' + $(this).text() + '" >';
}
// Add elements and class "view" to table cell.
$(this).html(span + input);
$(this).addClass('tabledit-view-mode');
});
}
},`
The interesting part is at around line 100:
var input = '<input class="tabledit-input tabledit-identifier" type="hidden" name="' + settings.columns.identifier[1] + '" value="' + $(this).text() + '" disabled>';
And again around line 146 - 147:
`
var input = '';
input += '';
`
In the JS code to actaivte it, i have added the following:
identifier: [0, 'id'],
Full code:
`<script type="text/javascript">
$(document).ready(function(){
$('#data_table').Tabledit({
deleteButton: true,
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[2, 'generalNotes'],
[3, 'errorType'],
[6, 'homeUrl'],
[7, 'clientName'],
[8, 'clientReportEmail'],
[2, 'generalNotes'],
[3, 'errorType'],
]
},
hideIdentifier: true,
url: './includes/sites_live_edit.php'
});
});
</script>`
how do i make the data in a column of my displayed table clickable