Skip to content

Loading…

Disabled Items / Preload Items #476

Closed
wants to merge 2 commits into from

3 participants

@todd-givainc

With the following changes, Giva, Inc. ( http://givainc.com/ ) has added:

  • Ability to preload data into the multiple select field.
  • Ability to have a disabled item in the select field (from both preloaded data and selected data)

JSFiddle Example:
http://jsfiddle.net/ehBU4/4/

todd-givainc added some commits
@todd-givainc todd-givainc preloadSelections patch
Added the ability to preload default items in select2 multiple.
d865ac3
@todd-givainc todd-givainc preloadSelections functionality
Added the ability to disable selections.
4d6f1a4
@dswitzer

+1

@todd-givainc

@ivaynberg - Any feedback on this? Thanks.

@todd-givainc

Closing, removing the preload change as you can do the same thing with 'data:' - Will modify it the disabled options to work with the existing data function. Will submit a new pull requests when I've completed this.

@ivaynberg

instead of "disabled" lets call it "locked", disabled is meant for items that show up in the list but cannot be selected - like in the option disabled='true' attribute.

@todd-givainc

I can certainly change that. After looking things over, it seems that preload is still relevant because data doesn't kick off for a multi-select.

@ivaynberg

preload should be handled by initSelection...

@todd-givainc

Then, there's a bug. If you consider the following:
http://jsfiddle.net/webRat/kZb8U/1/

It fails to load anything. If I comment out line 1944 & 1954 in the main select2.js file, this preloads just fine.

@ivaynberg

i dont think thats a bug. your input field doesnt specify any value so select2 doesnt think there is anything to initialize... if you add value="0" attribute to the input tag it works fine.

for your usecase you can call data after your init select2

@todd-givainc

My input field shouldn't have any value because I'm attempting to 'preload' data.

You pointed me in the direction of initSelection (note, 3 comments above):
"preload should be handled by initSelection..."

And, I attempted that which is why I said it's a bug / issue. If preloading data should indeed be handled by initSelection, then initSelection needs to accept the fact of the possibility that value is empty.

I do acknowledge that $(element).select2("data", preload_data) does work. I'll go that route and make a pull for the locked items instead.

@ivaynberg

why would the control have preloaded data if it has no values for such data specified in the tag?

when you want to preselect data in a select you specify the options as selected. same idea with the input tag, set the value to the ids of the items that should be preselected.

@todd-givainc

My thought was that the initSelection should populate the hidden form field because I'm using it to preload data and preload the selections.

Coworker clarified your thoughts a little via IM and actually gave me a reason why we'd want the hidden form field populated manually (in case for whatever reason, select2 doesn't initialize properly, at least the form will still work)

For clarity's sake, @ivaynberg is talking about this:
http://jsfiddle.net/kZb8U/5/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 8, 2012
  1. @todd-givainc

    preloadSelections patch

    todd-givainc committed
    Added the ability to preload default items in select2 multiple.
  2. @todd-givainc

    preloadSelections functionality

    todd-givainc committed
    Added the ability to disable selections.
Showing with 64 additions and 20 deletions.
  1. +5 −0 select2.css
  2. +59 −20 select2.js
