ajax.reload() - reload data endpoint refresh

ajax.reload() - reload data endpoint refresh

latinunitlatinunit Posts: 73Questions: 12Answers: 0

I've added a new feature to my datatables that allows me to re-query the data loaded, hence, I need to re-request/re-reload/re-recall the url ajax endpoint

1 - is my original request when dt loaded
2 - I am serializing an input form where the user can request new data to my endpoint and these will be appended to url as params

My question is, how do I make a new request to the endpoint?

created=03%2F03%2F2023&rm=2453&st=Banking&status=2&it=Private%20clients

var urlEndpoint = "/sch/subscriptionAPI_v1b.jssp?" + queryFilter() + "&operatorJurisdiction=" + operatorJurisdiction + "&length=" + limit;
/** datatables **/     
var table= $('#recipients').DataTable({   
        serverSide: false,
        processing:true,
        ajax: {
                url: urlEndpoint,
                type: 'POST',
                headers: {},
                 error: function (request, status, error) {
                      alert(request.responseText);
                  }                          
               }, 

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,241Questions: 26Answers: 4,758

    Not sure I understand the requirement, Maybe ajax.url().load() is what you are looking for to change the URL If you want to pass parameters then ajax.data as function might be what you are looking for. see this example.

    Kevin

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

    Hi @kthorngren @allan

    so what I am trying to do seems to be doable with ajax.data, however, my question is now, I can provide the params in either an array, or as url params.

    url params

    created=03%2F03%2F2023&rm=2453&st=Banking&status=2&it=Private%20clients
    

    or

    array

    [
      {
        "name": "created",
        "value": "02/28/2023"
      },
      {
        "name": "rm",
        "value": "2021"
      },
      {
        "name": "st",
        "value": "Banking"
      },
      {
        "name": "status",
        "value": "3"
      },
      {
        "name": "it",
        "value": "Private clients"
      }
    ]
    

    How the two above are generated? Well I basically grab the form input values using serialize() which generates the param string, or using serializeArray() which generates the second array such as below.

    var formValues = $('#subscriptions :input:not(:hidden)').serializeArray();  
    

    I need a way of now adding either format as params to my request.

    I added the data function with a fixed value and it worked. but the structure of my array is different, how do I submit the JSON array that I am generating through the function? or is there a specific structure the JSON needs to be so that I can create a new structure that I can pass it to the function without hardcoding the keys one by one.

                    data: function (d) {
                        d.myKey = 'myValue';
                    },    
    
  • kthorngrenkthorngren Posts: 20,241Questions: 26Answers: 4,758
    Answer ✓

    The answer depends on how you want to parse the data in your server script. You can send the data using any of these options:

        data: function (d) {
          d.form_data_serialize = $("form").serialize();
          d.form_data_array = $("form").serializeArray();
          d.form_data_json = JSON.stringify($("form").serializeArray());
        }
    

    Use the Network inspector with this test case to view the payload sent for each option:
    https://live.datatables.net/qoliyehi/5/edit

    Use the one that you can parse in your server script.

    Kevin

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

    Thanks K,

    I ended up keeping it simple and just using the standard approach which worked fine.

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

    Hi @kthorngren

    I have a quick question, when I trigger to reload data but there isnt data to reload I get an error.

    You can see my query modal in action here https://screenpal.com/watch/c0eb2TV4gfX

    The issue

    If I add some criteria that does not return any data from my endpoint and I reload the table then i get an error, I can see in the console below, if I then change the criteria and get positive results then is all good.

    The question is, how do I handle this error when there is no data to be loaded into datatables to prevent the error from happening, something like, if no data to load then show alert.

    jquery.dataTables.js:7734 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
        at jquery.dataTables.js:7734:29
        at Object.callback [as success] (jquery.dataTables.js:3952:4)
        at fire (jquery.js:3500:31)
        at Object.fireWith [as resolveWith] (jquery.js:3630:7)
        at done (jquery.js:9822:14)
        at XMLHttpRequest.<anonymous> (jquery.js:10083:9)
    
  • kthorngrenkthorngren Posts: 20,241Questions: 26Answers: 4,758

    If I add some criteria that does not return any data from my endpoint and I reload the table then i get an error,

    What does the Ajax response contain? It probably should contain an empty array, for example [].

    Kevin

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

    Yeah I get an empty object, and the loading spinner just keeps loading indefinately.


    and I also get the error on the console.

Sign In or Register to comment.