2

I created custom module to make simple Ajax call. This module looks like this:

<?php

/**
 * Implements hook_menu().
 */
function module_ajax_contact_menu() {
  $items['node/get/ajax/%'] = array(
    'page callback' => 'module_ajax_contact_ajax_get_ajax', // Render HTML.
    'page arguments' => array(3),
    'type' => MENU_CALLBACK,
    'access arguments' => array('access content'),
    'delivery callback' => 'module_ajax_contact_ajax_callback',
  );
  return $items;
}

function module_ajax_contact_ajax_get_ajax($nid) {
  $node = node_load($nid);
  return node_view($node, 'default');
}

function module_ajax_contact_ajax_callback($page_callback_result) {
  // Only render content
  $content = drupal_render($page_callback_result);

  // Add CSS and JS files, add some markup
  $html = '<html><head><title></title>' . drupal_get_css() . drupal_get_js() . '</head><body class="jquery-ajax-load">' . $content . '<script type="text/javascript" src="/sites/all/themes/pub/js/map.js"></body></html>';
  print $html;

  // Perform end-of-request tasks.
  drupal_page_footer();
}

After that I make call in JS like this:

function module_ajax_contact_ajax_load(n) {
    $("#popup-contact").load("/node/get/ajax/" + n, function () {
        $("#popup-contact").foundation('open');
    });
}

$('.contact-link').click(function (e) {
       e.preventDefault();
        module_ajax_contact_ajax_load(10);
    });

So, after content is loaded from node id 10 (in this case) Reveal from Foundation opens.

I want to add Drupal's default throbber during the loading of this node.

Any idea how I could do it?

4

The throbber has a class of .ajax-progress-throbber.

Before the Ajax call, add an element with that class to wherever you want it in the DOM, and simply remove it again when the Ajax request completes. Drupal doesn't have any helper methods for this, just use jQuery.

  • 1
    isn't progress: { type: 'throbber'} in Drupal.behaviors.* should show throbber? I tried but throbber not showing. ref:drupal.org/docs/7/api/javascript-api/… – kiranking Sep 27 '17 at 9:48
  • I think that the throbber element should be like: <div class="ajax-progress"><div class="throbber"></div></div> – Maria Ioannidou Apr 5 '18 at 10:09
0

Comment by @maria loannidou worked for me:

<div class="ajax-progress"><div class="throbber"></div></div>

0

There are some methods provided in the ajax library of core

docroot/core/misc/ajax.es6.js

to allow you to add the loading message/icon to the your page.

Drupal.theme.ajaxProgressThrobber

Drupal.theme.ajaxProgressIndicatorFullscreen

Drupal.theme.ajaxProgressMessage

Simply call them like

$('body').after(Drupal.theme.ajaxProgressIndicatorFullscreen())

before you start an ajax request. and remove it by

$("body").remove(".ajax-progress-fullscreen")

once the request is finished.

Also make sure you add core/drupal/ajax to your library dependencies.

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.