markcell/jquery-tabledit

Patch to allow for textarea inputs and hidden data fields

rapier1 opened this issue · 4 comments

This allows the user to request that an editable field use a textarea widget. It also allows for the user to automatically hide fields. In this case the data from these fields will still be submitted but won't allow the user to (easily) edit them. This has proven to be useful when I want to submit an index value along with the modified fields.

In the options for the table you would call these with

editable: [[1, 'my_field', 'textarea'],
[2, 'dont_show_me', 'hidden']]

diff --git a/jquery.tabledit.js b/jquery.tabledit.js
index 201e0e4..ca87c52 100644
--- a/jquery.tabledit.js
+++ b/jquery.tabledit.js
@@ -120,9 +120,20 @@ if (typeof jQuery === 'undefined') {
 
                             // Create span element.
                             var span = '<span class="tabledit-span">' + text + '</span>';
-
+                           
+                           // check to see if they are asking for a textarea input
+                           if (settings.columns.editable[i][2] == 'textarea') {
+                                // Create textarea input element.
+                                var input = '<textarea class="tabledit-input rows="4" columns="40"' + settings.inputClass + '" name="' +
+                                       settings.columns.editable[i][1] + '" style="display: none;" disabled>' +
+                                   $(this).text() + '</textarea>';
+                           }
+                           // check to see if this is a hidden field
+                           else if (settings.columns.editable[i][2] == 'hidden') {
+                               $td.hide();
+                           }
                             // Check if exists the third parameter of editable array.
-                            if (typeof settings.columns.editable[i][2] !== 'undefined') {
+                           else 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>';

My apologies. I didn't test this patch well enough and it turns out it isn't passing the values for the hidden fields. Once I get this worked out I'll resubmit the patch.

Turns out that I forgot to add the input element back into the hidden cell. This version of patch seems to work as intended.

diff --git a/jquery.tabledit.js b/jquery.tabledit.js
index 201e0e4..150e807 100644
--- a/jquery.tabledit.js
+++ b/jquery.tabledit.js
@@ -121,8 +121,20 @@ if (typeof jQuery === 'undefined') {
                             // Create span element.
                             var span = '<span class="tabledit-span">' + text + '</span>';
 
+                           // check to see if they are asking for a textarea input
+                           if (settings.columns.editable[i][2] == 'textarea') {
+                                // Create textarea input element.
+                                var input = '<textarea class="tabledit-input rows="4" columns="40"' + settings.inputClass + '" name="' +
+                                       settings.columns.editable[i][1] + '" style="display: none;" disabled>' +
+                                   $(this).text() + '</textarea>';
+                           }
+                           // check to see if this is a hidden field
+                           else if (settings.columns.editable[i][2] == 'hidden') {
+                               $td.hide();
+                               var input = '<input hidden class="tabledit-input ' + settings.inputClass + '" type="text" name="' + settings.columns.editable[i][1] + '" value="' + $(this).text() + '" style="display: none;" disabled>';
+                           }
                             // Check if exists the third parameter of editable array.
-                            if (typeof settings.columns.editable[i][2] !== 'undefined') {
+                           else 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>';

Hi rapier1,

I have implemented your patch but it doesn't do anything.
I have no errors, thus the editable field that I have set as textarea still appears as type=text.

Is there anything that should be changed other than you already mentioned above?

Thanks

Hi, thanks! Everything works! You have a little mistake :)

var input = '<textarea class="tabledit-input rows="4" columns="40"' + settings.inputClass + '" name="' +

->

var input = '<textarea class="tabledit-input ' + settings.inputClass + '" rows="4" columns="40" name="' +