Detecting end of ajax call from an external function

Question

I am working in a project that has created plugins in JavaScript for making some ajax calls. I am not allowed to change the code in the plugins.

There is a button class in the plugin, which when clicked performs an ajax and changes a field in the database and changes the text color of the clicked button based on the boolean value returned. There is a dynamic list of similar buttons (number of buttons is not fixed) and each when clicked makes changes to the database in the same way and gets assigned a state based on the boolean returned.

Now, when any of these buttons is clicked, I need to check the number of buttons in each state and output the result to the console.

I am detecting the button click with $(document).on('click', 'button.plugin-button', function() {}) but, it is not giving me correct results, as the ajax is being executed from inside the plugin code and my button click handler is being executed before the ajax.

Is there any way I can detect the execution of the AJAX and when it is completed, call my click handler and display the correct result?

If the plugin does not provide any API or any callback, the solution may be far more complex than you might expect (assuming there effectively is a valid one). Other than that, is there any chance you can provide the current behavior of your code and, eventually, some documentation of the plugin? out of the box, the question is quite vague and it's hard to tell whether the solution is simple or complex. I'm assuming the plugin does provide a callback or something like that though, otherwise that would be quite strange. — briosheje, Aug 27 '18 at 10:18
If you can use Proxy object you can proxify window.xmlhttprequest constructor and subscribe for it onreadystatechange event. This is quite not clean but can help you. — Drag13, Aug 27 '18 at 10:20
#ataiy.. They have customized the flexigrid.js plugin and extended its functions with custom ones.. — Debopam Parua, Aug 27 '18 at 10:21
#briosheje.. No, they have not provided any callbacks.. And there is no clear documentation for the plugin either.. They have taken the flexigrid.js plugin and extended it by adding dynamic elements and their own event handling functions which I can consume to perform the button clicks and other events.. But I dont have a call back for this click event. — Debopam Parua, Aug 27 '18 at 10:23

score 5 · Answer 1 · answered Aug 27 '18 at 10:35

You can use ajaxComplete

$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
  xhr.responseText);
}});

or callback function like

function checkButtonsState(){}
function makeAjaxRequest(para1, para2, callback){
/*onsuccess or on error complete*/
callback();
}
/*call it like*/
makeAjaxRequest("para1","para2", checkButtonsState)

Detecting end of ajax call from an external function

1 Answers1