Processing - Showing loading gif instead of Text

SKC

I want to display a loading gif instead of the default text "Processing" for processing.

This is what I did to achieve the same :

 "language": {
     
            "processing": "<img src='~/Content/images/loadingNew.gif' />"
        },

But it didn't work. is it because of the way I'm referring to the image source?

Here's my JS for Datatable :

$(document).ready(function () {

    $('#searchResult').DataTable(
    {
        "dom": '<"top"lB>rt<"bottom"ip>',   // DataTable element position

        "buttons": [
        {
            text: '<span class="glyphicon glyphicon-refresh" data-toggle="tooltip" title="Refresh Search Table"/>',
            action: function (e, dt, node, config) {
                ReloadData();
            }
        },
        {
            text: '<span class="fa fa-file-excel-o" data-toggle="tooltip" title="Export To Excel"/>',
            action: function (e, dt, node, config) {
                ExportRequests();
            }
        },
        'colvis'],

        initComplete: function () {
            $('.buttons-colvis').html('<span class="glyphicon glyphicon-cog" data-toggle="tooltip" title="Column Visibility"/>')       // Adds icon to the Column Visibility Button
        },

        "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],     // page length options
        "pageLength": 25,   // default page length
        "pagingType": "full_numbers",      // pagination related buttons

        "ordering": true,
        "order": [[0, "desc"]],

        "scrollX": true,  // enables horizontal scrolling      
        "filter": true,
        "responsive": true,
        "serverSide": true,
        "info": true,   // control table information display field
        
        "stateSave": true,  //restore table state on page reload,      

        "language": {
            "infoFiltered":"",
            "processing": "<img src='~/Content/images/loadingNew.gif' />"
        },
        processing: true,
        "fnPreDrawCallback": function () {
            debugger;
        },
        "fnDrawCallback": function () {
            debugger;

        },

        "ajax":
         {
             "url": Helper.baseUrl() + "Search/LoadData",
             "type": "POST",
             "datatype": "json",
             "data": function (d) {
                 d.searchParams = searchFilters();
             },
         },

         
        "columns":      
        [
           {
               "data": "RequestNo",              
               
           } //and so on
           
        ],
    });

Am I missing anything?

Paulus

Are you using a separate JS file or your script is included in the ASP.NET file?

Are you using ASP.NET routing?

allan

The HTML you are using in language.processing looks okay to me (assuming that is the correct URL of course).

We'd really need a link to the page to be able to see why it isn't working.

Allan

SKC

@Paulus I'm using the MVC architecture. Hence I have separate directory for all my .js files.

Paulus

@SKC Then the framework will not process JS file and resolve the URL in the

<img src='~/Content/images/loadingNew.gif' />

You can either add a hidden input and set the value to that URL and retrieve the value in the JS

<input type="hidden" id="someObject" value='<%= Url.Content("~/Content/images/loadingNew.gif") %>' /> 

or add say someObject in your JS file and

var someObject= someObject || {};

"language": {     
           "processing": someObject.ImageUrl
},

then define parameters that can be resolved in the view file.

$(document).ready(function () {
   someObject.ImageUrl = '<%= Url.Content("~/Content/images/loadingNew.gif") %>';
}