Prevent select event from firing if selection has not changed

rldean1

How do I stop the select event from firing via ajax.reload() if the selection has not changed?

How do I evaluate IF the selection has changed? Is there a mechanism already built into DT, or would I need to roll my own? If so, do you have any recommendations?

kthorngren

I don't believe that ajax.reload() will re-select the rows. You must have some custom code doing this. Maybe you will want to use the user-select event instead of the select event. Please post more information/code that happens when you are using ajax.reload(). A test case would be great.

Kevin

rldean1

@kthorngren :

1. My understanding is that ajax.reload() will retain selections, which is fine. I have observed that the select event is fired after a reload (I prevent de-selection)
2. user-select as you suggested might be a good solution, but I can't seem to access the row data via dt.row({selected: true}).data() or dt.row('.selected').data() because the data is not yet selected (documentation says: "user-select event is triggered before items are selected")
3. I don't want to use .on( 'click', 'tr', function () because, well, I prefer select since it's an explicit DT utility, but I may have no choice.
4. It is very difficult to give you a full sample, but I can give you some snippets (below)
5. I suspect that I will have to go back to using .on('click'.... OR, I need to find a way to compare my {selected token} with the "current selection" to see if they are the same BEFORE I call ajax.reload()

tableA=
     ...
     select: { style: 'single', toggleable: false },
     ...
}).on('select', function (e, dt, type, indexes) {
    if (type === 'row') {
        var rowData = dt.row(indexes).data();

        /**
         * 1) update {selection token}
         * 2) evaluate {selection token} to disable/enable specific jQuery tabs
         */

    };
});


tableB =
     ...
     select: { style: 'single', toggleable: false },
     ...
}).on('select', function (e, dt, type, indexes) {
    if (type === 'row') {
        var rowData = dt.row(indexes).data();

        /**
         * 1) update {selection token}
         * 2) evaluate {selection token} to disable/enable specific jQuery tabs
         */

    };
});


/**
 * 
 * jQuery Tabs on ACTIVATE
 * (a tab with a table was activated)
 * 
 */
switch (activeTab) {
    case "tab-0":
        // 1) get row data from table: tableA.row('.selected').data();
        //      a*) I re-collect selections because they may have changed since click
        // 2) update the {selection token} with row data and define the server request
        // 3) call reload
        tableA.ajax.reload();
        break;
    case "tab-1":
        // 1) get row data from table: tableB.row('.selected').data();
        //      a*) I re-collect selections because they may have changed since click
        // 2) update the {selection token} with row data and define the server request
        // 3) call reload
        tableB.ajax.reload();
        break;
    case "tab-2":
    ...
}

rldean1

kthorngren

My understanding is that ajax.reload() will retain selections, which is fine. I have observed that the select event is fired after a reload (I prevent de-selection)

I stand corrected I found that if you have rowId then Datatables will re-select after ajax.reload().

I don't believe there is anything in Datatables to know if the selections have changed after ajax.reload(). Looks like you might be keeping track of the indexes of the selected rows. Maybe you can compare the saved indexes to the indexes in the select event. You could set a flag in the xhr event to know if the select is running to to a reload or other selection, see example in this thread.

Kevin

rldean1

I don't fully understand the example. Does the xhr event give me access to previously selected information?

I'm afraid I've made this way too complicated. I've been stuck in a rut for a while.

Ultimately, all I'm really trying to do is enable/disable jQuery tabs based on row data across all selections in all my tables.

If certain data is the same as I click between tabs (like the Date), then I don't need to reload tables. If the Date changes, then I would need to reload the table.

I can't figure out a "simple" way to do this.

kthorngren

I don't fully understand the example. Does the xhr event give me access to previously selected information?

No, that example is just used to set a flag to indicate their was an XHR response from the ajax.reload() to use in your select event.

I'm not totally clear on what you are trying to achieve.....

is enable/disable jQuery tabs based on row data across all selections in all my tables.

What do you mean by enable/disable? Do you mean to make the tab not clickable?

If certain data is the same as I click between tabs (like the Date), then I don't need to reload tables. If the Date changes, then I would need to reload the table.

How does the Date change. Can you trigger a reload if the Date changes then you don't need to compare each time you switch tabs? Or maybe use a global variable to indicate one or more changes have been made then fetch via ajax when the tab is shown.

I built a simple test case that hopefully you can update to reflect your data. It doesn't use ajax to load the data but JS data. Understanding your data and how / when you want to check for changes to the Date will help us better understand how to help you. Modify the test case as you see fit.
http://live.datatables.net/xojiqite/12/edit

Kevin

rldean1

@kthorngren I really appreciate your help here... however, I won't be able to replicate this in the test environment without a great deal of effort. This issue can be closed.

I do have some thoughts and suggestions about the select event, which I may write a "feature request" post.

kthorngren

I read through your other thread and think I misunderstood your question above. I thought you were wanting to do something in the select event after ajax.reload(). But in the other thread it seems like you want to keep the automatic re-selection from happening after ajax.reload(). You should be able to use deselect() to de-select all the rows before ajax.reload().

I looked through the code in the other thread and get the gist of what you are doing but its hard to visualize without actually seeing it with the data.

I updated my example to show how you can use filter() to determine if there is matching data in the other tabs (to the left) and disable if not matched:
http://live.datatables.net/xojiqite/14/edit

My example uses Bootstrap tabs. Not sure which you are using as I've never used $("#tabs").tabs("option", "disabled", []);. Anyway maybe my example will give you some ideas to help.

Kevin