Pass Identifier With Ajax Request?

[rapier1]

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?

[rapier1]

Never mind - I figured out a workaround using hidden cells.

[websitecareio]

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 $input = $(this).find('.tabledit-input') to var $input = $(this).find('.tabledit-input').not('input[name=field]');

where field is the name of your hidden fields.

[vijaysaimutyala]

@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.

[uldtot]

@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'], <?php } ?> ] }, hideIdentifier: true, url: './includes/sites_live_edit.php' }); }); </script>

[rapier1]

In my editable columns I have the following

columns: { identifier: [0, 'id'], editable: [[1, 'bh_active', '{"0": "no", "1": "yes"}'], [2, 'bh_route'], [3, 'bh_lifespan'], [6, 'bh_community'], [8, 'bh_index']] }

The value I want to pass as the identifier is 8, 'bh_index'

In my table definition I have this print "<td style='display:none' id='bh_index' name='bh_index'>" . $row[bh_index] . "";

Basically, I am telling tabledit that I want to be able to edit bh_index but then I had the cell containing that value from the user. I have to do this because tabledit only passes along values that can be edited by the user.

This is not the most secure way of doing this. A motivated user could open the developers tools and change the style value and then edit the bh_index value and allow them to overwrite other entries. So, it's not a great solution but for my application this works well enough.

In an ideal world you'd have another column tag that would allow you to indicate that these cell values should also be passed but are not editable. I haven't had the time to implement that though.

On 5/14/19 5:18 AM, Vijay Sai Mutyala wrote:

@rapier1 https://github.com/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.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/markcell/jquery-tabledit/issues/118?email_source=notifications&email_token=AAKL66HOMVS2Q7IZ6YETUALPVJ7VVA5CNFSM4HDNTIUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVK3WFQ#issuecomment-492157718, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKL66DUBKEVAQYCVW3RIE3PVJ7VVANCNFSM4HDNTIUA.

[vijaysaimutyala]

Thanks @rapier1. This was quick. And @uldtot, Thanks for sharing the snippet. I will try it out as well.

[steverosky]

how do i make the data in a column of my displayed table clickable