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    * Almost like {crmURL} but on the client side
   9    * eg: var url = CRM.url('civicrm/contact/view', {reset:1,cid:42});
  10    * or: $('a.my-link').crmURL();
  11    */
  12   var tplURL = '/civicrm/example?placeholder';
  13   var urlInitted = false;
  14   CRM.url = function (p, params) {
  15     if (p == "init") {
  16       tplURL = params;
  17       urlInitted = true;
  18       return;
  19     }
  20     if (!urlInitted) {
  21       console && console.log && console.log('Warning: CRM.url called before initialization');
  22     }
  23     params = params || '';
  24     var frag = p.split ('?');
  25     var url = tplURL.replace("civicrm/example", frag[0]);
  26
  27     if (typeof(params) == 'string') {
  28       url = url.replace("placeholder", params);
  29     }
  30     else {
  31       url = url.replace("placeholder", $.param(params));
  32     }
  33     if (frag[1]) {
  34       url += (url.indexOf('?') === (url.length - 1) ? '' : '&') + frag[1];
  35     }
  36     // remove trailing "?"
  37     if (url.indexOf('?') === (url.length - 1)) {
  38       url = url.slice(0, (url.length - 1));
  39     }
  40     return url;
  41   };
  42
  43   // Backwards compatible with jQuery fn
  44   $.extend ({'crmURL':
  45     function (p, params) {
  46       console && console.log && console.log('Calling crmURL from jQuery is deprecated. Please use CRM.url() instead.');
  47       return CRM.url(p, params);
  48     }
  49   });
  50
  51   $.fn.crmURL = function () {
  52     return this.each(function() {
  53       if (this.href) {
  54         this.href = CRM.url(this.href);
  55       }
  56     });
  57   };
  58
  59   /**
  60    * AJAX api
  61    */
  62   CRM.api3 = function(entity, action, params, status) {
  63     if (typeof(entity) === 'string') {
  64       params = {
  65         entity: entity,
  66         action: action.toLowerCase(),
  67         json: JSON.stringify(params || {})
  68       };
  69     } else {
  70       params = {
  71         entity: 'api3',
  72         action: 'call',
  73         json: JSON.stringify(entity)
  74       };
  75       status = action;
  76     }
  77     var ajax = $.ajax({
  78       url: CRM.url('civicrm/ajax/rest'),
  79       dataType: 'json',
  80       data: params,
  81       type: params.action.indexOf('get') < 0 ? 'POST' : 'GET'
  82     });
  83     if (status) {
  84       // Default status messages
  85       if (status === true) {
  86         status = {success: params.action === 'delete' ? ts('Removed') : ts('Saved')};
  87         if (params.action.indexOf('get') === 0) {
  88           status.start = ts('Loading...');
  89           status.success = null;
  90         }
  91       }
  92       var messages = status === true ? {} : status;
  93       CRM.status(status, ajax);
  94     }
  95     return ajax;
  96   };
  97
  98   /**
  99    * @deprecated
 100    * AJAX api
 101    */
 102   CRM.api = function(entity, action, params, options) {
 103     // Default settings
 104     var settings = {
 105       context: null,
 106       success: function(result, settings) {
 107         return true;
 108       },
 109       error: function(result, settings) {
 110         $().crmError(result.error_message, ts('Error'));
 111         return false;
 112       },
 113       callBack: function(result, settings) {
 114         if (result.is_error == 1) {
 115           return settings.error.call(this, result, settings);
 116         }
 117         return settings.success.call(this, result, settings);
 118       },
 119       ajaxURL: 'civicrm/ajax/rest'
 120     };
 121     action = action.toLowerCase();
 122     // Default success handler
 123     switch (action) {
 124       case "update":
 125       case "create":
 126       case "setvalue":
 127       case "replace":
 128         settings.success = function() {
 129           CRM.status(ts('Saved'));
 130           return true;
 131         };
 132         break;
 133       case "delete":
 134         settings.success = function() {
 135           CRM.status(ts('Removed'));
 136           return true;
 137         };
 138     }
 139     params = {
 140       entity: entity,
 141       action: action,
 142       json: JSON.stringify(params)
 143     };
 144     // Pass copy of settings into closure to preserve its value during multiple requests
 145     (function(stg) {
 146       $.ajax({
 147         url: stg.ajaxURL.indexOf('http') === 0 ? stg.ajaxURL : CRM.url(stg.ajaxURL),
 148         dataType: 'json',
 149         data: params,
 150         type: action.indexOf('get') < 0 ? 'POST' : 'GET',
 151         success: function(result) {
 152           stg.callBack.call(stg.context, result, stg);
 153         }
 154       });
 155     })($.extend({}, settings, options));
 156   };
 157
 158   /**
 159    * Backwards compatible with jQuery fn
 160    * @deprecated
 161    */
 162   $.fn.crmAPI = function(entity, action, params, options) {
 163     console && console.log && console.log('Calling crmAPI from jQuery is deprecated. Please use CRM.api() instead.');
 164     return CRM.api.call(this, entity, action, params, options);
 165   };
 166
 167   $.widget('civi.crmSnippet', {
 168     options: {
 169       url: null,
 170       block: true,
 171       crmForm: null
 172     },
 173     _originalContent: null,
 174     _originalUrl: null,
 175     isOriginalUrl: function() {
 176       var
 177         args = {},
 178         same = true,
 179         newUrl = this._formatUrl(this.options.url),
 180         oldUrl = this._formatUrl(this._originalUrl);
 181       // Compare path
 182       if (newUrl.split('?')[0] !== oldUrl.split('?')[0]) {
 183         return false;
 184       }
 185       // Compare arguments
 186       $.each(newUrl.split('?')[1].split('&'), function(k, v) {
 187         var arg = v.split('=');
 188         args[arg[0]] = arg[1];
 189       });
 190       $.each(oldUrl.split('?')[1].split('&'), function(k, v) {
 191         var arg = v.split('=');
 192         if (args[arg[0]] !== undefined && arg[1] !== args[arg[0]]) {
 193           same = false;
 194         }
 195       });
 196       return same;
 197     },
 198     resetUrl: function() {
 199       this.options.url = this._originalUrl;
 200     },
 201     _create: function() {
 202       this.element.addClass('crm-ajax-container');
 203       if (!this.element.is('.crm-container *')) {
 204         this.element.addClass('crm-container');
 205       }
 206       this._handleOrderLinks();
 207       // Set default if not supplied
 208       this.options.url = this.options.url || document.location.href;
 209       this._originalUrl = this.options.url;
 210     },
 211     _onFailure: function(data) {
 212       this.options.block && this.element.unblock();
 213       this.element.trigger('crmAjaxFail', data);
 214       CRM.alert(ts('Unable to reach the server. Please refresh this page in your browser and try again.'), ts('Network Error'), 'error');
 215     },
 216     _formatUrl: function(url) {
 217       // Strip hash
 218       url = url.split('#')[0];
 219       // Add snippet argument to url
 220       if (url.search(/[&?]snippet=/) < 0) {
 221         url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=json';
 222       } else {
 223         url = url.replace(/snippet=[^&]*/, 'snippet=json');
 224       }
 225       return url;
 226     },
 227     // Hack to deal with civicrm legacy sort functionality
 228     _handleOrderLinks: function() {
 229       var that = this;
 230       $('a.crm-weight-arrow', that.element).click(function(e) {
 231         that.options.block && that.element.block();
 232         $.getJSON(that._formatUrl(this.href)).done(function() {
 233           that.refresh();
 234         });
 235         e.stopImmediatePropagation();
 236         return false;
 237       });
 238     },
 239     refresh: function() {
 240       var that = this;
 241       var url = this._formatUrl(this.options.url);
 242       this.options.crmForm && $('form', this.element).ajaxFormUnbind();
 243       if (this._originalContent === null) {
 244         this._originalContent = this.element.contents().detach();
 245       }
 246       this.options.block && $('.blockOverlay', this.element).length < 1 && this.element.block();
 247       $.getJSON(url, function(data) {
 248         if (typeof(data) != 'object' || typeof(data.content) != 'string') {
 249           that._onFailure(data);
 250           return;
 251         }
 252         data.url = url;
 253         that.element.trigger('crmBeforeLoad', data).html(data.content);
 254         that._handleOrderLinks();
 255         that.element.trigger('crmLoad', data);
 256         that.options.crmForm && that.element.trigger('crmFormLoad', data);
 257       }).fail(function() {
 258         that._onFailure();
 259       });
 260     },
 261     _destroy: function() {
 262       this.element.removeClass('crm-ajax-container');
 263       this.options.crmForm && $('form', this.element).ajaxFormUnbind();
 264       if (this._originalContent !== null) {
 265         this.element.empty().append(this._originalContent);
 266       }
 267     }
 268   });
 269
 270   var dialogCount = 0,
 271     exclude = '[href^=#], [href^=javascript], [onclick], .no-popup, .cancel';
 272
 273   CRM.loadPage = function(url, options) {
 274     var settings = {
 275       target: '#crm-ajax-dialog-' + (dialogCount++),
 276       dialog: false
 277     };
 278     if (!options || !options.target) {
 279       settings.dialog = {
 280         modal: true,
 281         width: '65%',
 282         height: '75%'
 283       };
 284     }
 285     options && $.extend(true, settings, options);
 286     settings.url = url;
 287     // Create new dialog
 288     if (settings.dialog) {
 289       // HACK: jQuery UI doesn't support relative height
 290       if (typeof settings.dialog.height === 'string' && settings.dialog.height.indexOf('%') > 0) {
 291         settings.dialog.height = parseInt($(window).height() * (parseFloat(settings.dialog.height)/100), 10);
 292       }
 293       $('<div id="'+ settings.target.substring(1) +'"><div class="crm-loading-element">' + ts('Loading') + '...</div></div>').dialog(settings.dialog);
 294       $(settings.target).on('dialogclose', function() {
 295         if ($(this).attr('data-unsaved-changes') !== 'true') {
 296           $(this).crmSnippet('destroy').dialog('destroy').remove();
 297         }
 298       });
 299     }
 300     if (settings.dialog && !settings.dialog.title) {
 301       $(settings.target).on('crmLoad', function(e, data) {
 302         if (e.target === $(settings.target)[0] && data && data.title) {
 303           $(this).dialog('option', 'title', data.title);
 304         }
 305       });
 306     }
 307     $(settings.target).crmSnippet(settings).crmSnippet('refresh');
 308     return $(settings.target);
 309   };
 310   CRM.loadForm = function(url, options) {
 311     var settings = {
 312       crmForm: {
 313         ajaxForm: {},
 314         autoClose: true,
 315         validate: true,
 316         refreshAction: ['next_new', 'submit_savenext', 'upload_new'],
 317         cancelButton: '.cancel',
 318         openInline: 'a.open-inline, a.button, a.action-item',
 319         onCancel: function(event) {}
 320       }
 321     };
 322     // Move options that belong to crmForm. Others will be passed through to crmSnippet
 323     options && $.each(options, function(key, value) {
 324       if (typeof(settings.crmForm[key]) !== 'undefined') {
 325         settings.crmForm[key] = value;
 326       }
 327       else {
 328         settings[key] = value;
 329       }
 330     });
 331
 332     var widget = CRM.loadPage(url, settings).off('.crmForm');
 333
 334     // CRM-14353 - Warn of unsaved changes for all forms except those which have opted out
 335     function cancelAction() {
 336       var dirty = CRM.utils.initialValueChanged($('form:not([data-warn-changes=false])', widget));
 337       widget
 338         .attr('data-unsaved-changes', dirty ? 'true' : 'false')
 339         .dialog('close');
 340       if (dirty) {
 341         var id = widget.attr('id') + '-unsaved-alert',
 342           title = widget.dialog('option', 'title'),
 343           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});
 344         $('#' + id).button({icons: {primary: 'ui-icon-arrowreturnthick-1-w'}}).click(function(e) {
 345           widget.attr('data-unsaved-changes', 'false').dialog('open');
 346           e.preventDefault();
 347         });
 348       }
 349     }
 350     if (widget.data('uiDialog')) {
 351       // CRM-14353 - This is a bit harsh but we are removing jQuery UI's event handler from the close button and adding our own
 352       widget.parent().find('.ui-dialog-titlebar-close').first().off().click(cancelAction);
 353     }
 354
 355     widget.on('crmFormLoad.crmForm', function(event, data) {
 356       var $el = $(this)
 357         .attr('data-unsaved-changes', 'false');
 358       var settings = $el.crmSnippet('option', 'crmForm');
 359       settings.cancelButton && $(settings.cancelButton, this).click(function(e) {
 360         e.preventDefault();
 361         var returnVal = settings.onCancel.call($el, e);
 362         if (returnVal !== false) {
 363           $el.trigger('crmFormCancel', e);
 364           if ($el.data('uiDialog') && settings.autoClose) {
 365             cancelAction();
 366           }
 367           else if (!settings.autoClose) {
 368             $el.crmSnippet('resetUrl').crmSnippet('refresh');
 369           }
 370         }
 371       });
 372       if (settings.validate) {
 373         $("form", this).validate(typeof(settings.validate) == 'object' ? settings.validate : CRM.validate.params);
 374       }
 375       $("form:not('[data-no-ajax-submit=true]')", this).ajaxForm($.extend({
 376         url: data.url.replace(/reset=1[&]?/, ''),
 377         dataType: 'json',
 378         success: function(response) {
 379           if (response.content === undefined) {
 380             $el.crmSnippet('option', 'block') && $el.unblock();
 381             $el.trigger('crmFormSuccess', response);
 382             // Reset form for e.g. "save and new"
 383             if (response.userContext && (response.status === 'redirect' || (settings.refreshAction && $.inArray(response.buttonName, settings.refreshAction) >= 0))) {
 384               // Force reset of original url
 385               $el.data('civiCrmSnippet')._originalUrl = response.userContext;
 386               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 387             }
 388             else if ($el.data('uiDialog') && settings.autoClose) {
 389               $el.dialog('close');
 390             }
 391             else if (settings.autoClose === false) {
 392               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 393             }
 394           }
 395           else {
 396             response.url = data.url;
 397             $el.html(response.content).trigger('crmLoad', response).trigger('crmFormLoad', response);
 398             if (response.status === 'form_error') {
 399               $el.trigger('crmFormError', response);
 400               $.each(response.errors || [], function(formElement, msg) {
 401                 $('[name="'+formElement+'"]', $el).crmError(msg);
 402               });
 403             }
 404           }
 405         },
 406         beforeSerialize: function(form, options) {
 407           if (window.CKEDITOR && window.CKEDITOR.instances) {
 408             $.each(CKEDITOR.instances, function() {
 409               this.updateElement && this.updateElement();
 410             });
 411           }
 412         },
 413         beforeSubmit: function(submission) {
 414           $el.crmSnippet('option', 'block') && $el.block();
 415           $el.trigger('crmFormSubmit', submission);
 416         }
 417       }, settings.ajaxForm));
 418       if (settings.openInline) {
 419         settings.autoClose = $el.crmSnippet('isOriginalUrl');
 420         $(settings.openInline, this).not(exclude + ', .crm-popup').click(function(event) {
 421           $el.crmSnippet('option', 'url', $(this).attr('href')).crmSnippet('refresh');
 422           return false;
 423         });
 424       }
 425       // Alow a button to prevent ajax submit
 426       $('input[data-no-ajax-submit=true]').click(function() {
 427         $(this).closest('form').ajaxFormUnbind();
 428       });
 429       // For convenience, focus the first field
 430       $('input[type=text], textarea, select', this).filter(':visible').first().not('.dateplugin').focus();
 431     });
 432     return widget;
 433   };
 434   /**
 435    * Handler for jQuery click event e.g. $('a').click(CRM.popup)
 436    */
 437   CRM.popup = function(e) {
 438     var $el = $(this).first(),
 439       url = $el.attr('href'),
 440       popup = $el.data('popup-type') === 'page' ? CRM.loadPage : CRM.loadForm,
 441       settings = $el.data('popup-settings') || {},
 442       formSuccess = false;
 443     settings.dialog = settings.dialog || {};
 444     if (e.isDefaultPrevented() || !CRM.config.ajaxPopupsEnabled || !url || $el.is(exclude)) {
 445       return;
 446     }
 447     // Sized based on css class
 448     if ($el.hasClass('small-popup')) {
 449       settings.dialog.width = 400;
 450       settings.dialog.height = 300;
 451     }
 452     else if ($el.hasClass('medium-popup')) {
 453       settings.dialog.width = settings.dialog.height = '50%';
 454     }
 455     else if ($el.hasClass('huge-popup')) {
 456       settings.dialog.height = '90%';
 457     }
 458     var dialog = popup(url, settings);
 459     // Trigger events from the dialog on the original link element
 460     $el.trigger('crmPopupOpen', [dialog]);
 461     // Listen for success events and buffer them so we only trigger once
 462     dialog.on('crmFormSuccess.crmPopup crmPopupFormSuccess.crmPopup', function() {
 463       formSuccess = true;
 464     });
 465     dialog.on('dialogclose.crmPopup', function(e, data) {
 466       if (formSuccess) {
 467         $el.trigger('crmPopupFormSuccess', [dialog, data]);
 468       }
 469       $el.trigger('crmPopupClose', [dialog, data]);
 470     });
 471     e.preventDefault();
 472   };
 473   /**
 474    * An event callback for CRM.popup or a standalone function to refresh the content around a given element
 475    * @param e event|selector
 476    */
 477   CRM.refreshParent = function(e) {
 478     // Use e.target if input smells like an event, otherwise assume it's a jQuery selector
 479     var $el = (e.stopPropagation && e.target) ? $(e.target) : $(e),
 480       $table = $el.closest('.dataTable');
 481     // Call native refresh method on ajax datatables
 482     if ($table && $.fn.DataTable.fnIsDataTable($table[0]) && $table.dataTable().fnSettings().sAjaxSource) {
 483       // Refresh ALL datatables - needed for contact relationship tab
 484       $.each($.fn.dataTable.fnTables(), function() {
 485         $(this).dataTable().fnSettings().sAjaxSource && $(this).unblock().dataTable().fnDraw();
 486       });
 487     }
 488     // Otherwise refresh the nearest crmSnippet
 489     else {
 490       $el.closest('.crm-ajax-container, #crm-main-content-wrapper').crmSnippet().crmSnippet('refresh');
 491     }
 492   };
 493
 494   $(function($) {
 495     $('body')
 496       .on('click', 'a.crm-popup', CRM.popup)
 497       // Close unsaved dialog messages
 498       .on('dialogopen', function(e) {
 499         $('.alert.unsaved-dialog .ui-notify-cross', '#crm-notification-container').click();
 500       })
 501       // Destroy old unsaved dialog
 502       .on('dialogcreate', function(e) {
 503         $('.ui-dialog-content.crm-ajax-container:hidden[data-unsaved-changes=true]').crmSnippet('destroy').dialog('destroy').remove();
 504       });
 505   });
 506
 507 }(jQuery, CRM));