Skip to content
This repository was archived by the owner on Mar 4, 2019. It is now read-only.

Commit 048a721

Browse files
sajjadzaheersajjadzaheer
committed
onchange event of select is moved to Druapl.behaviors attach:
throbber and progress message options added
1 parent 835aa7b commit 048a721

File tree

3 files changed

+104
-68
lines changed

3 files changed

+104
-68
lines changed

‎ajax_chain_select.js‎

Lines changed: 76 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,82 @@
33
* Javascript code for Ajax Chain Select module.
44
*/
55

6-
function f3region_get_element(el, $previous_level) {
7-
var previous_level_id = el.value,
8-
url = Drupal.settings.basePath + 'ajax_chain_select/callback/',
9-
$formitem = jQuery(el).closest('.form-item'),
10-
$nextall = {},
11-
$nextel = null,
12-
$dc = null,
13-
$dch = null,
14-
$next_level = $previous_level + 1;
15-
16-
$nextall = $formitem.nextAll();
17-
$nextel = jQuery($nextall[0]);
18-
19-
for (var $i = 1; $i < $nextall.length; $i++) {
20-
var $next_ptr = jQuery($nextall[$i]);
21-
if ($next_ptr.hasClass('form-type-textfield')) {
22-
continue;
23-
}
24-
else {
25-
$next_ptr.addClass('form-disabled').find('select').attr('disabled', 'disabled');
26-
if ($next_ptr.find('select').find('option') != 'undefined') {
27-
$next_ptr.find('select').find('option:eq(0)').attr('selected', 'selected');
28-
}
29-
}
30-
}
6+
(function($) {
7+
Drupal.behaviors.AjaxChainSelect = {
8+
attach: function(context, settings) {
9+
$("select.ajax-chain-select-select", context).change(function() {
10+
var current_el = this,
11+
parent_fieldset = $(current_el).parents('fieldset'),
12+
current_level = $(current_el).attr('level'),
13+
fieldset_settings = settings['ajax_chain_select'][$(parent_fieldset).attr('id')],
14+
current_level_id = this.value,
15+
url = Drupal.settings.basePath + 'ajax_chain_select/callback/',
16+
formitem = $(current_el).closest('.form-item'),
17+
next_all = formitem.nextAll(),
18+
next_el = $(next_all[0]),
19+
dc = null,
20+
dch = null,
21+
next_level = (current_level * 1) + 1;
3122

32-
$dc = jQuery(el).closest('fieldset').find('.form-type-textfield input.acs-dc').val();
33-
$dch = jQuery(el).closest('fieldset').find('.form-type-textfield input.acs-dch').val();
23+
for (var $i = 1; $i < next_all.length; $i++) {
24+
var next_ptr = $(next_all[$i]);
25+
if (next_ptr.hasClass('form-type-textfield')) {
26+
continue;
27+
}
28+
else {
29+
//Disabling all next select elements and setting them to their first value.
30+
next_ptr.addClass('form-disabled').find('select').attr('disabled', 'disabled');
31+
if (next_ptr.find('select').find('option') !== undefined) {
32+
next_ptr.find('select').find('option:eq(0)').attr('selected', 'selected');
33+
}
34+
}
35+
}
3436

35-
if (previous_level_id == "" || isNaN(Number(previous_level_id))) {
36-
$nextel.addClass('form-disabled').find('select').attr('disabled', 'disabled');
37-
if ($nextel.find('select').find('option') != 'undefined') {
38-
$nextel.find('select').find('option:eq(0)').attr('selected', 'selected');
39-
}
40-
}
41-
else {
42-
jQuery.getJSON(url + $next_level + '/' + previous_level_id + '/' + $dc + '/' + $dch, function(response) {
43-
if (response.has_data == '1') {
44-
var $temp = $nextel.find('select').find('option:eq(0)');
45-
$nextel.find('select').html($temp);
46-
$nextel.find('select').append(response.options);
47-
$nextel.removeClass('form-disabled').find('select').removeAttr('disabled');
48-
}
49-
else {
50-
$nextel.addClass('form-disabled').find('select').attr('disabled', 'disabled');
51-
if ($nextel.find('select').find('option') != 'undefined') {
52-
$nextel.find('select').find('option:eq(0)').attr('selected', 'selected');
37+
dc = $(parent_fieldset).find('.form-type-textfield input.acs-dc').val();
38+
dch = $(parent_fieldset).find('.form-type-textfield input.acs-dch').val();
39+
40+
if (current_level_id === "" || isNaN(Number(current_level_id))) {
41+
next_el.addClass('form-disabled').find('select').attr('disabled', 'disabled');
42+
if (next_el.find('select').find('option') !== undefined) {
43+
next_el.find('select').find('option:eq(0)').attr('selected', 'selected');
44+
}
45+
}
46+
else {
47+
48+
$(current_el).addClass('progress-disabled').attr('disabled', true);
49+
50+
if (fieldset_settings.show_throbber) {
51+
var progress_el = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
52+
if (fieldset_settings.progress_message) {
53+
$('.throbber', progress_el).after('<div class="message">' + fieldset_settings.progress_message + '</div>');
54+
}
55+
$(current_el).after(progress_el);
56+
}
57+
58+
$.getJSON(url + next_level + '/' + current_level_id + '/' + dc + '/' + dch, function(response) {
59+
60+
$(current_el).removeClass('progress-disabled').removeAttr('disabled');
61+
62+
if (fieldset_settings.show_throbber) {
63+
$(progress_el).remove();
64+
}
65+
66+
if (response.has_data === '1') {
67+
var temp = next_el.find('select').find('option:eq(0)');
68+
next_el.find('select').html(temp);
69+
next_el.find('select').append(response.options);
70+
next_el.removeClass('form-disabled').find('select').removeAttr('disabled');
71+
}
72+
else {
73+
next_el.addClass('form-disabled').find('select').attr('disabled', 'disabled');
74+
if (next_el.find('select').find('option') !== undefined) {
75+
next_el.find('select').find('option:eq(0)').attr('selected', 'selected');
76+
}
77+
}
78+
});
5379
}
54-
}
55-
});
56-
}
57-
}
80+
});
81+
}
82+
};
83+
84+
})(jQuery);

‎ajax_chain_select.module‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,16 @@ function ajax_chain_select_element_info() {
3535
* Process callback for ac_select.
3636
*/
3737
function ajax_chain_select_element_ac_select($element, &$form_state, $form) {
38-
drupal_add_js(drupal_get_path('module', 'ajax_chain_select') . '/ajax_chain_select.js');
3938

4039
$element_name = $element['#name'];
4140
$config = !empty($element['#config']) ? $element['#config'] : array();
4241
$levels = !empty($element['#levels']) ? $element['#levels'] : 1;
4342
$required_levels = !empty($element['#required_levels']) ? $element['#required_levels'] : 0;
4443
$data_callback = !empty($element['#data_callback']) ? $element['#data_callback'] : '';
44+
$settings = array(
45+
'show_throbber' => isset($element['#show_throbber']) ? $element['#show_throbber'] : TRUE,
46+
'progress_message' => isset($element['#progress_message']) ? $element['#progress_message'] : t('Please wait..'),
47+
);
4548

4649
if (!function_exists($data_callback)) {
4750
return array('#markup' => 'Data callback not defined');
@@ -54,18 +57,26 @@ function ajax_chain_select_element_ac_select($element, &$form_state, $form) {
5457
$region_element = array(
5558
'#array_parents' => array(),
5659
'#tree' => FALSE,
60+
'#attached' => array(
61+
'js' => array(drupal_get_path('module', 'ajax_chain_select') . '/ajax_chain_select.js'),
62+
),
5763
);
5864

5965
$region_element[$element_name] = array(
6066
'#type' => 'fieldset',
6167
'#tree' => TRUE,
68+
'#id' => !empty($element['#id']) ? $element['#id'] : drupal_html_id('edit-' . implode('-', $element['#parents'])),
6269
'#title' => !empty($element['#title']) ? $element['#title'] : array(),
63-
'#array_parents' => array(),
64-
'#attributes' => array('class' => array('f3region-fieldset')),
70+
'#array_parents' => array(),
6571
'#element_validate' => array('ajax_chain_select_custom_validate'),
6672
'#states' => !empty($element['#states']) ? $element['#states'] : array(),
6773
'#levels' => $levels,
6874
'#data_callback' => $data_callback,
75+
);
76+
77+
$region_element[$element_name]['#attached']['js'][] = array(
78+
'type' => 'setting',
79+
'data' => array('ajax_chain_select' => array($region_element[$element_name]['#id'] => $settings)),
6980
);
7081

7182
for ($level = 0; $level < $levels; $level++) {
@@ -107,14 +118,11 @@ function ajax_chain_select_element_ac_select($element, &$form_state, $form) {
107118
'#default_value' => !empty($config[$level]['#default_value']) ? $config[$level]['#default_value'] : NULL,
108119
'#title_display' => !empty($config[$level]['#title_display']) ? $config[$level]['#title_display'] : 'before',
109120
'#disabled' => (empty($data)) ? TRUE : FALSE,
110-
);
111-
112-
if ($level != $levels - 1) {
113-
/* Instead of AHAH, we are using direct call to data function,
114-
* this makes the call much lighter and faster as compared to AHAH,
115-
* that submits the complete form data. */
116-
$region_element[$element_name]['level_' . $level]['#attributes']['onchange'] = "f3region_get_element(this, $level)";
117-
$region_element[$element_name]['level_' . $level]['#attributes']['class'] = array('ajax-chain-select-select');
121+
);
122+
123+
if ($level != $levels - 1) {
124+
$region_element[$element_name]['level_' . $level]['#attributes']['level'] = $level;
125+
$region_element[$element_name]['level_' . $level]['#attributes']['class'] = array('ajax-chain-select-select', 'ajax-progress-throbber');
118126
}
119127
}
120128

@@ -168,7 +176,7 @@ function ajax_chain_select_custom_validate(&$element, &$form_state, $form) {
168176
* Callback function for fetching data for next step of ac_select.
169177
*/
170178
function ajax_chain_select_element_callback($level = 1, $previous_level_key = 0, $dc = NULL, $dch = NULL) {
171-
$has_data = 0;
179+
$has_data = '0';
172180
$data_callback = '';
173181
$options = array();
174182

@@ -181,7 +189,7 @@ function ajax_chain_select_element_callback($level = 1, $previous_level_key = 0,
181189
}
182190

183191
if (!empty($data)) {
184-
$has_data = 1;
192+
$has_data = '1';
185193
foreach ($data as $key => $value) {
186194
$options .= '<option value="' . $key . '">' . $value . '</option>';
187195
}

‎ajax_chain_select_sample/ajax_chain_select_sample.module‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,11 @@ function ajax_chain_select_sample_sample_form($form, &$form_state) {
5252
'#title' => 'Region',
5353
'#config' => $acs_config,
5454
'#levels' => 4,
55-
'#required_levels' => 3,
56-
'#bypass_validation' => FALSE,
57-
'#data_callback' => 'ajax_chain_select_sample',
58-
);
55+
'#required_levels' => 3,
56+
'#show_throbber' => TRUE,
57+
'#progress_message' => t('Please wait..'),
58+
'#data_callback' => 'ajax_chain_select_sample_fetchdata',
59+
);
5960

6061
$form['submit'] = array(
6162
'#type' => 'submit',
@@ -79,7 +80,7 @@ function ajax_chain_select_sample_sample_form_submit($form, &$form_state) {
7980
/**
8081
* Data callback implementation.
8182
*/
82-
function ajax_chain_select_sample($level = 0, $previous_level_key = 0) {
83+
function ajax_chain_select_sample_fetchdata($level = 0, $previous_level_key = 0) {
8384

8485
$data = array();
8586

@@ -210,4 +211,4 @@ function ajax_chain_select_sample_get_locality_by_city($city_id) {
210211
}
211212

212213
return $localities;
213-
}
214+
}

0 commit comments

Comments
 (0)