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

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

rldean1rldean1 Posts: 141Questions: 66Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • rldean1rldean1 Posts: 141Questions: 66Answers: 1

    @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.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • rldean1rldean1 Posts: 141Questions: 66Answers: 1
    • 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!!!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Wicked - good to hear that helped :).

    Allan

This discussion has been closed.