Handle ajax empty response {} table.ajax.reload();

Handle ajax empty response {} table.ajax.reload();

latinunitlatinunit Posts: 73Questions: 12Answers: 0
edited March 2023 in Free community support

I am reloading table data using a modal query form which sends a new request to my ajax endpoint,

Problem: if my new criteria does not produce any data, I get an error in the console and the loading spinner stays spinning forever.

How do I handle an empty object on data tables? to display an alert or activate a modal i.e.

if empty response then {
  $('#notificationModal').show //error message window
or alert('No Data');
{

The response is an empty object {}

 var urlEndpoint = "/sch/subscriptionAPI_v59.jssp" ;
/** datatables **/     
var table= $('#recipients').DataTable({   
        serverSide: false,
        processing:true,
        ajax: {
                url: urlEndpoint,
                data: function (d) {
                let session = sessionStorage.getItem("query")
                    d.cr = session ? $('#created').val() : new Date().getFullYear()+"-03-01";
                    d.rm = $('#rm').val();
                    d.st = $('#superTeam').val();
                    d.ss = $('#status').val();
                    d.it = $('#invType').val();
                    d.oj = operatorJurisdiction;
                },            
                type: 'POST',
                headers: {},
                 error: function (request, status, error) {
                      alert(request.responseText);
                  }                          
               },            

This question has an accepted answers - jump to answer

Answers

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

    Update

    I think I solevd it, by sending an error response from my API if the data length is 0 but the loading spinner (processing flag) stays spinning. how do I turn it off? in this scenario

    (p

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023

    Since Datatalbes expects the ajax data to be in the data object by default and the row data to be in an array you should return this:

    {
      data: []
    }
    

    Kevin

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0
    edited March 2023

    Thanks K, that seems to have done the trick.

     ajax: {
                    url: urlEndpoint,
                    data: function (d) {
                    let session = sessionStorage.getItem("query")
                        d.cr = session ? $('#created').val() : new Date().getFullYear()+"-03-01";
                        d.rm = $('#rm').val();
                        d.st = $('#superTeam').val();
                        d.ss = $('#status').val();
                        d.it = $('#invType').val();
                        d.oj = operatorJurisdiction;
                    },            
                    type: 'POST',
                    headers: {},
                     error: function (request, status, error) {
                          alert(request.responseText);
                      }                          
                   },      
    

    where in the ajax can I check for data.length on ajax response so that I can pop up and alert?

    maybe something like the following

    success: function  (request, status, error) {
       if request data length is > 0 then 
        $("#result").html("Successful");
    },
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    You can use the xhr event or the ajax.dataSrc option.

    Kevin

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

    Thanks Kevin,

    I found the solution with your suggestion :)

        table.on( 'xhr', function () {
        var json = table.ajax.json();
          if(json.data.length == 0) {
            alert('No data found');
          }
        });
    
Sign In or Register to comment.