Multiple Table Initialization Requests

jcmickey33

I am working on a webpage for work in which I need to create a table and, based on the selected value in that table, display a modal with more specific data, also in a table. I am running into some issues that are not making sense to me and am hoping someone might be able to shed some light on them for me. Let me state now that I am unfortunately unable to include a link to the page on which I am working, as our development environment is cut off from the outside world. Although I cannot show you what is causing the issues, I will do the best I can to describe them for you. Should you require more information, please let me know and I will do the best I can to provide you with enough to help you help me. Also, I am working in PHP using the Laravel 5 framework; I have cleared caches multiple times, both in the browsers and within the Laravel framework and things are still occurring that I cannot explain.

In the initial table, I have implemented row selection based on the example provided on the DataTables website (https://datatables.net/examples/api/select_single_row.html). When a row is selected, I remove the "selected" class from all table rows and then assign it to the one that was clicked. I then use the value of the newly selected row to make an AJAX call to retrieve data about the selected row and display it to the user in a table that appears in a modal. The first time someone performs this action, everything works as it is intended. It is subsequent actions that are causing problems.

Each object being displayed in the initial table has details which the user will need to see, from time to time. The modal that pops up when a row is selected shows those details. I know that once a DataTable has been initialized, it cannot be altered. For this reason I have included a check to destroy any previously initialized tables:

if ($.fn.dataTable.isDataTable(table)) {
    thisDataTable = $(table).DataTable();
    thisDataTable.clear().draw();
}

This successfully removes the current table data and allows me to create a new table in the same location with new data. However, while watching the operation of the page in Firebug, I noticed that each time I select a row, an AJAX call is being performed for my current selection, as well as every selection previous. For instance, if I click on row0, the following would be executed:

$.ajax({
    url: "{{ URL::to('/row0') }}",  //Laravel's URL construct with a dummy route, but you get the picture
    data: data,
    success: function(data) {
        alert(data);
    }
});

Then if I were to click on row1, there is an AJAX call to "{{ URL::to('/row0') }}" immediately followed by one to "{{ URL::to('/row1') }}". Were I then to click on row2, I would get calls to "{{ URL::to('/row0') }}", "{{ URL::to('/row1') }}", and "{{ URL::to('/row2') }}" with further selections causing the the chain of AJAX calls to simply grow even more.

In trying to debug this problem, I have tried multiple ways of displaying the data/table rows that have the "selected" class. Each time I check before and after I remove and then reassign the class and every time I did this, I was presented with the information I expected (i.e. having row0 selected and then clicking on row1 would display "row0" before the reassignment and "row1" afterwards). There doesn't appear to be more than one row selected, meaning that there is only one piece of data being passed into the "onModalShow" function. The only thing that I can conclude is that something that I am missing is causing every previous call of that function to fire off again. While I don't like to call any bug "acceptable," this one wouldn't be quite so frustrating if each of those AJAX requests was guaranteed to come back in the same order that they were called, thereby leaving the correct data on the modal. As they're asynchronous, unfortunately they don't always behave like that and will leave me with incorrect data being displayed.

Has anyone else encountered this issue before with DataTables? If so, how did you go about dealing with it? And if you've not encountered this error, any thoughts on how to fix it? I have exhausted everything that I have been able to think of on my own and with Google's help, so I am open to any suggestions you all might offer. Thank you, very much, for any assistance you can offer me.