Image is not Refreshing after Update. Data Table Shows me the Previous Image Till page get refreshed

Jeivin

Image is not Refreshing after Update. Data Table Shows me the Previous Image Till page get refreshed by (Ctrl + F5)

The following is my DataTable Load Function. Below the Function I have Pasted my Insert and Update Ajax Call Function. In that function I Called this function After Updated the Images. But the DataTable Remains the Same Image till the Page Gets Refreshed by (Ctrl + F5)

var ModuleNametable;  // Global Declaration

function fnLoadModuleTable() {

            if ($.fn.DataTable.isDataTable('#tblModuleNameDetails')) {
                    ModuleNametable.destroy();
            }

            jQuery.ajax({
                url: '../api/MasterManagementAPI/fnGetModuleNameList',
                type: 'POST',
                data: {
                },
                success: function (response) {

                        ModuleNametable = $('#tblModuleNameDetails').DataTable({
                            data: response,
                            'scrollY': 300,
                            columns: [
                                {
                                    'data': 'ModuleID',
                                    'searchable': false,
                                    'orderable': false,
                                    'visible': false
                                },
                                {
                                    'data': 'ModuleImage',
                                    'render': function (data) {
                                        return '<img src="' + data + '" width="50" height="50" />'
                                    }
                                }
                            ],
                            lengthMenu: [[5, 10, 50, -1], [5, 10, 50, "All"]],
                            select: {
                                style: 'single'
                            }
                        })
                            .on('select', function (e, dt, type, indexes) {

                            })
                            .on('deselect', function (e, dt, type, indexes) {

                            });
                }

            });
}

function InsertUpdateModule ()
{
jQuery.ajax({
                url: '../api/MasterManagementAPI/fnInsertUpdateModuleNameMaster',
                type: 'POST',
                data: {

                },
                success: function (response) {

                        var newData = new FormData();
                        var files = $("#fileModuleImage").get(0).files;
                        if (files.length > 0) {
                            newData.append("FileData", files[0]);
                            newData.append("ModuleID", objResponse[1] );
                        }

                        if (files.length > 0) {    //   upload the profile picture
                            jQuery.ajax({
                                url: '../api/MasterManagementAPI/fnModuleMasterImageUpload',
                                type: 'POST',
                                data: newData,
                                contentType: false,
                                processData: false,
                                beforeSend: function (xhr) { $('body').append("<div id='loading'></div>"); },
                                success: function (response) {
                                    $("#loading").remove();
                                    if (response == 'SUCCESS') {
                                        alert('ImageUploaded Successfully');
                                    }
                            });
                        }
     // HERE I CALLED MY DATATABLE LOAD FUNCTION BUT IT'S NOT SHOWING ME THE LATEST UPLOADED IMAGE

                       fnLoadModuleTable();
                    }
                }
            });
}

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Jeivin

kthorngren

Likely its the ajax call in line 67 hasn't completed when you call fnLoadModuleTable(); in line. 83. So I would guess you are getting old data. But you will need to use the browser's network inspector tool to verify. I would move line 83 into the success function (line 74).

If you still need help then please post a link to your page or a running test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin