1 // https://civicrm.org/licensing
3 * @see https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
4 * @see https://docs.civicrm.org/dev/en/latest/framework/ajax/
6 (function($, CRM
, _
, undefined) {
9 * @param string|object query
10 * @param string mode - optionally specify "front" or "back"
13 CRM
.url = function (path
, query
, mode
) {
14 if (typeof path
=== 'object') {
19 CRM
.console('error', 'Error: CRM.url called before initialization');
22 mode
= CRM
.config
&& CRM
.config
.isFrontend
? 'front' : 'back';
25 var url
, frag
, hash
= '';
26 if (path
.indexOf('#') > -1) {
27 hash
= '#' + path
.split('#')[1];
28 path
= path
.split('#')[0];
30 frag
= path
.split('?');
31 // Remove basepage as it can be changed on some CMS eg. WordPress frontend.
32 frag
[0] = frag
[0].replace('civicrm/', '/');
33 // Encode url path only if slashes in placeholder were also encoded
34 if (tplURL
[mode
].indexOf('/crmajax-placeholder-url-path') >= 0) {
35 url
= tplURL
[mode
].replace('/crmajax-placeholder-url-path', frag
[0]);
37 url
= tplURL
[mode
].replace('%2Fcrmajax-placeholder-url-path', encodeURIComponent(frag
[0]));
40 if (_
.isEmpty(query
)) {
41 url
= url
.replace(/[?&]civicrm-placeholder-url-query=1/, '');
43 url
= url
.replace('civicrm-placeholder-url-query=1', typeof query
=== 'string' ? query
: $.param(query
));
46 url
+= (url
.indexOf('?') < 0 ? '?' : '&') + frag
[1];
51 $.fn
.crmURL = function () {
52 return this.each(function() {
54 this.href
= CRM
.url(this.href
);
59 // result is an array, but in js, an array is also an object
60 // Assign all the metadata properties to it, mirroring the results arrayObject in php
61 function arrayObject(data
) {
62 var result
= data
.values
|| [];
63 if (_
.isArray(result
)) {
65 _
.assign(result
, data
);
70 // https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
71 CRM
.api4 = function(entity
, action
, params
, index
) {
72 return new Promise(function(resolve
, reject
) {
73 if (typeof entity
=== 'string') {
74 $.post(CRM
.url('civicrm/ajax/api4/' + entity
+ '/' + action
), {
75 params
: JSON
.stringify(params
),
78 .done(function (data
) {
79 resolve(arrayObject(data
));
81 .fail(function (data
) {
82 reject(data
.responseJSON
);
85 $.post(CRM
.url('civicrm/ajax/api4'), {
86 calls
: JSON
.stringify(entity
)
88 .done(function(data
) {
89 _
.each(data
, function(item
, key
) {
90 data
[key
] = arrayObject(item
);
94 .fail(function (data
) {
95 reject(data
.responseJSON
);
103 * @link https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
105 CRM
.api3 = function(entity
, action
, params
, status
) {
106 if (typeof(entity
) === 'string') {
109 action
: action
.toLowerCase(),
110 json
: JSON
.stringify(params
|| {})
116 json
: JSON
.stringify(entity
)
121 url
: CRM
.url('civicrm/ajax/rest'),
124 type
: params
.action
.indexOf('get') === 0 ? 'GET' : 'POST'
127 // Default status messages
128 if (status
=== true) {
129 status
= {success
: params
.action
=== 'delete' ? ts('Removed') : ts('Saved')};
130 if (params
.action
.indexOf('get') === 0) {
131 status
.start
= ts('Loading...');
132 status
.success
= null;
135 var messages
= status
=== true ? {} : status
;
136 CRM
.status(status
, ajax
);
145 CRM
.api = function(entity
, action
, params
, options
) {
149 success: function(result
, settings
) {
152 error: function(result
, settings
) {
153 $().crmError(result
.error_message
, ts('Error'));
156 callBack: function(result
, settings
) {
157 if (result
.is_error
== 1) {
158 return settings
.error
.call(this, result
, settings
);
160 return settings
.success
.call(this, result
, settings
);
162 ajaxURL
: 'civicrm/ajax/rest'
164 action
= action
.toLowerCase();
165 // Default success handler
171 settings
.success = function() {
172 CRM
.status(ts('Saved'));
177 settings
.success = function() {
178 CRM
.status(ts('Removed'));
185 json
: JSON
.stringify(params
)
187 // Pass copy of settings into closure to preserve its value during multiple requests
190 url
: stg
.ajaxURL
.indexOf('http') === 0 ? stg
.ajaxURL
: CRM
.url(stg
.ajaxURL
),
193 type
: action
.indexOf('get') < 0 ? 'POST' : 'GET',
194 success: function(result
) {
195 stg
.callBack
.call(stg
.context
, result
, stg
);
198 })($.extend({}, settings
, options
));
201 $.widget('civi.crmSnippet', {
208 _originalContent
: null,
210 isOriginalUrl: function() {
214 newUrl
= this._formatUrl(this.options
.url
),
215 oldUrl
= this._formatUrl(this._originalUrl
);
217 if (newUrl
.split('?')[0] !== oldUrl
.split('?')[0]) {
221 $.each((newUrl
.split('?')[1] || '').split('&'), function(k
, v
) {
222 var arg
= v
.split('=');
223 args
[arg
[0]] = arg
[1];
225 $.each((oldUrl
.split('?')[1] || '').split('&'), function(k
, v
) {
226 var arg
= v
.split('=');
227 if (args
[arg
[0]] !== undefined && arg
[1] !== args
[arg
[0]]) {
233 resetUrl: function() {
234 this.options
.url
= this._originalUrl
;
236 _create: function() {
237 this.element
.addClass('crm-ajax-container');
238 if (!this.element
.is('.crm-container *')) {
239 this.element
.addClass('crm-container');
241 this._handleOrderLinks();
242 // Set default if not supplied
243 this.options
.url
= this.options
.url
|| document
.location
.href
;
244 this._originalUrl
= this.options
.url
;
246 _onFailure: function(data
, status
) {
247 var msg
, title
= ts('Network Error');
248 if (this.options
.block
) this.element
.unblock();
249 this.element
.trigger('crmAjaxFail', data
);
252 title
= ts('Access Denied');
253 msg
= ts('Ensure you are still logged in and have permission to access this feature.');
256 msg
= ts('Unable to reach the server. Please refresh this page in your browser and try again.');
258 CRM
.alert(msg
, title
, 'error');
260 _onError: function(data
) {
261 this.element
.attr('data-unsaved-changes', 'false').trigger('crmAjaxError', data
);
262 if (this.options
.crmForm
&& this.options
.crmForm
.autoClose
&& this.element
.data('uiDialog')) {
263 this.element
.dialog('close');
266 _formatUrl: function(url
, snippetType
) {
268 url
= url
.split('#')[0];
269 // Add snippet argument to url
271 if (url
.search(/[&?]snippet=/) < 0) {
272 url
+= (url
.indexOf('?') < 0 ? '?' : '&') + 'snippet=' + snippetType
;
274 url
= url
.replace(/snippet=[^&]*/, 'snippet=' + snippetType
);
276 // See Civi\Angular\AngularLoader
277 if (snippetType
=== 'json' && CRM
.angular
) {
278 url
+= '&crmAngularModules=' + CRM
.angular
.modules
.join();
283 // Hack to deal with civicrm legacy sort functionality
284 _handleOrderLinks: function() {
286 $('a.crm-weight-arrow', that
.element
).click(function(e
) {
287 if (that
.options
.block
) that
.element
.block();
288 $.getJSON(that
._formatUrl(this.href
, 'json')).done(function() {
291 e
.stopImmediatePropagation();
295 _ajax: function(url
) {
296 if (!this.options
.post
|| !this.isOriginalUrl()) {
297 return $.getJSON(url
);
302 data
: this.options
.post
305 refresh: function() {
307 hash
= this.options
.url
.split('#')[1];
308 url
= this._formatUrl(this.options
.url
, 'json');
309 $(this.element
).data('urlHash', hash
);
310 if (this.options
.crmForm
) $('form', this.element
).ajaxFormUnbind();
311 if (this.options
.block
) this.element
.block();
312 this._ajax(url
).then(function(data
) {
313 if (data
.status
=== 'redirect') {
314 that
.options
.url
= data
.userContext
;
315 return that
.refresh();
317 if (that
.options
.block
) that
.element
.unblock();
318 if (!$.isPlainObject(data
)) {
319 that
._onFailure(data
);
322 if (data
.status
=== 'error') {
327 that
.element
.trigger('crmUnload').trigger('crmBeforeLoad', data
);
328 that
._beforeRemovingContent();
329 that
.element
.html(data
.content
);
330 that
._handleOrderLinks();
331 that
.element
.trigger('crmLoad', data
);
332 if (that
.options
.crmForm
) that
.element
.trigger('crmFormLoad', data
);
333 // This is only needed by forms that load via ajax but submit without ajax, e.g. configure contribution page tabs
334 // TODO: remove this when those forms have been converted to use ajax submit
335 if (data
.status
=== 'form_error' && $.isPlainObject(data
.errors
)) {
336 that
.element
.trigger('crmFormError', data
);
337 $.each(data
.errors
, function(formElement
, msg
) {
338 $('[name="'+formElement
+'"]', that
.element
).crmError(msg
);
341 }, function(data
, msg
, status
) {
342 that
._onFailure(data
, status
);
345 // Perform any cleanup needed before removing/replacing content
346 _beforeRemovingContent: function() {
348 // Save original content to be restored if widget is destroyed
349 if (this._originalContent
=== null) {
350 $('.blockUI', this.element
).remove();
351 this._originalContent
= this.element
.contents().detach();
353 if (this.options
.crmForm
) $('form', this.element
).ajaxFormUnbind();
355 _destroy: function() {
356 this.element
.removeClass('crm-ajax-container').trigger('crmUnload');
357 this._beforeRemovingContent();
358 if (this._originalContent
!== null) {
359 this.element
.empty().append(this._originalContent
);
365 exclude
= '[href^=#], [href^=javascript], [onclick], .no-popup, .cancel';
367 CRM
.loadPage = function(url
, options
) {
369 target
: '#crm-ajax-dialog-' + (dialogCount
++),
370 dialog
: (options
&& options
.target
) ? false : {}
372 if (options
) $.extend(true, settings
, options
);
375 if (settings
.dialog
) {
376 settings
.dialog
= CRM
.utils
.adjustDialogDefaults(settings
.dialog
);
377 $('<div id="' + settings
.target
.substring(1) + '"></div>')
378 .dialog(settings
.dialog
)
379 .parent().find('.ui-dialog-titlebar')
380 .append($('<a class="crm-dialog-titlebar-print ui-dialog-titlebar-close" title="'+ts('Print window')+'" target="_blank" style="right:3.8em;"/>')
381 .button({icons
: {primary
: 'fa-print'}, text
: false}));
383 // Add handlers to new or existing dialog
384 if ($(settings
.target
).data('uiDialog')) {
386 .on('dialogclose', function() {
387 if (settings
.dialog
&& $(this).attr('data-unsaved-changes') !== 'true') {
388 $(this).crmSnippet('destroy').dialog('destroy').remove();
391 .on('crmLoad', function(e
, data
) {
393 if (e
.target
=== $(settings
.target
)[0] && data
&& !settings
.dialog
.title
&& data
.title
) {
394 $(this).dialog('option', 'title', data
.title
);
397 $(this).parent().find('a.crm-dialog-titlebar-print').attr('href', $(this).data('civiCrmSnippet')._formatUrl($(this).crmSnippet('option', 'url'), '2'));
400 $(settings
.target
).crmSnippet(settings
).crmSnippet('refresh');
401 return $(settings
.target
);
403 CRM
.loadForm = function(url
, options
) {
404 var formErrors
= [], settings
= {
409 refreshAction
: ['next_new', 'submit_savenext', 'upload_new'],
410 cancelButton
: '.cancel',
411 openInline
: 'a.open-inline, a.button, a.action-item, a.open-inline-noreturn',
412 onCancel: function(event
) {}
415 // Move options that belong to crmForm. Others will be passed through to crmSnippet
416 if (options
) $.each(options
, function(key
, value
) {
417 if (typeof(settings
.crmForm
[key
]) !== 'undefined') {
418 settings
.crmForm
[key
] = value
;
421 settings
[key
] = value
;
425 var widget
= CRM
.loadPage(url
, settings
).off('.crmForm');
427 // CRM-14353 - Warn of unsaved changes for all forms except those which have opted out
428 function cancelAction() {
429 var dirty
= CRM
.utils
.initialValueChanged($('form:not([data-warn-changes=false])', widget
));
430 widget
.attr('data-unsaved-changes', dirty
? 'true' : 'false');
432 var id
= widget
.attr('id') + '-unsaved-alert',
433 title
= widget
.dialog('option', 'title'),
434 alert
= CRM
.alert('<p>' + ts('%1 has not been saved.', {1: title
}) + '</p><p><a href="#" id="' + id
+ '">' + ts('Restore') + '</a></p>', ts('Unsaved Changes'), 'alert unsaved-dialog', {expires
: 60000});
435 $('#' + id
).button({icons
: {primary
: 'fa-undo'}}).click(function(e
) {
436 widget
.attr('data-unsaved-changes', 'false').dialog('open');
442 if (widget
.data('uiDialog')) widget
.on('dialogbeforeclose', function(e
) {
443 // CRM-14353 - Warn unsaved changes if user clicks close button or presses "esc"
444 if (e
.originalEvent
) {
449 widget
.on('crmFormLoad.crmForm', function(event
, data
) {
450 var $el
= $(this).attr('data-unsaved-changes', 'false'),
451 settings
= $el
.crmSnippet('option', 'crmForm');
452 if (settings
.cancelButton
) $(settings
.cancelButton
, this).click(function(e
) {
454 var returnVal
= settings
.onCancel
.call($el
, e
);
455 if (returnVal
!== false) {
456 $el
.trigger('crmFormCancel', e
);
457 if ($el
.data('uiDialog') && settings
.autoClose
) {
461 else if (!settings
.autoClose
) {
462 $el
.crmSnippet('resetUrl').crmSnippet('refresh');
466 if (settings
.validate
) {
467 $("form", this).crmValidate();
469 $("form:not('[data-no-ajax-submit=true]')", this).ajaxForm($.extend({
470 url
: data
.url
.replace(/reset=1[&]?/, ''),
472 success: function(response
) {
473 if (response
.content
=== undefined) {
474 $el
.trigger('crmFormSuccess', response
);
475 // Reset form for e.g. "save and new"
476 if (response
.userContext
&& (response
.status
=== 'redirect' || (settings
.refreshAction
&& $.inArray(response
.buttonName
, settings
.refreshAction
) >= 0))) {
477 // Force reset of original url
478 $el
.data('civiCrmSnippet')._originalUrl
= response
.userContext
;
479 $el
.crmSnippet('resetUrl').crmSnippet('refresh');
481 // Close if we are on the original url or the action was "delete" (in which case returning to view may be inappropriate)
482 else if ($el
.data('uiDialog') && (settings
.autoClose
|| response
.action
=== 8)) {
485 else if (settings
.autoClose
=== false) {
486 $el
.crmSnippet('resetUrl').crmSnippet('refresh');
490 if ($el
.crmSnippet('option', 'block')) $el
.unblock();
491 response
.url
= data
.url
;
492 $el
.html(response
.content
).trigger('crmLoad', response
).trigger('crmFormLoad', response
);
493 if (response
.status
=== 'form_error') {
495 $el
.trigger('crmFormError', response
);
496 $.each(response
.errors
|| [], function(formElement
, msg
) {
497 formErrors
.push($('[name="'+formElement
+'"]', $el
).crmError(msg
));
502 beforeSubmit: function(submission
) {
503 $.each(formErrors
, function() {
504 if (this && this.close
) this.close();
506 if ($el
.crmSnippet('option', 'block')) $el
.block();
507 $el
.trigger('crmFormSubmit', submission
);
509 }, settings
.ajaxForm
));
510 if (settings
.openInline
) {
511 settings
.autoClose
= $el
.crmSnippet('isOriginalUrl');
512 $(this).off('.openInline').on('click.openInline', settings
.openInline
, function(e
) {
513 if ($(this).is(exclude
+ ', .crm-popup, [target=crm-popup]')) {
516 if ($(this).hasClass('open-inline-noreturn')) {
517 // Force reset of original url
518 $el
.data('civiCrmSnippet')._originalUrl
= $(this).attr('href');
520 $el
.crmSnippet('option', 'url', $(this).attr('href')).crmSnippet('refresh');
524 if ($el
.data('uiDialog')) {
525 // Show form buttons as part of the dialog
526 var buttonContainers
= '.crm-submit-buttons, .action-link',
529 $(buttonContainers
, $el
).find('.crm-form-submit, .crm-form-xbutton, a.button, button').each(function() {
531 label
= $el
.is('input') ? $el
.attr('value') : $el
.text(),
532 identifier
= $el
.attr('name') || $el
.attr('href');
533 $el
.attr('tabindex', '-1');
534 if (!identifier
|| identifier
=== '#' || $.inArray(identifier
, added
) < 0) {
535 var $icon
= $el
.find('.icon, .crm-i'),
536 button
= {'data-identifier': identifier
, text
: label
, click: function() {
540 button
.icons
= {primary
: $icon
.attr('class')};
542 var action
= $el
.attr('crm-icon') || ($el
.hasClass('cancel') ? 'fa-times' : 'fa-check');
543 button
.icons
= {primary
: action
};
545 buttons
.push(button
);
546 added
.push(identifier
);
548 // display:none causes the form to not submit when pressing "enter"
549 $el
.parents(buttonContainers
).css({height
: 0, padding
: 0, margin
: 0, overflow
: 'hidden'}).attr('aria-hidden', 'true');
551 $el
.dialog('option', 'buttons', buttons
);
553 // Allow a button to prevent ajax submit
554 $('input[data-no-ajax-submit=true], button[data-no-ajax-submit=true]').click(function() {
555 $(this).closest('form').ajaxFormUnbind();
557 // For convenience, focus the first field
558 $('input[type=text], textarea, select', this).filter(':visible').first().not('.dateplugin').focus();
563 * Handler for jQuery click event e.g. $('a').click(CRM.popup);
565 CRM
.popup = function(e
) {
566 var $el
= $(this).first(),
567 url
= $el
.attr('href'),
568 popup
= $el
.data('popup-type') === 'page' ? CRM
.loadPage
: CRM
.loadForm
,
569 settings
= $el
.data('popup-settings') || {},
571 settings
.dialog
= settings
.dialog
|| {};
572 if (e
.isDefaultPrevented() || !CRM
.config
.ajaxPopupsEnabled
|| !url
|| $el
.is(exclude
+ ', .open-inline, .open-inline-noreturn')) {
575 // Sized based on css class
576 if ($el
.hasClass('small-popup')) {
577 settings
.dialog
.width
= 400;
578 settings
.dialog
.height
= 300;
580 else if ($el
.hasClass('medium-popup')) {
581 settings
.dialog
.width
= settings
.dialog
.height
= '50%';
583 var dialog
= popup(url
, settings
);
584 // Trigger events from the dialog on the original link element
585 $el
.trigger('crmPopupOpen', [dialog
]);
586 // Listen for success events and buffer them so we only trigger once
587 dialog
.on('crmFormSuccess.crmPopup crmPopupFormSuccess.crmPopup', function(e
, data
) {
590 dialog
.on('dialogclose.crmPopup', function(e
, data
) {
592 $el
.trigger('crmPopupFormSuccess', [dialog
, formData
]);
594 $el
.trigger('crmPopupClose', [dialog
, data
]);
599 * An event callback for CRM.popup or a standalone function to refresh the content around a given element
600 * @param e {event|selector}
602 CRM
.refreshParent = function(e
) {
603 // Use e.target if input smells like an event, otherwise assume it's a jQuery selector
604 var $el
= (e
.stopPropagation
&& e
.target
) ? $(e
.target
) : $(e
),
605 $table
= $el
.closest('.dataTable');
606 // Call native refresh method on ajax datatables
607 if ($table
.length
&& $.fn
.DataTable
.fnIsDataTable($table
[0]) && $table
.dataTable().fnSettings().sAjaxSource
) {
608 // Refresh ALL datatables - needed for contact relationship tab
609 $.each($.fn
.dataTable
.fnTables(), function() {
610 if ($(this).dataTable().fnSettings().sAjaxSource
) $(this).unblock().dataTable().fnDraw();
613 // Otherwise refresh the nearest crmSnippet
615 $el
.closest('.crm-ajax-container, #crm-main-content-wrapper').crmSnippet().crmSnippet('refresh');
621 .on('click', 'a.crm-popup, a[target=crm-popup]', CRM
.popup
)
622 // Close unsaved dialog messages
623 .on('dialogopen', function(e
) {
624 $('.alert.unsaved-dialog .ui-notify-cross', '#crm-notification-container').click();
626 // Destroy old unsaved dialog
627 .on('dialogcreate', function(e
) {
628 $('.ui-dialog-content.crm-ajax-container:hidden[data-unsaved-changes=true]').crmSnippet('destroy').dialog('destroy').remove();
630 // Ensure wysiwyg content is updated prior to ajax submit
631 .on('form-pre-serialize', function(e
) {
632 $('.crm-wysiwyg-enabled', e
.target
).each(function() {
633 CRM
.wysiwyg
.updateElement(this);
636 // Auto-resize dialogs when loading content
637 .on('crmLoad dialogopen', 'div.ui-dialog.ui-resizable.crm-container', function(e
) {
640 $dialog
= $wrapper
.children('.ui-dialog-content');
641 // small delay to allow contents to render
642 window
.setTimeout(function() {
643 var currentHeight
= $wrapper
.outerHeight(),
644 padding
= currentHeight
- $dialog
.height(),
645 newHeight
= $dialog
.prop('scrollHeight') + padding
,
646 menuHeight
= $('#civicrm-menu').outerHeight();
647 if ($('body').hasClass('crm-menubar-below-cms-menu')) {
648 menuHeight
+= $('#civicrm-menu').offset().top
;
650 var maxHeight
= $(window
).height() - menuHeight
;
651 newHeight
= newHeight
> maxHeight
? maxHeight
: newHeight
;
652 if (newHeight
> (currentHeight
+ 15)) {
653 $dialog
.dialog('option', {
654 position
: {my
: 'center', at
: 'center center+' + (menuHeight
/ 2), of: window
},