2

I've been reading the whole day but I cannot find a complete example for a basic AJAX call on load page.

I followed this tutorial: and this example:

I was able to register the callback, controller and commands but the only way to trigger the ajax call is creating a link and is triggered on click event (as the example does)

<a class="use-ajax" href="/ajax/nojs/ajaxload">XXX</a>

I need to trigger that ajax call but when the page is loaded, is there any way?

Thanks

4
  • Please do not keep adding Drupal 8 in the title. There is already an 8 tag on the question. Jan 3, 2017 at 10:34
  • ops, sorry i'm a bit new to stack, in any case, is not better to make it more searchable on google? Jan 3, 2017 at 10:40
  • 1
    Stack exchange already appends the version number to the page title: 8 - Call AJAX callback on page load - Drupal Answers Jan 3, 2017 at 10:41
  • sound and clear! Jan 3, 2017 at 10:42

2 Answers 2

5

Thought I would share this as a slightly more complete solution, this would be your full javascript file:

(function ($, Drupal) {
  Drupal.behaviors.myModuleName = {
    attach: function (context, settings) {
      // I am doing a find() but you can do a once() or whatever you like :-)
      $('#element', context).find('.sub-element').each(function () {
        // Do your thing here
      });
    }
  };
})(jQuery, Drupal);

Remember that the context returned on ajax event is the element being replaced, and should match your '#element', if it is inside the element being replaced it is not going to fire.

If you put a watch on the $('#element', context).find... line in your browser inspector you will see the different contexts being fired.

4

Funny how those tutorials did not mention Drupal behaviors, which will trigger once the page is loaded. This is a good tutorial on them (Drupal 7, but same principles apply).

Basically all you should do is call your callback function from a behavior to get the same effect as jQuery's document ready callbacks.

Drupal.behaviors.myModule = {
  attach: function (context, settings) {
    // Call callback here.
  }
};

And while you are at it, I recommend reading up on behaviors as they help to streamline your javascripts and keeps them in closed scopes.

4
  • @ManuelRodriguez I have updated the documentation to a Drupal 8 link, but not much has changed between 7 and 8. Jan 3, 2017 at 10:10
  • 2
    I have implemented this and indeed it acts as onload, so that's something achieved, thanks! but the second question is, how do i "call" my ajax callback? I have no idea how to do that, neither I found anything on internet. My link that triggers the ajax load looks like: <a class="use-ajax" href="/ajax/nojs/xxxload">Remove Image</a> But I don't know how to get same behaviour just on the on load (and i don't want to make a click onload to that link... ) Jan 3, 2017 at 14:52
  • 1
    That is basic jquery (not specific to Drupal, hence of topic here), but you probably want to call the url with jQuery.ajax() or the short hand jQuery.get. Jan 3, 2017 at 14:56
  • oh Neograph734 thanks, i was totally obfuscate with the AJAX logic I couldn't see the simplest part :D Jan 3, 2017 at 17:33

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.