Please enable JS

Programmatically trigger AJAX and return HTML from menu

January 27/Brian Young/Drupal 7Software

I recently needed to update a panel pane via ajax after a user made changes in a modal form.
After figuring out how to programmactically update a panel pane, I needed to replace a pane's HTML with the results from a AJAX call.

Outside of Drupal, making AJAX calls to return a small set of HTML is pretty simple. I wanted to avoid side-stepping Drupal's AJAX Framework.

Objectives

  • Learn how to make AJAX calls programmatically.
    A hidden button and triggering "click" via JS wasn't ideal.
  • Return a propper Drupal AJAX Command, not just HTML.
  • Figure out how not to return an entire rendered page in the AJAX results.

Example code

trigger_ajax.module

The major part here is the use of ajax_deliver for the "delivery callback".
This will return the AJAX command results instead of a rendered page.

  1. /**
  2.  * Implements hook_menu().
  3.  */
  4. function trigger_ajax_menu() {
  5. return array(
  6. 'custom-ajax/%' => array(
  7. 'page callback' => 'trigger_ajax_update',
  8. 'page arguments' => array(1),
  9. 'access callback' => TRUE,
  10. 'delivery callback' => 'ajax_deliver',
  11. 'theme callback' => 'ajax_base_page_theme',
  12. 'type' => MENU_CALLBACK,
  13. ),
  14. );
  15. }
  16.  
  17. function trigger_ajax_update($uid) {
  18. $account = user_load($uid);
  19. $content = '<div id="target-element-update">Hello ' . $account->name . '!</div>';
  20. return array(
  21. '#type' => 'ajax',
  22. '#commands' => array(
  23. ajax_command_replace('#target-element-update', $content)
  24. ),
  25. );
  26. }

trigger_ajax.js

Drupal's AJAX requires binding to page element so I'm just using "body".

  1. (function ($) {
  2. $(function () {
  3. /**
  4.   * Create a placeholder function that we can execute to trigger an AJAX call.
  5.   */
  6. Drupal.ajax.prototype.triggerAjax = function (uid) {
  7. // Leave if we're already executing.
  8. if (this.ajaxing) {
  9. return false;
  10. }
  11.  
  12. // Append the User ID to the end of the URL to complete our menu entry.
  13. this.options.url += uid;
  14.  
  15. $.ajax(this.options);
  16. };
  17.  
  18. Drupal.ajax['triggerObjectPlaceholder'] = new Drupal.ajax(
  19. null,
  20. $(document.body),
  21. {
  22. url: '/custom-ajax/',
  23. event: 'onload',
  24. keypress: false,
  25. prevent: false
  26. });
  27.  
  28. // Some event
  29. // ...
  30. // Trigger the manual ajax trigger
  31. var userId = 1;
  32. Drupal.ajax['triggerObjectPlaceholder'].triggerAjax(userId);
  33. });
  34. })(jQuery);


RELATED POSTS


Comments/ 0


LEAVE A COMMENT

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
But why?

My random thoughts and documentation on the various hardware and software projects that occupy my day-to-day. My only hope is that other people can benefit from my notes.

Recent posts
Categories