0

I want to create a loading code while the ajax call is not yet complete, AND enable my jquery code after calling the ajax of drupal form. The ajax I'm referring to is the "Add new field/Add more" of unlimited field. I don't have a custom module for that. I'm just using what drupal already has.

This is the code that triggers the Ajax of the form:

$('input[name="field_collection_add_more"]').mousedown();

I can't use the $(document).ajaxComplete(function(){}); nor ajaxStart function of the jquery because I only want my functions to run on that specific ajax call for that specific field.

How can I use the beforeSend: and success: when the ajax add new field is running?

Thank you in advance for the help!

  • maybe you can use $(document).ajaxComplete(function(){}) combined with an if statement that checks if a specific div exists or something. – No Sssweat Oct 27 '15 at 20:54
0
/**
 * Special Effects AJAX framework command.
 */
Drupal.ajax.prototype.commands.nameOfCommand =  function(ajax, response, status) {
  alert("Hello I'm Maged Eladawy...")  ; // this will be executed after the ajax call
}

More details

0

There is a beforeSubmit function available on the button that fires the ajax call. The beforeSubmit function will fire before the ajax.

Drupal.behaviors.exampleModule = {
  attach: function (context, settings) {

    // ELEMENT_ID must not include the #
    Drupal.ajax['ELEMENT_ID'].options.beforeSubmit = function(form_values, element_settings, options) {
      // code here
    };
  }
};

If you console.log your Drupal.ajax['ELEMENT_ID'].options you'll see there is a success function and a complete function that you can also hook into.

Try to keep everything in a Drupal behavior if possible.

0

You mentioned that you can't use $(document).ajaxComplete(function(){}); nor ajaxStart. However, I think this would be the right approach but, intead selecting the document you have to pass in your unique selector for desired field.

$('input[name="field_collection_add_more"]', context).ajaxStart(function () {
  // ...
});
$('input[name="field_collection_add_more"]', context).ajaxSuccess(function () {
  // ...
});

See Fade views content on views ajax pager action in Drupal 7 for a real example.

-1

You can read that article Understanding JavaScript behaviors in Drupal. And if you want your code run after ajax call back, you need write code same example

Drupal.behaviors.exampleModule = {
  attach: function (context, settings) {
    // Code here.
  }
};

Here are some examples:

  • CTools calls it after a modal has been loaded.
  • Media calls it after the media browser has been loaded.
  • Panels calls it after in-placeediting has been completed.
  • Views calls it after loading a new page that uses AJAX.
  • Views Load More calls it after loading the next chunk of items.
  • JavaScript from custom modules may call Drupal.attachBehaviors() when they add or change parts of the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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