summaryrefslogtreecommitdiffstatshomepage
path: root/core/misc/ajax.js
diff options
context:
space:
mode:
Diffstat (limited to 'core/misc/ajax.js')
-rw-r--r--core/misc/ajax.js622
1 files changed, 622 insertions, 0 deletions
diff --git a/core/misc/ajax.js b/core/misc/ajax.js
new file mode 100644
index 00000000000..92eefea952d
--- /dev/null
+++ b/core/misc/ajax.js
@@ -0,0 +1,622 @@
+(function ($) {
+
+/**
+ * Provides Ajax page updating via jQuery $.ajax (Asynchronous JavaScript and XML).
+ *
+ * Ajax is a method of making a request via JavaScript while viewing an HTML
+ * page. The request returns an array of commands encoded in JSON, which is
+ * then executed to make any changes that are necessary to the page.
+ *
+ * Drupal uses this file to enhance form elements with #ajax['path'] and
+ * #ajax['wrapper'] properties. If set, this file will automatically be included
+ * to provide Ajax capabilities.
+ */
+
+Drupal.ajax = Drupal.ajax || {};
+
+/**
+ * Attaches the Ajax behavior to each Ajax form element.
+ */
+Drupal.behaviors.AJAX = {
+ attach: function (context, settings) {
+ // Load all Ajax behaviors specified in the settings.
+ for (var base in settings.ajax) {
+ if (!$('#' + base + '.ajax-processed').length) {
+ var element_settings = settings.ajax[base];
+
+ if (typeof element_settings.selector == 'undefined') {
+ element_settings.selector = '#' + base;
+ }
+ $(element_settings.selector).each(function () {
+ element_settings.element = this;
+ Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
+ });
+
+ $('#' + base).addClass('ajax-processed');
+ }
+ }
+
+ // Bind Ajax behaviors to all items showing the class.
+ $('.use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function () {
+ var element_settings = {};
+ // Clicked links look better with the throbber than the progress bar.
+ element_settings.progress = { 'type': 'throbber' };
+
+ // For anchor tags, these will go to the target of the anchor rather
+ // than the usual location.
+ if ($(this).attr('href')) {
+ element_settings.url = $(this).attr('href');
+ element_settings.event = 'click';
+ }
+ var base = $(this).attr('id');
+ Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
+ });
+
+ // This class means to submit the form to the action using Ajax.
+ $('.use-ajax-submit:not(.ajax-processed)').addClass('ajax-processed').each(function () {
+ var element_settings = {};
+
+ // Ajax submits specified in this manner automatically submit to the
+ // normal form action.
+ element_settings.url = $(this.form).attr('action');
+ // Form submit button clicks need to tell the form what was clicked so
+ // it gets passed in the POST request.
+ element_settings.setClick = true;
+ // Form buttons use the 'click' event rather than mousedown.
+ element_settings.event = 'click';
+ // Clicked form buttons look better with the throbber than the progress bar.
+ element_settings.progress = { 'type': 'throbber' };
+
+ var base = $(this).attr('id');
+ Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
+ });
+ }
+};
+
+/**
+ * Ajax object.
+ *
+ * All Ajax objects on a page are accessible through the global Drupal.ajax
+ * object and are keyed by the submit button's ID. You can access them from
+ * your module's JavaScript file to override properties or functions.
+ *
+ * For example, if your Ajax enabled button has the ID 'edit-submit', you can
+ * redefine the function that is called to insert the new content like this
+ * (inside a Drupal.behaviors attach block):
+ * @code
+ * Drupal.behaviors.myCustomAJAXStuff = {
+ * attach: function (context, settings) {
+ * Drupal.ajax['edit-submit'].commands.insert = function (ajax, response, status) {
+ * new_content = $(response.data);
+ * $('#my-wrapper').append(new_content);
+ * alert('New content was appended to #my-wrapper');
+ * }
+ * }
+ * };
+ * @endcode
+ */
+Drupal.ajax = function (base, element, element_settings) {
+ var defaults = {
+ url: 'system/ajax',
+ event: 'mousedown',
+ keypress: true,
+ selector: '#' + base,
+ effect: 'none',
+ speed: 'none',
+ method: 'replaceWith',
+ progress: {
+ type: 'throbber',
+ message: Drupal.t('Please wait...')
+ },
+ submit: {
+ 'js': true
+ }
+ };
+
+ $.extend(this, defaults, element_settings);
+
+ this.element = element;
+ this.element_settings = element_settings;
+
+ // Replacing 'nojs' with 'ajax' in the URL allows for an easy method to let
+ // the server detect when it needs to degrade gracefully.
+ // There are five scenarios to check for:
+ // 1. /nojs/
+ // 2. /nojs$ - The end of a URL string.
+ // 3. /nojs? - Followed by a query (with clean URLs enabled).
+ // E.g.: path/nojs?destination=foobar
+ // 4. /nojs& - Followed by a query (without clean URLs enabled).
+ // E.g.: ?q=path/nojs&destination=foobar
+ // 5. /nojs# - Followed by a fragment.
+ // E.g.: path/nojs#myfragment
+ this.url = element_settings.url.replace(/\/nojs(\/|$|\?|&|#)/g, '/ajax$1');
+ this.wrapper = '#' + element_settings.wrapper;
+
+ // If there isn't a form, jQuery.ajax() will be used instead, allowing us to
+ // bind Ajax to links as well.
+ if (this.element.form) {
+ this.form = $(this.element.form);
+ }
+
+ // Set the options for the ajaxSubmit function.
+ // The 'this' variable will not persist inside of the options object.
+ var ajax = this;
+ ajax.options = {
+ url: ajax.url,
+ data: ajax.submit,
+ beforeSerialize: function (element_settings, options) {
+ return ajax.beforeSerialize(element_settings, options);
+ },
+ beforeSubmit: function (form_values, element_settings, options) {
+ ajax.ajaxing = true;
+ return ajax.beforeSubmit(form_values, element_settings, options);
+ },
+ beforeSend: function (xmlhttprequest, options) {
+ ajax.ajaxing = true;
+ return ajax.beforeSend(xmlhttprequest, options);
+ },
+ success: function (response, status) {
+ // Sanity check for browser support (object expected).
+ // When using iFrame uploads, responses must be returned as a string.
+ if (typeof response == 'string') {
+ response = $.parseJSON(response);
+ }
+ return ajax.success(response, status);
+ },
+ complete: function (response, status) {
+ ajax.ajaxing = false;
+ if (status == 'error' || status == 'parsererror') {
+ return ajax.error(response, ajax.url);
+ }
+ },
+ dataType: 'json',
+ type: 'POST'
+ };
+
+ // Bind the ajaxSubmit function to the element event.
+ $(ajax.element).bind(element_settings.event, function (event) {
+ return ajax.eventResponse(this, event);
+ });
+
+ // If necessary, enable keyboard submission so that Ajax behaviors
+ // can be triggered through keyboard input as well as e.g. a mousedown
+ // action.
+ if (element_settings.keypress) {
+ $(ajax.element).keypress(function (event) {
+ return ajax.keypressResponse(this, event);
+ });
+ }
+
+ // If necessary, prevent the browser default action of an additional event.
+ // For example, prevent the browser default action of a click, even if the
+ // AJAX behavior binds to mousedown.
+ if (element_settings.prevent) {
+ $(ajax.element).bind(element_settings.prevent, false);
+ }
+};
+
+/**
+ * Handle a key press.
+ *
+ * The Ajax object will, if instructed, bind to a key press response. This
+ * will test to see if the key press is valid to trigger this event and
+ * if it is, trigger it for us and prevent other keypresses from triggering.
+ * In this case we're handling RETURN and SPACEBAR keypresses (event codes 13
+ * and 32. RETURN is often used to submit a form when in a textfield, and
+ * SPACE is often used to activate an element without submitting.
+ */
+Drupal.ajax.prototype.keypressResponse = function (element, event) {
+ // Create a synonym for this to reduce code confusion.
+ var ajax = this;
+
+ // Detect enter key and space bar and allow the standard response for them,
+ // except for form elements of type 'text' and 'textarea', where the
+ // spacebar activation causes inappropriate activation if #ajax['keypress'] is
+ // TRUE. On a text-type widget a space should always be a space.
+ if (event.which == 13 || (event.which == 32 && element.type != 'text' && element.type != 'textarea')) {
+ $(ajax.element_settings.element).trigger(ajax.element_settings.event);
+ return false;
+ }
+};
+
+/**
+ * Handle an event that triggers an Ajax response.
+ *
+ * When an event that triggers an Ajax response happens, this method will
+ * perform the actual Ajax call. It is bound to the event using
+ * bind() in the constructor, and it uses the options specified on the
+ * ajax object.
+ */
+Drupal.ajax.prototype.eventResponse = function (element, event) {
+ // Create a synonym for this to reduce code confusion.
+ var ajax = this;
+
+ // Do not perform another ajax command if one is already in progress.
+ if (ajax.ajaxing) {
+ return false;
+ }
+
+ try {
+ if (ajax.form) {
+ // If setClick is set, we must set this to ensure that the button's
+ // value is passed.
+ if (ajax.setClick) {
+ // Mark the clicked button. 'form.clk' is a special variable for
+ // ajaxSubmit that tells the system which element got clicked to
+ // trigger the submit. Without it there would be no 'op' or
+ // equivalent.
+ element.form.clk = element;
+ }
+
+ ajax.form.ajaxSubmit(ajax.options);
+ }
+ else {
+ ajax.beforeSerialize(ajax.element, ajax.options);
+ $.ajax(ajax.options);
+ }
+ }
+ catch (e) {
+ // Unset the ajax.ajaxing flag here because it won't be unset during
+ // the complete response.
+ ajax.ajaxing = false;
+ alert("An error occurred while attempting to process " + ajax.options.url + ": " + e.message);
+ }
+
+ // For radio/checkbox, allow the default event. On IE, this means letting
+ // it actually check the box.
+ if (typeof element.type != 'undefined' && (element.type == 'checkbox' || element.type == 'radio')) {
+ return true;
+ }
+ else {
+ return false;
+ }
+
+};
+
+/**
+ * Handler for the form serialization.
+ *
+ * Runs before the beforeSend() handler (see below), and unlike that one, runs
+ * before field data is collected.
+ */
+Drupal.ajax.prototype.beforeSerialize = function (element, options) {
+ // Allow detaching behaviors to update field values before collecting them.
+ // This is only needed when field values are added to the POST data, so only
+ // when there is a form such that this.form.ajaxSubmit() is used instead of
+ // $.ajax(). When there is no form and $.ajax() is used, beforeSerialize()
+ // isn't called, but don't rely on that: explicitly check this.form.
+ if (this.form) {
+ var settings = this.settings || Drupal.settings;
+ Drupal.detachBehaviors(this.form, settings, 'serialize');
+ }
+
+ // Prevent duplicate HTML ids in the returned markup.
+ // @see drupal_html_id()
+ options.data['ajax_html_ids[]'] = [];
+ $('[id]').each(function () {
+ options.data['ajax_html_ids[]'].push(this.id);
+ });
+
+ // Allow Drupal to return new JavaScript and CSS files to load without
+ // returning the ones already loaded.
+ // @see ajax_base_page_theme()
+ // @see drupal_get_css()
+ // @see drupal_get_js()
+ options.data['ajax_page_state[theme]'] = Drupal.settings.ajaxPageState.theme;
+ options.data['ajax_page_state[theme_token]'] = Drupal.settings.ajaxPageState.theme_token;
+ for (var key in Drupal.settings.ajaxPageState.css) {
+ options.data['ajax_page_state[css][' + key + ']'] = 1;
+ }
+ for (var key in Drupal.settings.ajaxPageState.js) {
+ options.data['ajax_page_state[js][' + key + ']'] = 1;
+ }
+};
+
+/**
+ * Modify form values prior to form submission.
+ */
+Drupal.ajax.prototype.beforeSubmit = function (form_values, element, options) {
+ // This function is left empty to make it simple to override for modules
+ // that wish to add functionality here.
+}
+
+/**
+ * Prepare the Ajax request before it is sent.
+ */
+Drupal.ajax.prototype.beforeSend = function (xmlhttprequest, options) {
+ // For forms without file inputs, the jQuery Form plugin serializes the form
+ // values, and then calls jQuery's $.ajax() function, which invokes this
+ // handler. In this circumstance, options.extraData is never used. For forms
+ // with file inputs, the jQuery Form plugin uses the browser's normal form
+ // submission mechanism, but captures the response in a hidden IFRAME. In this
+ // circumstance, it calls this handler first, and then appends hidden fields
+ // to the form to submit the values in options.extraData. There is no simple
+ // way to know which submission mechanism will be used, so we add to extraData
+ // regardless, and allow it to be ignored in the former case.
+ if (this.form) {
+ options.extraData = options.extraData || {};
+
+ // Let the server know when the IFRAME submission mechanism is used. The
+ // server can use this information to wrap the JSON response in a TEXTAREA,
+ // as per http://jquery.malsup.com/form/#file-upload.
+ options.extraData.ajax_iframe_upload = '1';
+
+ // The triggering element is about to be disabled (see below), but if it
+ // contains a value (e.g., a checkbox, textfield, select, etc.), ensure that
+ // value is included in the submission. As per above, submissions that use
+ // $.ajax() are already serialized prior to the element being disabled, so
+ // this is only needed for IFRAME submissions.
+ var v = $.fieldValue(this.element);
+ if (v !== null) {
+ options.extraData[this.element.name] = v;
+ }
+ }
+
+ // Disable the element that received the change to prevent user interface
+ // interaction while the Ajax request is in progress. ajax.ajaxing prevents
+ // the element from triggering a new request, but does not prevent the user
+ // from changing its value.
+ $(this.element).addClass('progress-disabled').attr('disabled', true);
+
+ // Insert progressbar or throbber.
+ if (this.progress.type == 'bar') {
+ var progressBar = new Drupal.progressBar('ajax-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
+ if (this.progress.message) {
+ progressBar.setProgress(-1, this.progress.message);
+ }
+ if (this.progress.url) {
+ progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
+ }
+ this.progress.element = $(progressBar.element).addClass('ajax-progress ajax-progress-bar');
+ this.progress.object = progressBar;
+ $(this.element).after(this.progress.element);
+ }
+ else if (this.progress.type == 'throbber') {
+ this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+ if (this.progress.message) {
+ $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');
+ }
+ $(this.element).after(this.progress.element);
+ }
+};
+
+/**
+ * Handler for the form redirection completion.
+ */
+Drupal.ajax.prototype.success = function (response, status) {
+ // Remove the progress element.
+ if (this.progress.element) {
+ $(this.progress.element).remove();
+ }
+ if (this.progress.object) {
+ this.progress.object.stopMonitoring();
+ }
+ $(this.element).removeClass('progress-disabled').removeAttr('disabled');
+
+ Drupal.freezeHeight();
+
+ for (var i in response) {
+ if (response[i]['command'] && this.commands[response[i]['command']]) {
+ this.commands[response[i]['command']](this, response[i], status);
+ }
+ }
+
+ // Reattach behaviors, if they were detached in beforeSerialize(). The
+ // attachBehaviors() called on the new content from processing the response
+ // commands is not sufficient, because behaviors from the entire form need
+ // to be reattached.
+ if (this.form) {
+ var settings = this.settings || Drupal.settings;
+ Drupal.attachBehaviors(this.form, settings);
+ }
+
+ Drupal.unfreezeHeight();
+
+ // Remove any response-specific settings so they don't get used on the next
+ // call by mistake.
+ this.settings = null;
+};
+
+/**
+ * Build an effect object which tells us how to apply the effect when adding new HTML.
+ */
+Drupal.ajax.prototype.getEffect = function (response) {
+ var type = response.effect || this.effect;
+ var speed = response.speed || this.speed;
+
+ var effect = {};
+ if (type == 'none') {
+ effect.showEffect = 'show';
+ effect.hideEffect = 'hide';
+ effect.showSpeed = '';
+ }
+ else if (type == 'fade') {
+ effect.showEffect = 'fadeIn';
+ effect.hideEffect = 'fadeOut';
+ effect.showSpeed = speed;
+ }
+ else {
+ effect.showEffect = type + 'Toggle';
+ effect.hideEffect = type + 'Toggle';
+ effect.showSpeed = speed;
+ }
+
+ return effect;
+};
+
+/**
+ * Handler for the form redirection error.
+ */
+Drupal.ajax.prototype.error = function (response, uri) {
+ alert(Drupal.ajaxError(response, uri));
+ // Remove the progress element.
+ if (this.progress.element) {
+ $(this.progress.element).remove();
+ }
+ if (this.progress.object) {
+ this.progress.object.stopMonitoring();
+ }
+ // Undo hide.
+ $(this.wrapper).show();
+ // Re-enable the element.
+ $(this.element).removeClass('progress-disabled').removeAttr('disabled');
+ // Reattach behaviors, if they were detached in beforeSerialize().
+ if (this.form) {
+ var settings = response.settings || this.settings || Drupal.settings;
+ Drupal.attachBehaviors(this.form, settings);
+ }
+};
+
+/**
+ * Provide a series of commands that the server can request the client perform.
+ */
+Drupal.ajax.prototype.commands = {
+ /**
+ * Command to insert new content into the DOM.
+ */
+ insert: function (ajax, response, status) {
+ // Get information from the response. If it is not there, default to
+ // our presets.
+ var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
+ var method = response.method || ajax.method;
+ var effect = ajax.getEffect(response);
+
+ // We don't know what response.data contains: it might be a string of text
+ // without HTML, so don't rely on jQuery correctly iterpreting
+ // $(response.data) as new HTML rather than a CSS selector. Also, if
+ // response.data contains top-level text nodes, they get lost with either
+ // $(response.data) or $('<div></div>').replaceWith(response.data).
+ var new_content_wrapped = $('<div></div>').html(response.data);
+ var new_content = new_content_wrapped.contents();
+
+ // For legacy reasons, the effects processing code assumes that new_content
+ // consists of a single top-level element. Also, it has not been
+ // sufficiently tested whether attachBehaviors() can be successfully called
+ // with a context object that includes top-level text nodes. However, to
+ // give developers full control of the HTML appearing in the page, and to
+ // enable Ajax content to be inserted in places where DIV elements are not
+ // allowed (e.g., within TABLE, TR, and SPAN parents), we check if the new
+ // content satisfies the requirement of a single top-level element, and
+ // only use the container DIV created above when it doesn't. For more
+ // information, please see http://drupal.org/node/736066.
+ if (new_content.length != 1 || new_content.get(0).nodeType != 1) {
+ new_content = new_content_wrapped;
+ }
+
+ // If removing content from the wrapper, detach behaviors first.
+ switch (method) {
+ case 'html':
+ case 'replaceWith':
+ case 'replaceAll':
+ case 'empty':
+ case 'remove':
+ var settings = response.settings || ajax.settings || Drupal.settings;
+ Drupal.detachBehaviors(wrapper, settings);
+ }
+
+ // Add the new content to the page.
+ wrapper[method](new_content);
+
+ // Immediately hide the new content if we're using any effects.
+ if (effect.showEffect != 'show') {
+ new_content.hide();
+ }
+
+ // Determine which effect to use and what content will receive the
+ // effect, then show the new content.
+ if ($('.ajax-new-content', new_content).length > 0) {
+ $('.ajax-new-content', new_content).hide();
+ new_content.show();
+ $('.ajax-new-content', new_content)[effect.showEffect](effect.showSpeed);
+ }
+ else if (effect.showEffect != 'show') {
+ new_content[effect.showEffect](effect.showSpeed);
+ }
+
+ // Attach all JavaScript behaviors to the new content, if it was successfully
+ // added to the page, this if statement allows #ajax['wrapper'] to be
+ // optional.
+ if (new_content.parents('html').length > 0) {
+ // Apply any settings from the returned JSON if available.
+ var settings = response.settings || ajax.settings || Drupal.settings;
+ Drupal.attachBehaviors(new_content, settings);
+ }
+ },
+
+ /**
+ * Command to remove a chunk from the page.
+ */
+ remove: function (ajax, response, status) {
+ var settings = response.settings || ajax.settings || Drupal.settings;
+ Drupal.detachBehaviors($(response.selector), settings);
+ $(response.selector).remove();
+ },
+
+ /**
+ * Command to mark a chunk changed.
+ */
+ changed: function (ajax, response, status) {
+ if (!$(response.selector).hasClass('ajax-changed')) {
+ $(response.selector).addClass('ajax-changed');
+ if (response.asterisk) {
+ $(response.selector).find(response.asterisk).append(' <abbr class="ajax-changed" title="' + Drupal.t('Changed') + '">*</abbr> ');
+ }
+ }
+ },
+
+ /**
+ * Command to provide an alert.
+ */
+ alert: function (ajax, response, status) {
+ alert(response.text, response.title);
+ },
+
+ /**
+ * Command to provide the jQuery css() function.
+ */
+ css: function (ajax, response, status) {
+ $(response.selector).css(response.argument);
+ },
+
+ /**
+ * Command to set the settings that will be used for other commands in this response.
+ */
+ settings: function (ajax, response, status) {
+ if (response.merge) {
+ $.extend(true, Drupal.settings, response.settings);
+ }
+ else {
+ ajax.settings = response.settings;
+ }
+ },
+
+ /**
+ * Command to attach data using jQuery's data API.
+ */
+ data: function (ajax, response, status) {
+ $(response.selector).data(response.name, response.value);
+ },
+
+ /**
+ * Command to apply a jQuery method.
+ */
+ invoke: function (ajax, response, status) {
+ var $element = $(response.selector);
+ $element[response.method].apply($element, response.arguments);
+ },
+
+ /**
+ * Command to restripe a table.
+ */
+ restripe: function (ajax, response, status) {
+ // :even and :odd are reversed because jQuery counts from 0 and
+ // we count from 1, so we're out of sync.
+ // Match immediate children of the parent element to allow nesting.
+ $('> tbody > tr:visible, > tr:visible', $(response.selector))
+ .removeClass('odd even')
+ .filter(':even').addClass('odd').end()
+ .filter(':odd').addClass('even');
+ }
+};
+
+})(jQuery);
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-30 13:40:14 +0000