View
5 select2.css
@@ -385,6 +385,11 @@ disabled look for already selected choices in the results dropdown
position: relative;
}
+/* Giva Added */
+.select2-preloadDisabled {
+ padding: 3px 5px 3px 5px !important;
+}
+
.select2-container-multi .select2-choices {
min-height: 26px;
}
View
79 select2.js
@@ -660,6 +660,12 @@ the specific language governing permissions and limitations under the Apache Lic
this.monitorSource();
}
+ // GIVA added
+ if ($.isFunction(this.preloadSelections) && (opts.preloadSelected !== undefined && opts.preloadSelected.length > 0)) {
+ this.preloadSelections( opts.preloadSelected );
+ this.monitorSource();
+ }
+
if (opts.element.is(":disabled") || opts.element.is("[readonly='readonly']")) this.disable();
},
@@ -688,7 +694,8 @@ the specific language governing permissions and limitations under the Apache Lic
if (select) {
// these options are not allowed when attached to a select because they are picked up off the element itself
- $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function () {
+ // GIVA - Added preloadSelected
+ $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "preloadSelected", "initSelection", "data", "tags"], function () {
if (this in opts) {
throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a <select> element.");
}
@@ -1815,6 +1822,15 @@ the specific language governing permissions and limitations under the Apache Lic
return opts;
},
+ // GIVA added
+ preloadSelections: function(data) {
+ var self = this;
+ var opts = self.opts;
+ if(data.length > 0){
+ self.updateSelection(data);
+ }
+ },
+
// multi
initContainer: function () {
@@ -1838,7 +1854,8 @@ the specific language governing permissions and limitations under the Apache Lic
return;
}
- choices = selection.find(".select2-search-choice");
+ // GIVA - added :not(.select2-preloadDisabled)
+ choices = selection.find(".select2-search-choice:not(.select2-preloadDisabled)");
if (choices.length > 0) {
choices.last().addClass("select2-search-choice-focus");
}
@@ -2070,37 +2087,56 @@ the specific language governing permissions and limitations under the Apache Lic
},
// multi
+ // GIVA added
+ clear: function() {
+ this.opts.element.val("");
+ this.selection.find("span").empty();
+ this.selection.removeData("select2-data");
+ },
+
+ // multi
addSelectedChoice: function (data) {
- var choice=$(
+ // GIVA modified added 3 vars.
+ var enableChoice = !data.disabled,
+ enabledItem = $(
"<li class='select2-search-choice'>" +
" <div></div>" +
" <a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'></a>" +
"</li>"),
+ disabledItem = $(
+ "<li class='select2-search-choice select2-preloadDisabled'>" +
+ "<div></div>" +
+ "</li>");
+ var choice = enableChoice ? enabledItem : disabledItem,
id = this.id(data),
val = this.getVal(),
formatted;
-
+
formatted=this.opts.formatSelection(data, choice.find("div"));
if (formatted != undefined) {
choice.find("div").replaceWith("<div>"+this.opts.escapeMarkup(formatted)+"</div>");
}
- choice.find(".select2-search-choice-close")
- .bind("mousedown", killEvent)
- .bind("click dblclick", this.bind(function (e) {
- if (!this.enabled) return;
- $(e.target).closest(".select2-search-choice").fadeOut('fast', this.bind(function(){
- this.unselect($(e.target));
- this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
- this.close();
- this.focusSearch();
- })).dequeue();
- killEvent(e);
- })).bind("focus", this.bind(function () {
- if (!this.enabled) return;
- this.container.addClass("select2-container-active");
- this.dropdown.addClass("select2-drop-active");
- }));
+ // GIVA modified - added if conditional
+ if(enableChoice){
+ choice.find(".select2-search-choice-close")
+ .bind("mousedown", killEvent)
+ .bind("click dblclick", this.bind(function (e) {
+ if (!this.enabled) return;
+
+ $(e.target).closest(".select2-search-choice").fadeOut('fast', this.bind(function(){
+ this.unselect($(e.target));
+ this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+ this.close();
+ this.focusSearch();
+ })).dequeue();
+ killEvent(e);
+ })).bind("focus", this.bind(function () {
+ if (!this.enabled) return;
+ this.container.addClass("select2-container-active");
+ this.dropdown.addClass("select2-drop-active");
+ }));
+ }
choice.data("select2-data", data);
choice.insertBefore(this.searchContainer);
@@ -2369,6 +2405,9 @@ the specific language governing permissions and limitations under the Apache Lic
formatSelection: function (data, container) {
return data ? data.text : undefined;
},
+ // GIVA added
+ preloadSelected: {},
+ preloadSelections: function() { return "Preloading..."; },
formatResultCssClass: function(data) {return undefined;},
formatNoMatches: function () { return "No matches found"; },
formatInputTooShort: function (input, min) { return "Please enter " + (min - input.length) + " more characters"; },
Something went wrong with that request. Please try again.