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     _onError: function(data) {
 217       this.element.attr('data-unsaved-changes', 'false').trigger('crmAjaxError', data);
 218       if (this.options.crmForm && this.options.crmForm.autoClose && this.element.data('uiDialog')) {
 219         this.element.dialog('close');
 220       }
 221     },
 222     _formatUrl: function(url) {
 223       // Strip hash
 224       url = url.split('#')[0];
 225       // Add snippet argument to url
 226       if (url.search(/[&?]snippet=/) < 0) {
 227         url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=json';
 228       } else {
 229         url = url.replace(/snippet=[^&]*/, 'snippet=json');
 230       }
 231       return url;
 232     },
 233     // Hack to deal with civicrm legacy sort functionality
 234     _handleOrderLinks: function() {
 235       var that = this;
 236       $('a.crm-weight-arrow', that.element).click(function(e) {
 237         that.options.block && that.element.block();
 238         $.getJSON(that._formatUrl(this.href)).done(function() {
 239           that.refresh();
 240         });
 241         e.stopImmediatePropagation();
 242         return false;
 243       });
 244     },
 245     refresh: function() {
 246       var that = this;
 247       var url = this._formatUrl(this.options.url);
 248       this.options.crmForm && $('form', this.element).ajaxFormUnbind();
 249       if (this._originalContent === null) {
 250         this._originalContent = this.element.contents().detach();
 251       }
 252       this.options.block && $('.blockOverlay', this.element).length < 1 && this.element.block();
 253       $.getJSON(url, function(data) {
 254         if (!$.isPlainObject(data)) {
 255           that._onFailure(data);
 256           return;
 257         }
 258         if (data.status === 'error') {
 259           that._onError(data);
 260           return;
 261         }
 262         data.url = url;
 263         that.element.trigger('crmBeforeLoad', data).html(data.content);
 264         that._handleOrderLinks();
 265         that.element.trigger('crmLoad', data);
 266         that.options.crmForm && that.element.trigger('crmFormLoad', data);
 267       }).fail(function() {
 268         that._onFailure();
 269       });
 270     },
 271     _destroy: function() {
 272       this.element.removeClass('crm-ajax-container');
 273       this.options.crmForm && $('form', this.element).ajaxFormUnbind();
 274       if (this._originalContent !== null) {
 275         this.element.empty().append(this._originalContent);
 276       }
 277     }
 278   });
 279
 280   var dialogCount = 0,
 281     exclude = '[href^=#], [href^=javascript], [onclick], .no-popup, .cancel';
 282
 283   CRM.loadPage = function(url, options) {
 284     var settings = {
 285       target: '#crm-ajax-dialog-' + (dialogCount++),
 286       dialog: false
 287     };
 288     if (!options || !options.target) {
 289       settings.dialog = {
 290         modal: true,
 291         width: '65%',
 292         height: '75%'
 293       };
 294     }
 295     options && $.extend(true, settings, options);
 296     settings.url = url;
 297     // Create new dialog
 298     if (settings.dialog) {
 299       // HACK: jQuery UI doesn't support relative height
 300       if (typeof settings.dialog.height === 'string' && settings.dialog.height.indexOf('%') > 0) {
 301         settings.dialog.height = parseInt($(window).height() * (parseFloat(settings.dialog.height)/100), 10);
 302       }
 303       $('<div id="'+ settings.target.substring(1) +'"><div class="crm-loading-element">' + ts('Loading') + '...</div></div>').dialog(settings.dialog);
 304       $(settings.target).on('dialogclose', function() {
 305         if ($(this).attr('data-unsaved-changes') !== 'true') {
 306           $(this).crmSnippet('destroy').dialog('destroy').remove();
 307         }
 308       });
 309     }
 310     if (settings.dialog && !settings.dialog.title) {
 311       $(settings.target).on('crmLoad', function(e, data) {
 312         if (e.target === $(settings.target)[0] && data && data.title) {
 313           $(this).dialog('option', 'title', data.title);
 314         }
 315       });
 316     }
 317     $(settings.target).crmSnippet(settings).crmSnippet('refresh');
 318     return $(settings.target);
 319   };
 320   CRM.loadForm = function(url, options) {
 321     var settings = {
 322       crmForm: {
 323         ajaxForm: {},
 324         autoClose: true,
 325         validate: true,
 326         refreshAction: ['next_new', 'submit_savenext', 'upload_new'],
 327         cancelButton: '.cancel',
 328         openInline: 'a.open-inline, a.button, a.action-item',
 329         onCancel: function(event) {}
 330       }
 331     };
 332     // Move options that belong to crmForm. Others will be passed through to crmSnippet
 333     options && $.each(options, function(key, value) {
 334       if (typeof(settings.crmForm[key]) !== 'undefined') {
 335         settings.crmForm[key] = value;
 336       }
 337       else {
 338         settings[key] = value;
 339       }
 340     });
 341
 342     var widget = CRM.loadPage(url, settings).off('.crmForm');
 343
 344     // CRM-14353 - Warn of unsaved changes for all forms except those which have opted out
 345     function cancelAction() {
 346       var dirty = CRM.utils.initialValueChanged($('form:not([data-warn-changes=false])', widget));
 347       widget.attr('data-unsaved-changes', dirty ? 'true' : 'false');
 348       if (dirty) {
 349         var id = widget.attr('id') + '-unsaved-alert',
 350           title = widget.dialog('option', 'title'),
 351           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});
 352         $('#' + id).button({icons: {primary: 'ui-icon-arrowreturnthick-1-w'}}).click(function(e) {
 353           widget.attr('data-unsaved-changes', 'false').dialog('open');
 354           e.preventDefault();
 355         });
 356       }
 357     }
 358
 359     widget.data('uiDialog') && widget.on('dialogbeforeclose', function(e) {
 360       // CRM-14353 - Warn unsaved changes if user clicks close button or presses "esc"
 361       if (e.originalEvent) {
 362         cancelAction();
 363       }
 364     });
 365
 366     widget.on('crmFormLoad.crmForm', function(event, data) {
 367       var $el = $(this)
 368         .attr('data-unsaved-changes', 'false');
 369       var settings = $el.crmSnippet('option', 'crmForm');
 370       settings.cancelButton && $(settings.cancelButton, this).click(function(e) {
 371         e.preventDefault();
 372         var returnVal = settings.onCancel.call($el, e);
 373         if (returnVal !== false) {
 374           $el.trigger('crmFormCancel', e);
 375           if ($el.data('uiDialog') && settings.autoClose) {
 376             cancelAction();
 377             $el.dialog('close');
 378           }
 379           else if (!settings.autoClose) {
 380             $el.crmSnippet('resetUrl').crmSnippet('refresh');
 381           }
 382         }
 383       });
 384       if (settings.validate) {
 385         $("form", this).crmValidate();
 386       }
 387       $("form:not('[data-no-ajax-submit=true]')", this).ajaxForm($.extend({
 388         url: data.url.replace(/reset=1[&]?/, ''),
 389         dataType: 'json',
 390         success: function(response) {
 391           if (response.content === undefined) {
 392             $el.crmSnippet('option', 'block') && $el.unblock();
 393             $el.trigger('crmFormSuccess', response);
 394             // Reset form for e.g. "save and new"
 395             if (response.userContext && (response.status === 'redirect' || (settings.refreshAction && $.inArray(response.buttonName, settings.refreshAction) >= 0))) {
 396               // Force reset of original url
 397               $el.data('civiCrmSnippet')._originalUrl = response.userContext;
 398               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 399             }
 400             else if ($el.data('uiDialog') && settings.autoClose) {
 401               $el.dialog('close');
 402             }
 403             else if (settings.autoClose === false) {
 404               $el.crmSnippet('resetUrl').crmSnippet('refresh');
 405             }
 406           }
 407           else {
 408             response.url = data.url;
 409             $el.html(response.content).trigger('crmLoad', response).trigger('crmFormLoad', response);
 410             if (response.status === 'form_error') {
 411               $el.trigger('crmFormError', response);
 412               $.each(response.errors || [], function(formElement, msg) {
 413                 $('[name="'+formElement+'"]', $el).crmError(msg);
 414               });
 415             }
 416           }
 417         },
 418         beforeSerialize: function(form, options) {
 419           if (window.CKEDITOR && window.CKEDITOR.instances) {
 420             $.each(CKEDITOR.instances, function() {
 421               this.updateElement && this.updateElement();
 422             });
 423           }
 424         },
 425         beforeSubmit: function(submission) {
 426           $el.crmSnippet('option', 'block') && $el.block();
 427           $el.trigger('crmFormSubmit', submission);
 428         }
 429       }, settings.ajaxForm));
 430       if (settings.openInline) {
 431         settings.autoClose = $el.crmSnippet('isOriginalUrl');
 432         $(settings.openInline, this).not(exclude + ', .crm-popup').click(function(event) {
 433           $el.crmSnippet('option', 'url', $(this).attr('href')).crmSnippet('refresh');
 434           return false;
 435         });
 436       }
 437       // Alow a button to prevent ajax submit
 438       $('input[data-no-ajax-submit=true]').click(function() {
 439         $(this).closest('form').ajaxFormUnbind();
 440       });
 441       // For convenience, focus the first field
 442       $('input[type=text], textarea, select', this).filter(':visible').first().not('.dateplugin').focus();
 443     });
 444     return widget;
 445   };
 446   /**
 447    * Handler for jQuery click event e.g. $('a').click(CRM.popup)
 448    */
 449   CRM.popup = function(e) {
 450     var $el = $(this).first(),
 451       url = $el.attr('href'),
 452       popup = $el.data('popup-type') === 'page' ? CRM.loadPage : CRM.loadForm,
 453       settings = $el.data('popup-settings') || {},
 454       formSuccess = false;
 455     settings.dialog = settings.dialog || {};
 456     if (e.isDefaultPrevented() || !CRM.config.ajaxPopupsEnabled || !url || $el.is(exclude)) {
 457       return;
 458     }
 459     // Sized based on css class
 460     if ($el.hasClass('small-popup')) {
 461       settings.dialog.width = 400;
 462       settings.dialog.height = 300;
 463     }
 464     else if ($el.hasClass('medium-popup')) {
 465       settings.dialog.width = settings.dialog.height = '50%';
 466     }
 467     else if ($el.hasClass('huge-popup')) {
 468       settings.dialog.height = '90%';
 469     }
 470     var dialog = popup(url, settings);
 471     // Trigger events from the dialog on the original link element
 472     $el.trigger('crmPopupOpen', [dialog]);
 473     // Listen for success events and buffer them so we only trigger once
 474     dialog.on('crmFormSuccess.crmPopup crmPopupFormSuccess.crmPopup', function() {
 475       formSuccess = true;
 476     });
 477     dialog.on('dialogclose.crmPopup', function(e, data) {
 478       if (formSuccess) {
 479         $el.trigger('crmPopupFormSuccess', [dialog, data]);
 480       }
 481       $el.trigger('crmPopupClose', [dialog, data]);
 482     });
 483     e.preventDefault();
 484   };
 485   /**
 486    * An event callback for CRM.popup or a standalone function to refresh the content around a given element
 487    * @param e event|selector
 488    */
 489   CRM.refreshParent = function(e) {
 490     // Use e.target if input smells like an event, otherwise assume it's a jQuery selector
 491     var $el = (e.stopPropagation && e.target) ? $(e.target) : $(e),
 492       $table = $el.closest('.dataTable');
 493     // Call native refresh method on ajax datatables
 494     if ($table && $.fn.DataTable.fnIsDataTable($table[0]) && $table.dataTable().fnSettings().sAjaxSource) {
 495       // Refresh ALL datatables - needed for contact relationship tab
 496       $.each($.fn.dataTable.fnTables(), function() {
 497         $(this).dataTable().fnSettings().sAjaxSource && $(this).unblock().dataTable().fnDraw();
 498       });
 499     }
 500     // Otherwise refresh the nearest crmSnippet
 501     else {
 502       $el.closest('.crm-ajax-container, #crm-main-content-wrapper').crmSnippet().crmSnippet('refresh');
 503     }
 504   };
 505
 506   $(function($) {
 507     $('body')
 508       .on('click', 'a.crm-popup', CRM.popup)
 509       // Close unsaved dialog messages
 510       .on('dialogopen', function(e) {
 511         $('.alert.unsaved-dialog .ui-notify-cross', '#crm-notification-container').click();
 512       })
 513       // Destroy old unsaved dialog
 514       .on('dialogcreate', function(e) {
 515         $('.ui-dialog-content.crm-ajax-container:hidden[data-unsaved-changes=true]').crmSnippet('destroy').dialog('destroy').remove();
 516       });
 517   });
 518
 519 }(jQuery, CRM));