0

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

  • Please do not keep adding Drupal 8 in the title. There is already an 8 tag on the question. – Neograph734 Jan 3 '17 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? – Manuel Rodriguez Jan 3 '17 at 10:40
  • 1
    Stack exchange already appends the version number to the page title: 8 - Call AJAX callback on page load - Drupal Answers – Neograph734 Jan 3 '17 at 10:41
  • sound and clear! – Manuel Rodriguez Jan 3 '17 at 10:42
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.

  • @ManuelRodriguez I have updated the documentation to a Drupal 8 link, but not much has changed between 7 and 8. – Neograph734 Jan 3 '17 at 10:10
  • 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... ) – Manuel Rodriguez Jan 3 '17 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. – Neograph734 Jan 3 '17 at 14:56
  • oh Neograph734 thanks, i was totally obfuscate with the AJAX logic I couldn't see the simplest part :D – Manuel Rodriguez Jan 3 '17 at 17:33
1

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.

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.