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

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.

  • var $existingData - shouldn't it be var existingData? Why $? Looks like you are asking for conflict with jQuery.
    – Mołot
    Commented Aug 20, 2014 at 13:30
  • Usually you want to have some kind of a condition there. Either an event, or an if/else. Perhaps if you could tell us what you're trying to achieve we can help you find a way. As it stands I'm just not sure what exactly you're trying to achieve with that value.
    – Beebee
    Commented Aug 20, 2014 at 13:30
  • @Mołot variable naming doesn't interfere with jQuery even when it starts with a $. I always do it, makes it easier to code when you're doing drupal/php :)
    – Beebee
    Commented Aug 20, 2014 at 13:31
  • @Beebee usually it does not conflict, but things can get funny when you have one space where it shouldn't be, or when JS compressor comes to play.
    – Mołot
    Commented Aug 20, 2014 at 13:34
  • In my 'actual code' I'm using var existingData (without $), but I figured, for clarity here, I'd add the '$'...it works either way, so that shouldn't be a concern.
    – Feature
    Commented Aug 20, 2014 at 13:37

1 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.

  • not sure I follow exactly. the entire form is not being created by me, but by linkit.module (which I can't alter/hack). So I need to hook in with my code only after the linkit.module form is done loading it's ajax call
    – Feature
    Commented Aug 28, 2014 at 14:01
  • I edited my response to suggest 2 ways to execute the code after the specific ajax call. One using Drupal Form API and another using only jQuery.
    – gerzenstl
    Commented Aug 28, 2014 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.