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

The only numbers that can be typed using Typescript are odd numbers

I am looking for a way to create a type in Typescript that can check if a value is an odd number. I have searched for solutions, but all I find are hardcoded options like odds: 1 | 3 | 5 | 7 | 9. Is there a dynamic approach to achieve this using only Types ...

What is the best way to make JavaScript display the strings in an array as bullet points on different lines?

We were assigned a task in our computer science class to analyze and extend a piece of code provided to us. Here is the given code snippet: <!DOCTYPE html> <html> <head> <title>Example Website</title> </head> <body& ...

An array is not just a mere collection of elements

I have an object that resembles an array var items = [ { started_time: 2017-05-04T12:46:39.439Z, word: 'bottle', questionId: '161013bd-00cc-4ad1-8f98-1a8384e202c8' }, { started_time: 2017-05-04T12:47:26.130Z, word: &apo ...

Setting a callback function as a prop for react-paginate in TypeScript: A step-by-step guide

When using react-paginate, there is a prop called onPageChange with the following type: onPageChange?(selectedItem: { selected: number }): void; After implementing it like this: const onPageChange = (selected): void => { console.log(selected); } ...

What is the best way to deduct a variable's previous value from the final value, ensuring that the total value does not surpass a specific limit?

For instance: let num = 20; const sub = 6; const add = 10; num = num - sub; num = num + add; if (num > 20){ num = 20; } console.log("Only 6 was actually added to var num before reaching its maximum value"); Is there a way to adjust the console log ...

Utilize the Google Maps API to align an SVG symbol with the direction of an aircraft's

I have been struggling to update the rotation of the Google Maps API SVG aircraft symbol to display the correct heading as it moves. Although it initially loads with the correct heading, I can't seem to figure out how to dynamically update it. I' ...

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user. Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the ...

Is it possible to integrate Google Analytics with Next.js version 13?

Is there anyone who has successfully integrated Google Analytics with NextJS 13? I tried following the steps outlined in this thread: How to implement Google Analytics with NextJS 13?, but despite doing everything as instructed, I am not seeing any data o ...

Issues with POST data not being received by MVC 4 APIController

Although this issue has been addressed numerous times, I am still unable to pinpoint the error! Here is a straightforward JS script that sends data back to the ApiController. function WebCall(url,parameterObject, callBackFunction) { this.callbackfunction ...

How can an app in Ionic detect when the notification area is opened?

Can we determine if the notification area on an Android device has been accessed while the Ionic app is active in the foreground? ...

Error: WebView element type is not valid. A valid string was expected

Here is my basic React code : import React from "react"; import { Text, StyleSheet,View } from "react-native"; import { WebView } from 'react-native'; const App = () => { return( <WebView source={{ ...

Changing the string "2012-04-10T15:57:51.013" into a Date object using JavaScript

Is there a way to transform the format "2012-04-10T15:57:51.013" into a Date javascript object using either Jquery or plain Javascript? ...

Tips on reversing a numeric value with scientific notation in nodeJS

Exploring the optimal method to reverse an integer (positive and negative) in NodeJS 12 without the need to convert the number to a string. This solution should also accommodate numbers written in scientific notation such as 1e+10, which represents 10000 ...

Exploring the possibilities of maximizing, minimizing, resizing, and creating a responsive design in dialog boxes using jQuery UI JavaScript and

I'm trying to create a dialog with maximize, resize, and minimize buttons like those found in Windows OS. I want the dialog to be responsive and draggable as well. I've been using jQuery, jQuery UI, and extended dialog frameworks, but I haven&apo ...

Sort by user identifier

I'm having an issue trying to filter a list of posts and comments by userId. I've passed the userId params as postCreator and commentCreator, but something seems to be amiss. Can anyone help me identify what I might be doing wrong? // Defining ...

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

AngularJS promises factory resolves for all route paths

I am experiencing an issue with my app. There is a factory that I have created which calls the function prepareStorage in order to save all static variables from my restApi to the browser storage using ngStorage. The code looks like this: angular.module(& ...

Create a prototype class in NuxtJS Vue

What is the correct way to set a class to prototype in Vue NuxtJS? I have created a plugin Here is my nuxt.config.js file: plugins: [ { src: "~/plugins/global.js" }, ], The global.js file contains: import Vue from "vue"; import CustomStore from "dev ...

The integration of Material-UI Autocomplete and TextField causes google autocomplete to activate

I am currently working on integrating the Autocomplete component into my project. However, I am facing an issue where the browser's autofill/autocomplete feature kicks in after some time. Is there a way to disable this behavior? ...

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...