diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js
index 21e822a..34b6e12 100644
--- a/chosen/chosen.jquery.js
+++ b/chosen/chosen.jquery.js
@@ -43,7 +43,8 @@
};
Chosen.prototype.set_up_html = function() {
var container_div, dd_top, dd_width, sf_width;
- this.container_id = this.form_field.id + "_chzn";
+ this.container_id = this.form_field.id.length ? this.form_field.id : this.generate_field_id();
+ this.container_id += "_chzn";
this.f_width = this.form_field_jq.width();
this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;
container_div = $("
", {
@@ -199,7 +200,7 @@
return this.search_field.focus();
};
Chosen.prototype.test_active_click = function(evt) {
- if ($(evt.target).parents('#' + this.container.id).length) {
+ if ($(evt.target).parents('#' + this.container_id).length) {
return this.active_field = true;
} else {
return this.close_field();
@@ -238,7 +239,7 @@
};
Chosen.prototype.result_add_group = function(group) {
if (!group.disabled) {
- group.dom_id = this.form_field.id + "chzn_g_" + group.array_index;
+ group.dom_id = this.container_id + "_g_" + group.array_index;
return '' + $("").text(group.label).html() + '';
} else {
return "";
@@ -247,7 +248,7 @@
Chosen.prototype.result_add_option = function(option) {
var classes;
if (!option.disabled) {
- option.dom_id = this.form_field.id + "chzn_o_" + option.array_index;
+ option.dom_id = this.container_id + "_o_" + option.array_index;
classes = option.selected && this.is_multiple ? [] : ["active-result"];
if (option.selected) {
classes.push("result-selected");
@@ -374,7 +375,7 @@
};
Chosen.prototype.choice_build = function(item) {
var choice_id, link;
- choice_id = this.form_field.id + "_chzn_c_" + item.array_index;
+ choice_id = this.container_id + "_c_" + item.array_index;
this.choices += 1;
this.search_container.before('' + item.text + '');
link = $('#' + choice_id).find("a").first();
@@ -434,7 +435,7 @@
result_data = this.results_data[pos];
result_data.selected = false;
this.form_field.options[result_data.options_index].selected = false;
- result = $("#" + this.form_field.id + "chzn_o_" + pos);
+ result = $("#" + this.container_id + "_o_" + pos);
result.removeClass("result-selected").addClass("active-result").show();
this.result_clear_highlight();
this.winnow_results();
@@ -677,6 +678,26 @@
});
}
};
+ Chosen.prototype.generate_field_id = function() {
+ var new_id;
+ new_id = this.generate_random_id();
+ this.form_field.id = new_id;
+ return new_id;
+ };
+ Chosen.prototype.generate_random_id = function() {
+ var string;
+ string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char();
+ while ($("#" + string).length > 0) {
+ string += this.generate_random_char();
+ }
+ return string;
+ };
+ Chosen.prototype.generate_random_char = function() {
+ var char, chars, random;
+ chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+ random = Math.floor(Math.random() * chars.length);
+ return char = chars.substring(random, random + 1);
+ };
return Chosen;
})();
get_side_border_padding = function(elmt) {
diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
index 0d6596a..6098a38 100644
--- a/coffee/chosen.jquery.coffee
+++ b/coffee/chosen.jquery.coffee
@@ -43,7 +43,8 @@ class Chosen
@choices = 0
set_up_html: ->
- @container_id = @form_field.id + "_chzn"
+ @container_id = if @form_field.id.length then @form_field.id else this.generate_field_id()
+ @container_id += "_chzn"
@f_width = @form_field_jq.width()
@@ -170,7 +171,7 @@ class Chosen
test_active_click: (evt) ->
- if $(evt.target).parents('#' + @container.id).length
+ if $(evt.target).parents('#' + @container_id).length
@active_field = true
else
this.close_field()
@@ -206,14 +207,14 @@ class Chosen
result_add_group: (group) ->
if not group.disabled
- group.dom_id = @form_field.id + "chzn_g_" + group.array_index
+ group.dom_id = @container_id + "_g_" + group.array_index
'' + $("").text(group.label).html() + ''
else
""
result_add_option: (option) ->
if not option.disabled
- option.dom_id = @form_field.id + "chzn_o_" + option.array_index
+ option.dom_id = @container_id + "_o_" + option.array_index
classes = if option.selected and @is_multiple then [] else ["active-result"]
classes.push "result-selected" if option.selected
@@ -318,7 +319,7 @@ class Chosen
this.results_show()
choice_build: (item) ->
- choice_id = @form_field.id + "_chzn_c_" + item.array_index
+ choice_id = @container_id + "_c_" + item.array_index
@choices += 1
@search_container.before '' + item.text + ''
link = $('#' + choice_id).find("a").first()
@@ -380,7 +381,7 @@ class Chosen
result_data.selected = false
@form_field.options[result_data.options_index].selected = false
- result = $("#" + @form_field.id + "chzn_o_" + pos)
+ result = $("#" + @container_id + "_o_" + pos)
result.removeClass("result-selected").addClass("active-result").show()
this.result_clear_highlight()
@@ -577,6 +578,22 @@ class Chosen
dd_top = @container.height()
@dropdown.css({"top": dd_top + "px"})
+
+ generate_field_id: ->
+ new_id = this.generate_random_id()
+ @form_field.id = new_id
+ new_id
+
+ generate_random_id: ->
+ string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
+ while $("#" + string).length > 0
+ string += this.generate_random_char()
+ string
+
+ generate_random_char: ->
+ chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+ random = Math.floor(Math.random() * chars.length)
+ char = chars.substring random, random+1
get_side_border_padding = (elmt) ->
side_border_padding = elmt.outerWidth() - elmt.width()
diff --git a/example.jquery.html b/example.jquery.html
index c727c96..8117d61 100644
--- a/example.jquery.html
+++ b/example.jquery.html
@@ -306,7 +306,7 @@
Into This
-
Into This
-
+
@@ -1060,7 +1060,7 @@
Single Select with Groups
-
+
Multiple Select with Groups
-
+