Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code:

beforeSend:

success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the normal population of data in the table?

Answer №1

When working with dataTables, keep in mind that it utilizes the ajax success callback internally. Attempting to override this can lead to issues. However, dataTables offers its own dataSrc callback which is triggered within the success handler. This provides an opportunity to modify the response before any data is populated:

this.dtOptions = DTOptionsBuilder.newOptions()
  .withOption('ajax', {
     dataSrc: function(json) {
       //success!
       console.log(json);
       return json
     },
     type: 'POST',
     contentType: 'application/json',
     processData: false,
     ....

Check out the demo -> http://plnkr.co/edit/94EWyDanIawCJJgyagiy?p=preview

In the provided demo, you'll notice another option in the ajax complete callback:

ajax : {
  complete: function(jqXHR, textStatus) {
    console.log(jqXHR.responseText)
  } 
  ..
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fs claims that a file does not exist, however, it actually does

Currently, I am facing an issue with a file that contains the following code: const cmds = JSON.parse(fs.readFileSync('./cmds.json')); The file where this code is running is located in the same folder as `cmds.json`, but for some reason, it cann ...

Monitoring WooCommerce order submissions through AJAX

I'm exploring the world of Ajax for the first time. My goal is to submit an order tracking form and show the results using AJAX. I attempted to use Ajax to display the results within div track_result. The issue I'm facing is that the following ...

Using onChange input causes the component to re-render multiple times

As I delve into learning React, I've encountered some challenges. Despite thinking that I grasped the concept of controlled components, it appears that there's a misunderstanding on my end. The issue arises after an onChange event where I notice ...

Combining AngularJS with ng file upload and Sails JS for seamless file uploading

When I upload a file, I also need to send some additional information along with it. The instructions mention using the data parameter for this purpose, but I'm having trouble accessing it in my Sails controller action. Frontend: Upload.upload({ url ...

Testing nested mocked functions can be achieved by setting up the necessary mocks

How can I create tests for mocked functions within a mocked function? My goal is to verify that my publish mocked function is called only once. jest.mock('amqplib', () => ({ connect: jest.fn(() => Promise.resolve({ createChannel: jes ...

Combining two JSON objects with sailsjs-nodejs to create a single merged object

Hello everyone, I am a beginner with Sailsjs-Nodejs. Currently, I have two JSON Objects in my controller that I need to merge/join in order to create a third object to send as a response. The output when using res.send(obj1) is: [ { total_fare: "37 ...

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

A new game has been developed using html/javascript. Due to confidentiality reasons, the code cannot be fully shared. The game runs smoothly on most browsers except for IE, which poses a challenge. Compatibility with IE8 is essential, despite its limitati ...

Vue.js - experiencing issues with conditional styling not functioning as expected

Can someone help me with an issue I'm having? I've created a button with a heart symbol that is supposed to change color when clicked, but it's not working as expected. This is my current code: <template> <button v-bind: ...

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

I'm struggling to figure out how to change the icon of a toggled collapsible element. I have been reviewing their documentation but am having trouble making it work as intended. $('.collaps_roles_permission').collapsible({ accordion: tr ...

Exploring the power of async/await in conjunction with loops

My JavaScript code is designed to extract content from HTML pages and perform a crawling operation. However, the issue arises with asynchronous execution due to a request function. I attempted to utilize Promises and async & await to address this probl ...

The script from 'URL' was declined for execution due to its MIME type of 'text/html' which is non-executable, in addition to strict MIME type checking being enabled

I encountered an error stating "Refused to execute script from 'URL' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." The code that triggered this error is shown below. <!DOCTYPE htm ...

Leverage the power of Drupal 7's AJAX capabilities through program

Posted by X on this Drupal blog post Exploring the wonders of the Drupal 7 AJAX system, it seamlessly handles forms and links with finesse. However, one challenge I've encountered is calling it from JavaScript in a streamlined manner. Imagine creati ...

Looping through required fields in jQuery based on a CSS class

Is there a way to loop through required fields marked with <input class="required">? Currently, only the first input in the loop is being evaluated. How can I traverse the DOM using a loop to check all input boxes? Thank you for your help. While I ...

Preventing simultaneous AJAX requests with a single click

I am facing a challenge with handling multiple AJAX requests. Whenever a user clicks on a button, an AJAX request is triggered to enter a record into the database. However, if the user clicks on the button rapidly multiple times, it results in multiple sim ...

Guide on showcasing the values of all checkboxes in a div through ajax

I am currently facing an issue where I have a list of checkboxes fetched from a MySQL table. My goal is to pass all the values of checked checkboxes to a <div> using ajax. However, at the moment, only one checked value is being passed to the <div& ...

Guide on automatically inserting a colon (:) after every pair of characters in Angular

I am looking to automatically insert a colon (:) after every 2 characters in my input field: HTML <input nz-input type="text" appLimitInput="textAndNumbers" name="mac" formControlName="mac" (keydown.space)=&qu ...

Traverse through an array or object using recursive render functions in JavaScript

Here is an example of the issue I am currently trying to solve: https://codepen.io/wombsplitter/pen/KyWKod This is the structure of my array: [{ //obj 1 link: [{ //obj 2 link: [{ //obj 3 }] }] }] The ...

Is there a way to automatically populate an AngularJS input field?

Attempting to automate filling out a website using JavaScript. The script below: document.getElementsByClassName('form-control')[1].value = "MYNAME"; The input text changes, but upon clicking the submit button it displays as empty. Any as ...