Cannot use contenteditable widget on server side p

问题:

I have a tablesorter project which has been working good with client side paging since some months. Now I have to turn it to server side paging but I can't get it to work with all the features I was using with client side version.

As on subject, my problem is to make the contenteditable feature to work.

What I've done to achieve that, is to write a custom function to bind to ajaxProcessing handler on the tablesorterPager config:

ajaxProcessing: function (data) {
                    if (data && data.hasOwnProperty('rows')) {
                        var str = "", d = data.rows,
                            // total number of rows (required)
                            total = data.total_rows,
                            // len should match pager set size (c.size)
                            len = d.length;

                        for (var i = 0; i < len; i++) {                          
                            str += '<tr>';
                            for (var column = 0; column < orderedFieldMapping.length; column++) {
                                if (orderedFieldMapping[column].toUpperCase() != 'ACTIVATIONDATE' || bReadOnly)
                                    str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div>' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : '') + '</div></td>';
                                else
                                    str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div ' + (eval('d[i].' + orderedFieldMapping[column]) != null ? '' : 'class="emptyPlaceholder"') + 'onmouseup="javascript:SelectActivationDateText(this);" onblur="javascript:RestoreCellStyle(this);">' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : emptyTextString) + '</div></td>';
                            }
                            str += '</tr>';
                        }

                        // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
                        return [total, $(str)];
                    }
                },

Please note that I'm returning a set of table rows within a jQuery object, option allowed as stated on the docs example comment (also visible on this code sample). The reason why I do such thing is that I need to control table markup to add styles, handlers and classes. That's what I do in the inner for cycle, and it's not very important knowing exactly what I'm doing there. What is important is that I get the expected result and markup for my table, and server side paging is working with no issue, BUT contenteditable widget is not working.

I get no warnings on js console and all is working just fine, but I can't edit columns I marked as editable. I can see that also looking at the markup because contenteditable attribute is not present at all. Of course the widget is inintialized and configured (in the same way that it was on previous version, with client side paging).

Another hint that points on some widget malfunction (maybe): I managed to manually add (inside the very same function I posted above) the contenteditable attribute on the markup just to see if it would give me some information. In this case I can edit the content as expected, but I get no handler for editComplete event, and data acceptance settings are not applying. I could still manually add handlers and custom code to get it to work as intended, but it would be bad and I don't want to use a hack to get an already implemented feature to work.

Any hint would be appreciated, thanks to everyone who will answer.

回答1:

I think I see the issue. The contenteditable widget does not re-apply the contenteditable property on the elements within the table cells when the content is updated (via the pager, or whatever).

So this is definitely a bug, I just opened a ticket: https://github.com/Mottie/tablesorter/issues/732

In the mean time, you can add the contenteditable property to the div in your markup:

str += '<td><div contenteditable>...</div></td>';