js/crm.ajax.js

   1 // https://civicrm.org/licensing
   2 /**
   3  * @see https://wiki.civicrm.org/confluence/display/CRMDOC/AJAX+Interface
   4  * @see https://wiki.civicrm.org/confluence/display/CRMDOC/Ajax+Pages+and+Forms
   5  */
   6 (function($, CRM, undefined) {
   7   /**
   8    * @param string path
   9    * @param string|object query
  10    * @param string mode - optionally specify "front" or "back"
  11    */
  12   var tplURL;
  13   CRM.url = function (path, query, mode) {
  14     if (typeof path === 'object') {
  15       tplURL = path;
  16       return path;
  17     }
  18     if (!tplURL) {
  19       CRM.console('error', 'Error: CRM.url called before initialization');
  20     }
  21     if (!mode) {
  22       mode = CRM.config && CRM.config.isFrontend ? 'front' : 'back';
  23     }
  24     query = query || '';
  25     var frag = path.split('?');
  26     var url = tplURL[mode].replace("civicrm-placeholder-url-path", frag[0]);
  27
  28     if (!query) {
  29       url = url.replace(/[?&]civicrm-placeholder-url-query=1/, '');
  30     }
  31     else {
  32       url = url.replace("civicrm-placeholder-url-query=1", typeof query === 'string' ? query : $.param(query));
  33     }
  34     if (frag[1]) {
  35       url += (url.indexOf('?') < 0 ? '?' : '&') + frag[1];
  36     }
  37     return url;
  38   };
  39
  40   $.fn.crmURL = function () {
  41     return this.each(function() {
  42       if (this.href) {
  43         this.href = CRM.url(this.href);
  44       }
  45     });
  46   };
  47
  48   /**
  49    * AJAX api
  50    * @link http://wiki.civicrm.org/confluence/display/CRMDOC/AJAX+Interface#AJAXInterface-CRM.api3
  51    */
  52   CRM.api3 = function(entity, action, params, status) {
  53     if (typeof(entity) === 'string') {
  54       params = {
  55         entity: entity,
  56         action: action.toLowerCase(),
  57         json: JSON.stringify(params || {})
  58       };
  59     } else {
  60       params = {
  61         entity: 'api3',
  62         action: 'call',
  63         json: JSON.stringify(entity)
  64       };
  65       status = action;
  66     }
  67     var ajax = $.ajax({
  68       url: CRM.url('civicrm/ajax/rest'),
  69       dataType: 'json',
  70       data: params,
  71       type: params.action.indexOf('get') === 0 ? 'GET' : 'POST'
  72     });
  73     if (status) {
  74       // Default status messages
  75       if (status === true) {
  76         status = {success: params.action === 'delete' ? ts('Removed') : ts('Saved')};
  77         if (params.action.indexOf('get') === 0) {
  78           status.start = ts('Loading...');
  79           status.success = null;
  80         }
  81       }
  82       var messages = status === true ? {} : status;
  83       CRM.status(status, ajax);
  84     }
  85     return ajax;
  86   };
  87
  88   /**
  89    * @deprecated
  90    * AJAX api
  91    */
  92   CRM.api = function(entity, action, params, options) {
  93     // Default settings
  94     var settings = {
  95       context: null,
  96       success: function(result, settings) {
  97         return true;
  98       },
  99       error: function(result, settings) {
 100         $().crmError(result.error_message, ts('Error'));
 101         return false;
 102       },
 103       callBack: function(result, settings) {
 104         if (result.is_error == 1) {
 105           return settings.error.call(this, result, settings);
 106         }
 107         return settings.success.call(this, result, settings);
 108       },
 109       ajaxURL: 'civicrm/ajax/rest'
 110     };
 111     action = action.toLowerCase();
 112     // Default success handler
 113     switch (action) {
 114       case "update":
 115       case "create":
 116       case "setvalue":
 117       case "replace":
 118         settings.success = function() {
 119           CRM.status(ts('Saved'));
 120           return true;
 121         };
 122         break;
 123       case "delete":
 124         settings.success = function() {
 125           CRM.status(ts('Removed'));
 126           return true;
 127         };
 128     }
 129     params = {
 130       entity: entity,
 131       action: action,
 132       json: JSON.stringify(params)
 133     };
 134     // Pass copy of settings into closure to preserve its value during multiple requests
 135     (function(stg) {
 136       $.ajax({
 137         url: stg.ajaxURL.indexOf('http') === 0 ? stg.ajaxURL : CRM.url(stg.ajaxURL),
 138         dataType: 'json',
 139         data: params,
 140         type: action.indexOf('get') < 0 ? 'POST' : 'GET',
 141         success: function(result) {
 142           stg.callBack.call(stg.context, result, stg);
 143         }
 144       });
 145     })($.extend({}, settings, options));
 146   };
 147
 148   $.widget('civi.crmSnippet', {
 149     options: {
 150       url: null,
 151       block: true,
 152       crmForm: null
 153     },
 154     _originalContent: null,
 155     _originalUrl: null,
 156     isOriginalUrl: function() {
 157       var
 158         args = {},
 159         same = true,
 160         newUrl = this._formatUrl(this.options.url),
 161         oldUrl = this._formatUrl(this._originalUrl);
 162       // Compare path
 163       if (newUrl.split('?')[0] !== oldUrl.split('?')[0]) {
 164         return false;
 165       }
 166       // Compare arguments
 167       $.each((newUrl.split('?')[1] || '').split('&'), function(k, v) {
 168         var arg = v.split('=');
 169         args[arg[0]] = arg[1];
 170       });
 171       $.each((oldUrl.split('?')[1] || '').split('&'), function(k, v) {
 172         var arg = v.split('=');
 173         if (args[arg[0]] !== undefined && arg[1] !== args[arg[0]]) {
 174           same = false;
 175         }
 176       });
 177       return same;
 178     },
 179     resetUrl: function() {
 180       this.options.url = this._originalUrl;
 181     },
 182     _create: function() {
 183       this.element.addClass('crm-ajax-container');
 184       if (!this.element.is('.crm-container *')) {
 185         this.element.addClass('crm-container');
 186       }
 187       this._handleOrderLinks();
 188       // Set default if not supplied
 189       this.options.url = this.options.url || document.location.href;
 190       this._originalUrl = this.options.url;
 191     },
 192     _onFailure: function(data, status) {
 193       var msg, title = ts('Network Error');
 194       if (this.options.block) this.element.unblock();
 195       this.element.trigger('crmAjaxFail', data);
 196       switch (status) {
 197         case 'Forbidden':
 198           title = ts('Access Denied');
 199           msg = ts('Ensure you are still logged in and have permission to access this feature.');
 200           break;
 201         default:
 202           msg = ts('Unable to reach the server. Please refresh this page in your browser and try again.');
 203       }
 204       CRM.alert(msg, title, 'error');
 205     },
 206     _onError: function(data) {
 207       this.element.attr('data-unsaved-changes', 'false').trigger('crmAjaxError', data);
 208       if (this.options.crmForm && this.options.crmForm.autoClose && this.element.data('uiDialog')) {
 209         this.element.dialog('close');
 210       }
 211     },
 212     _formatUrl: function(url, snippetType) {
 213       // Strip hash
 214       url = url.split('#')[0];
 215       // Add snippet argument to url
 216       if (snippetType) {
 217         if (url.search(/[&?]snippet=/) < 0) {
 218           url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=' + snippetType;
 219         } else {
 220           url = url.replace(/snippet=[^&]*/, 'snippet=' + snippetType);
 221         }
 222       }
 223       return url;
 224     },
 225     // Hack to deal with civicrm legacy sort functionality
 226     _handleOrderLinks: function() {
 227       var that = this;
 228       $('a.crm-weight-arrow', that.element).click(function(e) {
 229         if (that.options.block) that.element.block();
 230         $.getJSON(that._formatUrl(this.href, 'json')).done(function() {
 231           that.refresh();
 232         });
 233         e.stopImmediatePropagation();
 234         return false;
 235       });
 236     },
 237     refresh: function() {
 238       var that = this;
 239       var url = this._formatUrl(this.options.url, 'json');
 240       if (this.options.crmForm) $('form', this.element).ajaxFormUnbind();
 241       if (this.options.block) this.element.block();
 242       $.getJSON(url, function(data) {
 243         if (data.status === 'redirect') {
 244           that.options.url = data.userContext;
 245           return that.refresh();
 246         }
 247         if (that.options.block) that.element.unblock();
 248         if (!$.isPlainObject(data)) {
 249           that._onFailure(data);
 250           return;
 251         }
 252         if (data.status === 'error') {
 253           that._onError(data);
 254           return;
 255         }
 256         data.url = url;
 257         that.element.trigger('crmUnload').trigger('crmBeforeLoad', data);
 258         that._beforeRemovingContent();
 259         that.element.html(data.content);
 260         that._handleOrderLinks();
 261         that.element.trigger('crmLoad', data);
 262         if (that.options.crmForm) that.element.trigger('crmFormLoad', data);
 263         // This is only needed by forms that load via ajax but submit without ajax, e.g. configure contribution page tabs
 264         // TODO: remove this when those forms have been converted to use ajax submit
 265         if (data.status === 'form_error' && $.isPlainObject(data.errors)) {
 266           that.element.trigger('crmFormError', data);
 267           $.each(data.errors, function(formElement, msg) {
 268             $('[name="'+formElement+'"]', that.element).crmError(msg);
 269           });
 270         }
 271       }).fail(function(data, msg, status) {
 272         that._onFailure(data, status);
 273       });
 274     },
 275     // Perform any cleanup needed before removing/replacing content
 276     _beforeRemovingContent: function() {
 277       var that = this;
 278       // Save original content to be restored if widget is destroyed
 279       if (this._originalContent === null) {
 280         $('.blockUI', this.element).remove();
 281         this._originalContent = this.element.contents().detach();
 282       }
 283       if (this.options.crmForm) $('form', this.element).ajaxFormUnbind();
 284     },
 285     _destroy: function() {
 286       this.element.removeClass('crm-ajax-container').trigger('crmUnload');
 287       this._beforeRemovingContent();
 288       if (this._originalContent !== null) {
 289         this.element.empty().append(this._originalContent);
 290       }
 291     }
 292   });
 293
 294   var dialogCount = 0,
 295     exclude = '[href^=#], [href^=javascript], [onclick], .no-popup, .cancel';
 296
 297   CRM.loadPage = function(url, options) {
 298     var settings = {
 299       target: '#crm-ajax-dialog-' + (dialogCount++),
 300       dialog: (options && options.target) ? false : {}
 301     };
 302     if (options) $.extend(true, settings, options);
 303     settings.url = url;
 304     // Create new dialog
 305     if (settings.dialog) {
 306       settings.dialog = CRM.utils.adjustDialogDefaults(settings.dialog);
 307       $('<div id="' + settings.target.substring(1) + '"></div>')
 308         .dialog(settings.dialog)
 309         .parent().find('.ui-dialog-titlebar')
 310         .append($('<a class="crm-dialog-titlebar-print ui-dialog-titlebar-close" title="'+ts('Print window')+'" target="_blank" style="right:3.8em;"/>')
 311           .button({icons: {primary: 'fa-print'}, text: false}));
 312     }
 313     // Add handlers to new or existing dialog
 314     if ($(settings.target).data('uiDialog')) {
 315       $(settings.target)
 316         .on('dialogclose', function() {
 317           if (settings.dialog && $(this).attr('data-unsaved-changes') !== 'true') {
 318             $(this).crmSnippet('destroy').dialog('destroy').remove();
 319           }
 320         })
 321         .on('crmLoad', function(e, data) {
 322           // Set title
 323           if (e.target === $(settings.target)[0] && data && !settings.dialog.title && data.title) {
 324             $(this).dialog('option', 'title', data.title);
 325           }
 326           // Update print url
 327           $(this).parent().find('a.crm-dialog-titlebar-print').attr('href', $(this).data('civiCrmSnippet')._formatUrl($(this).crmSnippet('option', 'url'), '2'));
 328         });
 329     }
 330     $(settings.target).crmSnippet(settings).crmSnippet('refresh');
 331     return $(settings.target);
 332   };
 333   CRM.loadForm = function(url, options) {
 334     var formErrors = [], settings = {
 335       crmForm: {
 336         ajaxForm: {},
 337         autoClose: true,
 338         validate: true,
 339         refreshAction: ['next_new', 'submit_savenext', 'upload_new'],
 340         cancelButton: '.cancel',
 341         openInline: 'a.open-inline, a.button, a.action-item, a.open-inline-noreturn',
 342         onCancel: function(event) {}
 343       }
 344     };
 345     // Move options that belong to crmForm. Others will be passed through to crmSnippet
 346     if (options) $.each(options, function(key, value) {
 347       if (typeof(settings.crmForm[key]) !== 'undefined') {
 348         settings.crmForm[key] = value;
 349       }
 350       else {
 351         settings[key] = value;
 352       }
 353     });
 354
 355     var widget = CRM.loadPage(url, settings).off('.crmForm');
 356
 357     // CRM-14353 - Warn of unsaved changes for all forms except those which have opted out
 358     function cancelAction() {
 359       var dirty = CRM.utils.initialValueChanged($('form:not([data-warn-changes=false])', widget));
 360       widget.attr('data-unsaved-changes', dirty ? 'true' : 'false');
 361       if (dirty) {
 362         var id = widget.attr('id') + '-unsaved-alert',
 363           title = widget.dialog('option', 'title'),
 364           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});
 365         $('#' + id).button({icons: {primary: 'fa-undo'}}).click(function(e) {
 366           widget.attr('data-unsaved-changes', 'false').dialog('open');
 367           e.preventDefault();
 368         });
 369       }
 370     }
 371
 372     if (widget.data('uiDialog')) widget.on('dialogbeforeclose', function(e) {
 373       // CRM-14353 - Warn unsaved changes if user clicks close button or presses "esc"
 374       if (e.originalEvent) {
 375         cancelAction();
 376       }
 377     });
 378
 379     widget.on('crmFormLoad.crmForm', function(event, data) {
 380       var $el = $(this).attr('data-unsaved-changes', 'false'),
 381         settings = $el.crmSnippet('option', 'crmForm');
 382       if (settings.cancelButton) $(settings.cancelButton, this).click(function(e) {
 383         e.preventDefault();
 384         var returnVal = settings.onCancel.call($el, e);
 385         if (returnVal !== false) {
 386           $el.trigger('crmFormCancel', e);
 387           if ($el.data('uiDialog') && settings.autoClose) {
 388             cancelAction();
 389             $el.dialog('close');
 390           }
 391           else if (!settings.autoClose) {
 392             $el.crmSnippet('resetUrl').crmSnippet('refresh');
 393           }
 394         }
 395       });
 396       if (settings.validate) {
 397         $("form", this).crmValidate();
 398       }
 399       $("form:not('[data-no-ajax-submit=true]')", this).ajaxForm($.extend({
 400         url: data.url.replace(/reset=1[&]?/, ''),
 401         dataType: 'json',
 402         success: function(response) {
 403           if (response.content === undefined) {
 404             $el.trigger('crmFormSuccess', response);
 405             // Reset form for e.g. "save and new"
 406             if (response.userContext && (response.status === 'redirect' || (settings.refreshAction && $.inArray(response.buttonName, settings.refreshAction) >= 0))) {
 407               // Force reset of original url
 408               $el.data('civiCrmSnippet')._originalUrl = response.userContext;
 409               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 410             }
 411             // Close if we are on the original url or the action was "delete" (in which case returning to view may be inappropriate)
 412             else if ($el.data('uiDialog') && (settings.autoClose || response.action === 8)) {
 413               $el.dialog('close');
 414             }
 415             else if (settings.autoClose === false) {
 416               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 417             }
 418           }
 419           else {
 420             if ($el.crmSnippet('option', 'block')) $el.unblock();
 421             response.url = data.url;
 422             $el.html(response.content).trigger('crmLoad', response).trigger('crmFormLoad', response);
 423             if (response.status === 'form_error') {
 424               formErrors = [];
 425               $el.trigger('crmFormError', response);
 426               $.each(response.errors || [], function(formElement, msg) {
 427                 formErrors.push($('[name="'+formElement+'"]', $el).crmError(msg));
 428               });
 429             }
 430           }
 431         },
 432         beforeSubmit: function(submission) {
 433           $.each(formErrors, function() {
 434             if (this && this.close) this.close();
 435           });
 436           if ($el.crmSnippet('option', 'block')) $el.block();
 437           $el.trigger('crmFormSubmit', submission);
 438         }
 439       }, settings.ajaxForm));
 440       if (settings.openInline) {
 441         settings.autoClose = $el.crmSnippet('isOriginalUrl');
 442         $(this).off('.openInline').on('click.openInline', settings.openInline, function(e) {
 443           if ($(this).is(exclude + ', .crm-popup')) {
 444             return;
 445           }
 446           if ($(this).hasClass('open-inline-noreturn')) {
 447             // Force reset of original url
 448             $el.data('civiCrmSnippet')._originalUrl = $(this).attr('href');
 449           }
 450           $el.crmSnippet('option', 'url', $(this).attr('href')).crmSnippet('refresh');
 451           e.preventDefault();
 452         });
 453       }
 454       if ($el.data('uiDialog')) {
 455         // Show form buttons as part of the dialog
 456         var buttonContainers = '.crm-submit-buttons, .action-link',
 457           buttons = [],
 458           added = [];
 459         $(buttonContainers, $el).find('input.crm-form-submit, a.button, button').each(function() {
 460           var $el = $(this),
 461             label = $el.is('input') ? $el.attr('value') : $el.text(),
 462             identifier = $el.attr('name') || $el.attr('href');
 463           if (!identifier || identifier === '#' || $.inArray(identifier, added) < 0) {
 464             var $icon = $el.find('.icon, .crm-i'),
 465               button = {'data-identifier': identifier, text: label, click: function() {
 466                 $el[0].click();
 467               }};
 468             if ($icon.length) {
 469               button.icons = {primary: $icon.attr('class')};
 470             } else {
 471               var action = $el.attr('crm-icon') || ($el.hasClass('cancel') ? 'fa-times' : 'fa-check');
 472               button.icons = {primary: action};
 473             }
 474             buttons.push(button);
 475             added.push(identifier);
 476           }
 477           // display:none causes the form to not submit when pressing "enter"
 478           $el.parents(buttonContainers).css({height: 0, padding: 0, margin: 0, overflow: 'hidden'}).find('.crm-button-icon').hide();
 479         });
 480         $el.dialog('option', 'buttons', buttons);
 481       }
 482       // Allow a button to prevent ajax submit
 483       $('input[data-no-ajax-submit=true]').click(function() {
 484         $(this).closest('form').ajaxFormUnbind();
 485       });
 486       // For convenience, focus the first field
 487       $('input[type=text], textarea, select', this).filter(':visible').first().not('.dateplugin').focus();
 488     });
 489     return widget;
 490   };
 491   /**
 492    * Handler for jQuery click event e.g. $('a').click(CRM.popup);
 493    */
 494   CRM.popup = function(e) {
 495     var $el = $(this).first(),
 496       url = $el.attr('href'),
 497       popup = $el.data('popup-type') === 'page' ? CRM.loadPage : CRM.loadForm,
 498       settings = $el.data('popup-settings') || {},
 499       formData = false;
 500     settings.dialog = settings.dialog || {};
 501     if (e.isDefaultPrevented() || !CRM.config.ajaxPopupsEnabled || !url || $el.is(exclude + ', .open-inline, .open-inline-noreturn')) {
 502       return;
 503     }
 504     // Sized based on css class
 505     if ($el.hasClass('small-popup')) {
 506       settings.dialog.width = 400;
 507       settings.dialog.height = 300;
 508     }
 509     else if ($el.hasClass('medium-popup')) {
 510       settings.dialog.width = settings.dialog.height = '50%';
 511     }
 512     var dialog = popup(url, settings);
 513     // Trigger events from the dialog on the original link element
 514     $el.trigger('crmPopupOpen', [dialog]);
 515     // Listen for success events and buffer them so we only trigger once
 516     dialog.on('crmFormSuccess.crmPopup crmPopupFormSuccess.crmPopup', function(e, data) {
 517       formData = data;
 518     });
 519     dialog.on('dialogclose.crmPopup', function(e, data) {
 520       if (formData) {
 521         $el.trigger('crmPopupFormSuccess', [dialog, formData]);
 522       }
 523       $el.trigger('crmPopupClose', [dialog, data]);
 524     });
 525     e.preventDefault();
 526   };
 527   /**
 528    * An event callback for CRM.popup or a standalone function to refresh the content around a given element
 529    * @param e {event|selector}
 530    */
 531   CRM.refreshParent = function(e) {
 532     // Use e.target if input smells like an event, otherwise assume it's a jQuery selector
 533     var $el = (e.stopPropagation && e.target) ? $(e.target) : $(e),
 534       $table = $el.closest('.dataTable');
 535     // Call native refresh method on ajax datatables
 536     if ($table.length && $.fn.DataTable.fnIsDataTable($table[0]) && $table.dataTable().fnSettings().sAjaxSource) {
 537       // Refresh ALL datatables - needed for contact relationship tab
 538       $.each($.fn.dataTable.fnTables(), function() {
 539         if ($(this).dataTable().fnSettings().sAjaxSource) $(this).unblock().dataTable().fnDraw();
 540       });
 541     }
 542     // Otherwise refresh the nearest crmSnippet
 543     else {
 544       $el.closest('.crm-ajax-container, #crm-main-content-wrapper').crmSnippet().crmSnippet('refresh');
 545     }
 546   };
 547
 548   $(function($) {
 549     $('body')
 550       .on('click', 'a.crm-popup', CRM.popup)
 551       // Close unsaved dialog messages
 552       .on('dialogopen', function(e) {
 553         $('.alert.unsaved-dialog .ui-notify-cross', '#crm-notification-container').click();
 554       })
 555       // Destroy old unsaved dialog
 556       .on('dialogcreate', function(e) {
 557         $('.ui-dialog-content.crm-ajax-container:hidden[data-unsaved-changes=true]').crmSnippet('destroy').dialog('destroy').remove();
 558       })
 559       // Ensure wysiwyg content is updated prior to ajax submit
 560       .on('form-pre-serialize', function(e) {
 561         $('.crm-wysiwyg-enabled', e.target).each(function() {
 562           CRM.wysiwyg.updateElement(this);
 563         });
 564       })
 565       // Auto-resize dialogs when loading content
 566       .on('crmLoad dialogopen', 'div.ui-dialog.ui-resizable.crm-container', function(e) {
 567         var
 568           $wrapper = $(this),
 569           $dialog = $wrapper.children('.ui-dialog-content');
 570         // small delay to allow contents to render
 571         window.setTimeout(function() {
 572           var currentHeight = $wrapper.outerHeight(),
 573             padding = currentHeight - $dialog.height(),
 574             newHeight = $dialog.prop('scrollHeight') + padding,
 575             menuHeight = $('#civicrm-menu').outerHeight();
 576           if ($('body').hasClass('crm-menubar-below-cms-menu')) {
 577             menuHeight += $('#civicrm-menu').offset().top;
 578           }
 579           var maxHeight = $(window).height() - menuHeight;
 580           newHeight = newHeight > maxHeight ? maxHeight : newHeight;
 581           if (newHeight > (currentHeight + 15)) {
 582             $dialog.dialog('option', {
 583               position: {my: 'center', at: 'center center+' + (menuHeight / 2), of: window},
 584               height: newHeight
 585             });
 586           }
 587         }, 500);
 588       });
 589   });
 590
 591 }(jQuery, CRM));