Update Complete does not fire

[briankitt]

I have 2.17.8 installed, and I am running jquery 2.1.1. I've been playing with 'updatecomplete' but I can't seem to get it to work. I want to use 'updatecomplete' to turn graphics on and off. Currenty they are being done in my ajaxProcessing routine, but that is not going to work for my next mod, because I need the table built first.

    $("#searchMbrTable").each(function (index, element) {
        var $mainTable = $(this);
        $mainTable.tablesorter({
            widgets: ['zebra', 'filter', 'rowClick'],
            widgetOptions: { filter_liveSearch: false, },
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true,
            theme: 'ACS',
        });
        $mainTable.tablesorterPager({
            container: $mainTable.next(".pagerBlock"),
            ajaxUrl: '/Common/MBR_SearchPaging?PageNo={page}&PageSize={size}&FilterList={filterList:filterCol}&SortList={sortList:sortCol}',
            ajaxObject: {
                dataType: 'json',
                data: JSON.stringify(jsonData),
                type: 'post',
                contentType: 'application/json; charset=utf-8',
            },
            customAjaxUrl: function (table, url) {
                $("#searchButton").prop('disabled', true);
                $("#searchProcess").show();
                return ReformatTSUrl(url, $mainTable.attr('id'));
            },
            ajaxProcessing: function (data) {
                var table = LoadTSData(data, $mainTable.attr('id'));
                $("#searchMbrTable").show();
                $mainTable.next(".pagerBlock").show();
                $("#searchProcess").hide();
                $("#searchButton").prop('disabled', false);
                $('#searchMbrTable table tr').contextMenu(menu1, { theme: 'vista' });
                return table;
            },
            size: 25,
        });
        $mainTable.bind("updateComplete", function (e, table) {
            console.log(e);
            console.log(table);
            alert('update complete');
        });

[Mottie]

Hi @briankitt!

The updateComplete event should be called after the table is built. What sort of problem are you seeing?

I wonder if the timing might be slightly off... I hate to suggest this, but try wrapping the code inside the "updateComplete" function in a set timeout with 0 or 1 millisecond of delay and see if that helps (I'd like to know):

$mainTable.bind("updateComplete", function (e, table) {
    setTimeout(function(){
        // do something
    }, 0);
});

Note: I would avoid using alert() and use console.log() instead.

[briankitt]

The reason I put the 'alert' in there, was because I suspected it was not
being fired. I also put the 'console.log' in my code simply trying to
determine if it was being fired. I tried the change above, and it still
does not look like it is being fired. Here is my current code.

  $("#searchMbrTable").each(function (index, element) {
        var $mainTable = $(this);
        $mainTable.tablesorter({
            widgets: ['zebra', 'filter', 'rowClick'],
            widgetOptions: { filter_liveSearch: false, },
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true,
            theme: 'ACS',
        });
        $mainTable.tablesorterPager({
            container: $mainTable.next(".pagerBlock"),
            ajaxUrl:

'/Common/MBR_SearchPaging?PageNo={page}&PageSize={size}&FilterList={filterList:filterCol}&SortList={sortList:sortCol}',
ajaxObject: {
dataType: 'json',
data: JSON.stringify(jsonData),
type: 'post',
contentType: 'application/json; charset=utf-8',
},
customAjaxUrl: function (table, url) {
$("#searchButton").prop('disabled', true);
$("#searchProcess").show();
return ReformatTSUrl(url, $mainTable.attr('id'));
},
ajaxProcessing: function (data) {
var table = LoadTSData(data, $mainTable.attr('id'));
$("#searchMbrTable").show();
$mainTable.next(".pagerBlock").show();
$("#searchProcess").hide();
$("#searchButton").prop('disabled', false);
$('#searchMbrTable table tr').contextMenu(menu1, {
theme: 'vista' });
return table;
},
size: 25,
});
$mainTable.bind("updateComplete", function (e, table) {
setTimeout(function () {
console.log(e);
console.log(table);
alert('update complete');
}, 0);
});
});

On Wed, Oct 22, 2014 at 5:35 PM, Rob G [email protected] wrote:

Hi @briankitt https://github.com/briankitt!

The updateComplete event should be called after the table is built. What
sort of problem are you seeing?

I wonder if the timing might be slightly off... I hate to suggest this,
but try wrapping the code inside the "updateComplete" function in a set
timeout with 0 or 1 millisecond of delay and see if that helps (I'd like to
know):

$mainTable.bind("updateComplete", function (e, table) {
setTimeout(function(){
// do something
}, 0);});

Note: I would avoid using alert() and use console.log instead.

—
Reply to this email directly or view it on GitHub
#749 (comment).

[Mottie]

I am guessing that only the initial updateComplete event is being missed?

I would move the bind to updateComplete to before anything gets initialized, because if everything moves fast enough the event may not get bound until after the initial event.

$(function(){

    var $mainTable = $("#searchMbrTable");

    $mainTable
        .bind("updateComplete", function (e, table) {
            // ...
        })
        .tablesorter({
            // ...
        })
        .tablesorterPager({
            // ...
        });

});

Or, maybe that code might work better if it was binding to the pagerComplete event?

Note: This code isn't necessary

$("#searchMbrTable").each(function (index, element) {

because $("#searchMbrTable") will only return one element, so no need to loop through the results.

[briankitt]

I agree the 'foreach' isn't necessary in this case. I have 4 tables on my
page, and was originally processing all 4 with a 'foreach' off of
'.tablesorter' class. However, this one table needs to be processed
differently, so I duplicated the code, and I was just lazy, and kept the
'foreach' in there and changed the class to an id reference.

Moving it up does not help either. It still does not fire, but everything
on the table works perfectly. Paging, changing page size, sorting,
filtering, everything works perfectly interacting with AJAX back to my MVC
backend.

    $("#searchMbrTable").each(function (index, element) {
        var $mainTable = $(this);
        $mainTable.tablesorter({
            widgets: ['zebra', 'filter', 'rowClick'],
            widgetOptions: { filter_liveSearch: false, },
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true,
            theme: 'ACS',
        });
        $mainTable.bind("updateComplete", function (e, table) {
            setTimeout(function () {
                console.log(e);
                console.log(table);
                alert('update complete');
            }, 0);
        });
        $mainTable.tablesorterPager({
            container: $mainTable.next(".pagerBlock"),
            ajaxUrl:

'/Member/SearchPaging?PageNo={page}&PageSize={size}&FilterList={filterList:filterCol}&SortList={sortList:sortCol}',
ajaxObject: {
dataType: 'json',
data: JSON.stringify(jsonData),
type: 'post',
contentType: 'application/json; charset=utf-8',
},
customAjaxUrl: function (table, url) {
$("#searchButton").prop('disabled', true);
$("#searchProcess").show();
return ReformatTSUrl(url, $mainTable.attr('id'));
},
ajaxProcessing: function (data) {
var table = LoadTSData(data, $mainTable.attr('id'));
$("#searchMbrTable").show();
$mainTable.next(".pagerBlock").show();
$("#searchProcess").hide();
$("#searchButton").prop('disabled', false);
// $('#searchMbrTable table
tr').contextMenu(menu1, { theme: 'vista' });
return table;
},
size: 25,
});
});

On Fri, Oct 24, 2014 at 11:02 AM, Rob G [email protected] wrote:

I am guessing that only the initial updateComplete event is being missed?

I would move the bind to updateComplete to before the pager get
initialized, because if everything moves fast enough the event may not get
bound until after the initial event.

$(function(){

var $mainTable = $("#searchMbrTable");

$mainTable
    .tablesorter({
        // ...
    })
    .bind("updateComplete", function (e, table) {
        // ...
    })
    .tablesorterPager({
        // ...
    });

});

Note: This code isn't necessary

$("#searchMbrTable").each(function (index, element) {

because $("#searchMbrTable") will only return one element, so no need to
loop through the results.

—
Reply to this email directly or view it on GitHub
#749 (comment).

[Mottie]

The updateComplete event only fires if an update event (update/updateRows, updateAll, addRows and updateCell) is triggered.

The pager uses internal code to update the table, so switch the event binding to the pagerComplete event for completion of ajax processing (demo).

[briankitt]

The 'pagerComplete' does fire if I click something in the pager, but it
does not fire on the initial load of the table. What we probably need is
an 'ajaxComplete'? I could probably add one myself, but if this is
something other people need, perhaps it's something to put on the 'to do'.

On Fri, Oct 24, 2014 at 3:10 PM, Rob G [email protected] wrote:

The updateComplete event
http://mottie.github.io/tablesorter/docs/#updatecomplete only fires if
an update event (update/updateRows, updateAll, addRows and updateCell) is
triggered.

The pager uses internal code to update the table, so switch the event
binding to the pagerComplete event
http://mottie.github.io/tablesorter/docs/#pagercomplete for completion
of ajax processing (demo http://jsfiddle.net/Mottie/uwZc2/22/).

—
Reply to this email directly or view it on GitHub
#749 (comment).

[Mottie]

There is also a pagerBeforeInitialized event (before ajax completes) and a pagerInitialized event.

[briankitt]

I added this at line 443 in Javascript file jquery.tablesorter.pager.js.
It's right near the end of the renderAjax function. This gave me EXACTLY
what I need, and now I am able to add the functionality I want. I realize
it's not good business to modify this code, but this is a function my users
really want.

Thank you so much for your help!!
if (typeof (p.ajaxComplete) === "function") {
p.ajaxComplete(table);
};

On Fri, Oct 24, 2014 at 3:10 PM, Rob G [email protected] wrote:

The updateComplete event
http://mottie.github.io/tablesorter/docs/#updatecomplete only fires if
an update event (update/updateRows, updateAll, addRows and updateCell) is
triggered.

The pager uses internal code to update the table, so switch the event
binding to the pagerComplete event
http://mottie.github.io/tablesorter/docs/#pagercomplete for completion
of ajax processing (demo http://jsfiddle.net/Mottie/uwZc2/22/).

—
Reply to this email directly or view it on GitHub
#749 (comment).

[Mottie]

You could also add a success function to the pager ajaxObject option without needing to change the pager code.