ajax.reload() Not Working

donblaylock

When I make a call to insert or update a record, on success, I want to reload the DataTable to reflect the newly added/updated record. Here is my code that is failing. Thanks in advance for some GURU help out there on this... :o)

<

script type="text/javascript" language="javascript" class="init">

    $(document).ready(function() {

        var id;
        var fabric_name;
        var cas;
        var chemical;
        var chem_conc; 
        var chem_phase; 
        var astm_test_results; 
        var astm_test_results_f903; 
        var fabric_url; 
        var ce_test_results; 
        var ce_class;

        var aRowToDelete;

        var bAddMode = false;

        var selected = [];

        var t = $('#chemSearchTable').dataTable( {

            "ajax": {
                "url": "getChemData.php",
                "type": "POST",
                "rowCallback": function( row, data, displayIndex ) {
                if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                    $(row).addClass('selected');
                }
            }
            },

            "columns": [ 
                {'data': 'id', 'sType': 'string', "bVisible": true, "bSearchable": false}, 
                {'data': 'fabric_name', 'sType': 'string', 'bVisible': true, "bSearchable": true},
                {'data': 'cas', 'sType': 'string', 'bVisible': true, "bSearchable": true},
                {'data': 'chemical', 'sType': 'string', 'bVisible': true, "bSearchable": true},
                {'data': 'chem_conc', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'chem_phase', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'astm_test_results', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'astm_test_results_f903', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'fabric_url', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'ce_test_results', 'sType': 'string', 'bVisible': true, "bSearchable": false},
                {'data': 'ce_class', 'sType': 'string', 'bVisible': true, "bSearchable": false}
                ] 
            });     



        $('#btnSubmit').click( function () {
            //  Save the data
            // Need id for selected row and all data from fields to update the record 
            if (bAddMode)
            {
                // Call to INSERT record
                bAddMode = false; // reset the add flag

                $.ajax({
                    type: "POST", 
                    url: "insertChemData.php",
                    data: {
                        "fabric_name":$("#fabric_name").val(),
                        "cas":$("#cas").val(),
                        "chemical":$("#chemical").val(),
                        "chem_conc":$("#chem_conc").val(), 
                        "chem_phase":$("#chem_phase").val(),
                        "astm_test_results":$("#astm_test_results").val(),
                        "astm_test_results_f903":$("#astm_test_results_f903").val(),
                        "fabric_url":$("#fabric_url").val(),
                        "ce_test_results":$("#ce_test_results").val(),
                        "ce_class":$("#ce_class").val()
                    },

                    success: function(output, status)
                    {
                        if (output==1)
                        {
                            clearFields()
                            disableFields(true);  
                            t.ajax.reload();        // FAILING ////////////////////////////////
                        } else {
                            alert("An error was encountered while attempting to add the record.");
                        }
                        // Reload regardless of insert success

                    }
                });                       

            } else 
            { 
                // Call to UPDATE record
                $.ajax({
                    type: "POST", 
                    url: "updateChemData.php",
                    data: {
                        "id":id,
                        "fabric_name":$("#fabric_name").val(),
                        "cas":$("#cas").val(),
                        "chemical":$("#chemical").val(),
                        "chem_conc":$("#chem_conc").val(),
                        "chem_phase":$("#chem_phase").val(),
                        "astm_test_results":$("#astm_test_results").val(),
                        "astm_test_results_f903":$("#astm_test_results_f903").val(),
                        "fabric_url":$("#fabric_url").val(),
                        "ce_test_results":$("#ce_test_results").val(),
                        "ce_class":$("#ce_class").val() 
                    }, 
                    success: function(output, status)
                    {
                        if (output==1)
                        {
                            clearFields();
                            disableFields(true); 
                            t.ajax.reload();        // FAILING //////////////////////////////// 
                            alert("Record Deleted!");
                        } else {
                            alert("An error was encountered while attempting to update the record.");
                        }
                    }
                });         


            }
        } );

allan

I presume you are getting a Javascript error from the above code. See the second top FAQ please.

Allan

donblaylock

Allan,

Thank you for clearing that up. All my other code is written to work with the jQuery version. I tried using the following code to force a reload of the data and it is not working either. Any suggestions?

                            t.fnClearTable( 0 );
                            t.fnDraw();

donblaylock

I tried changing the init to implement the API
var t = $('#chemSearchTable').DataTable(...)
then using the API call to refresh like this and it still will not refresh the data in the DataTable:

t.ajax.reload();

I debugged this and it is executing this line of code without error.

allan

If the reload call is running okay, I would need a link to the page to be able to look at the code and the issue live and debug it.

I would suggest not using the old fn* style functions. Use the new API.

Allan

donblaylock

Thanks Allan - Again!

The Reload is not working. You can see the code at: http://lakeland.com/chemsearch/csdm2.php

I put the code back to the API approach. For now, click on the Add New button and type some data in the fields then click the Save button. The Ajax call to insertChemData.php is working just fine and the record is getting inserted. The table is not getting reloaded though.

allan

Javascript error on the page when clicking the save button (does it now show up in your debugger?):

[Error] ReferenceError: Can't find variable: t
success (csdm2.php, line 366)
c (jquery-1.10.2.min.js, line 4)
fireWith (jquery-1.10.2.min.js, line 4)
k (jquery-1.10.2.min.js, line 6)
r (jquery-1.10.2.min.js, line 6)

Looks like a scope error to me. Your t variable is defined in a different function.

Allan

donblaylock

Allan,

There was a scope issue with some of the vars - fixed that. Also added
"sAjaxSource": "getChemData.php",
to my init on the DataTable and that fixed the t.ajax.reload() call.

Thanks for all your help!

jamesn

hi
can you post the code please ?