Duck Punching / Monkey Patching breaks Tablesorter

Question

I have a textbox that comma separated/delimited values are entered into which I have to make sure has unique entries. Solved that using Paul Irish's Duck Punching example #2 and tying it to onblur for that textbox.

The values entered into the textbox get broken out into a table. As the table can get very lengthy, I found Mottie's Tablesorter to work brilliantly.

The problem is, the the Duck Punching code is breaking the Tablesorter. The style for the Tablesorter is passed through just fine, but the table doesn't actually sort. BUT, when I comment out the Duck Punching code, Tablesorter miraculosly works.

My coding skills are not such that I can figure out why the two are conflicting. Any assistance would be much appreciated.

I haven't modified the Tablesorter code or added any special sorting elements to it...just following the very basic example right now. Here's the Duck Punching code which I've only modified to include the var for the textbox I need to have unique entries.

 function ValidateTextBox1()
{    
(function($){
var arr = document.getElementById("TextBox1").value.split(',');
    var _old = $.unique;

    $.unique = function(arr){

        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

 }

The function above is in a separate js file which is called via onblur for TextBox1.

Then, I have a button which runs the following:

function GenerateTable()
{  

var Entry1 = document.getElementById("TextBox1").value
var Entry2 = document.getElementById("TextBox2").value
var content = "<table id=myTable class=tablesorter ><thead><tr><th>Entry 1 Values</th><th>Entry 2 Value</th></tr></thead><tbody>"
var lines = Entry1.split(","),
i;
for (i = 0; i < lines.length; i++)
    content += "<tr><td>" + (Entry1.split(",")[i]) + "</td><td>" + Entry2 + "</td></tr>";
    content += "</tbody></table>"


$("#here_table").append(content);
$(function(){
  $("#myTable").tablesorter({
      theme: 'default'
 });
});

}

The function will generate/append the table in a specific DIV.

If I leave in the validation code for TextBox1, the table will generate but isn't sortable (though it does manage to still pull the theme).

If I remove the validation code, the table will generate and is sortable.

Answer 1

The validateText box function above will not work as expected. In this case, "duck-punching" is not even necessary.

Here is how I would fix the script (demo):

HTML

<textarea id="textbox1">6,1,7,5,3,4,3,2,4</textarea><br>
<textarea id="textbox2">column 2</textarea><br>
<button>Build Table</button>
<div id="here_table"></div>

Script (requires jQuery 1.7+)

(function($) {

    // bind to button
    $(function () {
        $('button').on('click', function () {
            // disable button to prevent multiple updates
            $(this).prop('disabled', true);
            generateTable();
        });
    });

    function unique(arr) {
        return $.grep(arr, function (v, k) {
            return $.inArray(v, arr) === k;
        });
    }

    function generateTable() {
        var i,
            $wrap = $('#here_table'),
            // get text box value, remove unwanted
            // spaces/tabs/carriage returns & create an array
            val = $('#textbox1').val().split(/\s*,\s*/),
            // get unique values for Entry1
            entry1 = unique( val ),
            entry2 = $('#textbox2').val(),
            content = "";
        // build tbody rows
        for (i = 0; i < entry1.length; i++) {
            content += "<tr><td>" + (entry1[i] || '?') + "</td><td>" + entry2 + "</td></tr>";
        }
        // update or create table
        if ($wrap.find('table').length) {
            // table exists, just update the data
            $wrap.find('tbody').remove();
            $wrap.find('table')
                .append(content)
                .trigger('update');
        } else {
            // table doesn't exist, build it from scratch
            $wrap
                .html('<table id=myTable class=tablesorter><thead><tr>' +
                    '<th>Entry 1 Values</th>' +
                    '<th>Entry 2 Value</th>' +
                    '</tr></thead><tbody>' + content + '</tbody></table>')
                .find('table')
                .tablesorter({
                    theme: 'blue'
                });
        }
        // enable the button to allow updating the table
        $('button').prop('disabled', false);
    }

})(jQuery);

I tried to add a few comments to make more clear what each step is doing. Please feel free to ask for any clarification.