How do I properly use AJAX function to get data (in my circumstance)?

rldean1

I'd like to move away from using a manually specified "static" data source, and I would like to better understand how to use "ajax": function (data, callback, settings) to get data for my DataTables. But, I'm getting the error, Problem: DataTables warning: table id=tblEffectiveDates - invalid JSON response...

CURRENT WAY (working)
Here is an example of the (working) custom framework: http://live.datatables.net/tixokape/2/

1). I initialize the table with an empty data source: data: []
2). At the end of Init (represents user interaction), I request data from my server: webapp.doRequest('getEffectiveDates');
3). Once the data is received, I redraw the table: tblEffectiveDates.clear().rows.add(jsonStruct).draw();

AJAX WAY (not working)
Error, Problem: DataTables warning: table id=tblEffectiveDates - invalid JSON response...
Here is an example: http://live.datatables.net/tixokape/1/

1). I'm attempting to call my custom framework's AppActions inside the DT AJAX function:

                    ajax: {
                        function(data, theCallbackToExec, settings) {
                            webapp.doRequest('getEffectiveDates', form, theCallbackToExec);
                        }
                    },

2). My SQL query returns an Array of Objects. It doesn't have the {data: [{ prefix. However, even when I modify the query to include include the data prefix for json path, root('data'), INCLUDE_NULL_VALUES, it sill says invalid JSON!
3). I don't know how, or if I even need, to include the ajax.dataSrc option.
4). I pass the DT AJAX callback to my framework's doResults AppAction, getEffectiveDates, where I attempt to feed it JSON data. This is VERY similar to how @allan showed me the way to use the AJAX functions in Editor.

                if (typeof options === 'function') {

                    callbackFromDT = options;

                    callbackFromDT(jsonStruct)

                };

Any insight would be appreciated.

allan

3). I don't know how, or if I even need, to include the ajax.dataSrc option.

You can't since you are using a function for ajax.

Can you show me the code for doRequest? Specifically I'd like to know how theCallbackToExec is being called and what data is being passed into it.

Allan

rldean1

@allan sure, I previously attached two JS Bin examples; however, the following is more accurate:

Working:
http://live.datatables.net/banehama/1/edit?js,output

Not working (AJAX way):
http://live.datatables.net/wiqicomo/1/edit?js,output

As an aside:

• doRequest is primarily responsible for collecting form input data, and posting to the server. It has a function that posts to the server, and that function has a callback to doResults
• doResults is primarily responsible for unpacking and displaying the response data.
• Good example: When I use Editor's ajax: function (method, url, data, successCB, error) function, I manually massage data into a JSON string. That JSON and the successCB are passed via doRequest to SQL Server. Once the CRUD response comes back from SQL, whilst in doResults, I feed the response into successCB
• I'm applying the same sort of logic from this previous thread: https://datatables.net/forums/discussion/49037
• My thought is that I could do the same with DT AJAX, rather than re-drawing. This gives me the added benefit of using ajax.reload(), and maintaining selections on reload.

allan

Haha - that look me a worryingly long time to spot the basic issue:

                    ajax: {
                        function(data, theCallbackToExec, settings) {
                            webapp.doRequest('getEffectiveDates', form, theCallbackToExec);
                        }
                    },

That's assigning an object with an anonymous function to ajax. You want to assign a function to ajax!

                    ajax: function(data, theCallbackToExec, settings) {
                         webapp.doRequest('getEffectiveDates', form, theCallbackToExec);
                    },

That will at least get that part running. Its still giving an error, but I think that's because of the JSON data in the mock up test. Try that change in your work dev environment as see if that helps.

Allan

rldean1

• We're fortunate to have you, @allan !
• We're fortunate to have the ability to call those "special" functions outside of DT
• It was also necessary to initialize the table in my doResults sections to avoid redundant calls, and to avoid doubling of data
• It was also necessary to use for json path, root('data'), INCLUDE_NULL_VALUES to get that data prefix at the beginning

Thank you 1,000 times!!!

allan

Wicked - good to hear that helped .

Allan