Merge pull request #3921 from eileenmcnaughton/CRM-15168

[civicrm-core.git] / templates / CRM / common / stateCountry.tpl

diff --git a/templates/CRM/common/stateCountry.tpl b/templates/CRM/common/stateCountry.tpl
index 162df6452ad0062ecfb0309bbbd4db3ac11e2647..a1e0e2f18b187e8e96aa94dd55305a3985352027 100644 (file)
--- a/templates/CRM/common/stateCountry.tpl
+++ b/templates/CRM/common/stateCountry.tpl
@@ -1,8 +1,8 @@
 {*
  +--------------------------------------------------------------------+
- | CiviCRM version 4.4                                                |
+ | CiviCRM version 4.5                                                |
  +--------------------------------------------------------------------+
- | Copyright CiviCRM LLC (c) 2004-2013                                |
+ | Copyright CiviCRM LLC (c) 2004-2014                                |
  +--------------------------------------------------------------------+
  | This file is a part of CiviCRM.                                    |
  |                                                                    |
@@ -26,43 +26,68 @@
 {if $config->stateCountryMap}
 <script type="text/javascript">
   {literal}
-  cj(function($) {
+  CRM.$(function($) {
+    var $form = $('form.{/literal}{$form.formClass}{literal}');
     function chainSelect(e) {
       var info = $(this).data('chainSelect');
       var val = info.target.val();
       var multiple = info.target.attr('multiple');
       var placeholder = $(this).val() ? "{/literal}{ts escape='js'}Loading{/ts}{literal}..." : info.placeholder;
-      !multiple && info.target.html('<option value="">' + placeholder + '</option>');
+      if (multiple) {
+        info.target.html('').prop('disabled', true).crmSelect2({placeholder: placeholder});
+      }
+      else {
+        info.target.html('<option value="">' + placeholder + '</option>').prop('disabled', true).crmSelect2();
+      }
       if ($(this).val()) {
         $.getJSON(info.callback, {_value: $(this).val()}, function(data) {
           var options = '';
-          $.each(data, function() {
-            if (!multiple || this.value) {
-              options += '<option value="' + this.value + '">' + this.name + '</option>';
-            }
-          });
-          info.target.html(options).val(val).trigger('change');
+          function buildOptions(data) {
+            $.each(data, function() {
+              if (this.children) {
+                options += '<optgroup label="' + this.name + '">';
+                buildOptions(this.children);
+                options += '</optgroup>';
+              }
+              else if (this.value || !multiple) {
+                options += '<option value="' + this.value + '">' + this.name + '</option>';
+              }
+              else {
+                info.target.crmSelect2({placeholder: this.name});
+              }
+            });
+          }
+          buildOptions(data);
+          info.target.html(options).val(val).prop('disabled', false).trigger('change');
         });
-      } else {
+      }
+      else {
         info.target.trigger('change');
       }
     }
+    function initField(selector, removePlaceholder) {
+      var $el = $(selector, $form);
+      if (removePlaceholder !== false) {
+        $el.removeAttr('placeholder');
+      }
+      return $el.css('min-width', '20em').crmSelect2();
+    }
     {/literal}
     {foreach from=$config->stateCountryMap item=stateCountryMap}
-      {if $stateCountryMap.country && $stateCountryMap.state_province}
-        $('select[name="{$stateCountryMap.country}"], #{$stateCountryMap.country}').data('chainSelect', {ldelim}
-          callback: CRM.url('civicrm/ajax/jqState'),
-          target: $('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}'),
-          placeholder: "{ts escape='js'}(choose country first){/ts}"
-          {rdelim}).on('change', chainSelect);
-      {/if}
       {if $stateCountryMap.state_province && $stateCountryMap.county}
-        $('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}').data('chainSelect', {ldelim}
+        $('select[name="{$stateCountryMap.state_province}"], select#{$stateCountryMap.state_province}', $form).data('chainSelect', {ldelim}
           callback: CRM.url('civicrm/ajax/jqCounty'),
-          target: $('select[name="{$stateCountryMap.county}"], #{$stateCountryMap.county}'),
-          placeholder: "{ts escape='js'}(choose state first){/ts}"
+          target: initField('select[name="{$stateCountryMap.county}"], #{$stateCountryMap.county}'),
+          placeholder: "{ts escape='js'}Choose state first{/ts}"
         {rdelim}).on('change',  chainSelect);
       {/if}
+      {if $stateCountryMap.country && $stateCountryMap.state_province}
+        initField('select[name="{$stateCountryMap.country}"], select#{$stateCountryMap.country}', false).data('chainSelect', {ldelim}
+          callback: CRM.url('civicrm/ajax/jqState'),
+          target: initField('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}'),
+          placeholder: "{ts escape='js'}Choose country first{/ts}"
+        {rdelim}).on('change', chainSelect).change();
+      {/if}
     {/foreach}
     {literal}
   });