How to use Autocomplete AND "Always shown checkbox" Example using Editor and DataTables

johnvndnbrk

Hello:

I am trying to find a way to use jQuery UI's autocomplete with the clever use of the Editor example, "Always shown checkbox" example(https://editor.datatables.net/examples/api/checkbox.html). I would like to let a user select a value from the autocomplete control, get this selected value, and fire the initialization of both the Editor and dataTable, properly filling the dataTable (I can get this far). I would then like to allow a user to check/uncheck items, the changes of which I immediately persist to the back-end database. The JSFiddle is https://jsfiddle.net/johnvndnbrk/53pwg2tg/5/.

Observation/Issue: When I select a value from the Autocomplete list it properly fires a submit event. I cannot simply submit the form, however, since the dataTable is unaware of the data returned, so I call a global function and pass in the autocomplete param and the dataTable renders as expected. However, the use of this global function prevents the Editor on "change" (or "select") event from firing. I cannot figure out how to pass the autocomplete value to the Editor/dataTable when the initialize w/o a global function call. If I do not use a global function call, then I cannot figure out a way to Initialize the Editor and dataTable with the autocomplete selected value to pass in as a part of the ajax end point. Without the selected value, should the Editor/dataTables init fire I receive the expected ajax/json error.

I have been trying various combinations without any luck for a day now. I really appreciate your help!

John

allan

I cannot figure out how to pass the autocomplete value to the Editor/dataTable when the initialize w/o a global function call.

Just to check my understanding - you want that value to be submitted to the server when DataTables/Editor make an Ajax request, so it can be correctly filtered on the server-side?

If so, can you use ajax.data (DataTables) and ajax.data (Editor) to augment the data that each will send to the server with the value? You could just read the value from the DOM $('#searchTerm').val() in those functions perhaps?

Regards,
Allan

johnvndnbrk

Thank you for the quick response, Allan. The jQuery UI Autocomplete changes the text input for id=searchTerm, and in so doing $('#searchTerm').val undefined. This is OK, however, since I can get this value from ui.item.label, as shown below.

//code in JS file 2:

    var submitAutocompleteForm = function (event, ui) {
        setDataTable(ui.item.label);
                //event.preventDefault(); OR
               // return false;
         }

I can assign ui.item.label to a global variable, but after the autocomplete's widget select event is fired and I grab the ui.item.label value, JS script execution ends. So I cannot figure out how to execute the initialization code for Editor and DataTable after the autocomplete's event is handled. Therefore, I created a function, setDataTable, which I call within the submitAutocompleteForm and the dataTable properly shows the desired data. What I lose doing this, however, is the ability to click on a checkbox in the table and have it fire the Editor's on change event. FYI - if I assign the searchTerm to a static value, I can get the dataTable to display properly for that value and the Editor's on change event works just fine.

Any thoughts? Thanks again for your help!!

John

johnvndnbrk

Hi Allen - Having just purchased the Editor, I have only tried using the jQuery version of this application. Since I am using ASP.NET MVC 5, and have had great success in setting up dataTables grids, I am going to take a close look at Editor for .NET.

Could you please close this out since I will be working with your .NET version?

Thanks!

John