How do I get a data value after all AJAX calls are complete?

Question

I'm modifying the content of the modal window that pops up when using Linkit module in a WYSIWYG.

This modal uses AJAX so I have to use Drupal.behaviors for the first time. My code is structured basically like this:

(function ($) {
  Drupal.behaviors.mymoduleLinkit = {
    attach: function (context, settings) {
      $('#linkit-dashbaord-ajax-wrapper').once('linkitSelects', function() { 
        //do cool stuff
      });
    }
  }
})(jQuery)

Now, I need to get the existing value of an input box here, so I simply do this:

var $existingData = $('.form-item-linkit-rel input').val();

Then try to return that value, but it's always undefined. I think it's because this page seems to do a few AJAX calls in a row and I am trying to get the value before it is actually loaded into that field and available.

To ensure that waiting until AJAX is loaded is actually the problem I wrapped my code in a timeout() in order to wait for the loading to finish. This isn't a good solution, but it confirms everything is working once things are loaded. It looked like this:

   //wait so data is loaded via ajax
  setTimeout(function() {
    //set our select list to any pre-existing values
    var existingData = $('.form-item-linkit-rel input').val();
    if(existingData != ""){
      var $parts = existingData.split('_');
      $('.form-item-linkit-rel .size-select').val($parts[0]);
      $('.form-item-linkit-rel .type-select').val($parts[1]);
    };
  }, 500);

So the question is: Instead of using a timeout, how can I fire this code only after the initial ajax calls are done?

You can view the full code here including the timeout stuff but please don't get distracted by all the other stuff going on (or my poor coding)...Everything else in here works and I'm really just concerned with getting the data in the question above.

Answer 1

Seems that you are building the elements of the form some parts using ajax and some parts using what you show on JsFiddle.

To run commands after success of an Ajax callback you could use he Ajax framework and Ajax framework commands API documentation. Here is a brief example. You will the hook_form_alter to alter the linkit_dashboard_form and add the commands. This alternative is more accurate to execute the commands after a specific ajax call but would require many changes adding hooks and custom functions.

Another alternative is to use .ajaxComplete() and check if the ajax call retrieves the linkit form elements. Example:

$(document).ajaxComplete(function(event,request, setting) {
 // Add same check you use on your setTimeout to make sure that "form-item-linkit-rel" input exists. 
 // You could also use some of the values of the "setting" param of ajaxComplete() function to use additional checks.
});

Note: In case that the problem is caused by something declared inside of Drupal.behaviors.mymoduleLinkit, try to debug your Js code with Chrome/Firefox DevTools. Add some breakpoints to find out what is causing the issue.