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 - @@ -807,7 +807,7 @@
    Into This - @@ -1060,7 +1060,7 @@
    Single Select with Groups - @@ -1114,7 +1114,7 @@
    Multiple Select with Groups - @@ -1173,7 +1173,7 @@

    Chosen automatically highlights selected options and removes disabled options.

    Single Select - @@ -1187,7 +1187,7 @@
    Multiple Select with Groups -