vicb / bsmselect Goto Github PK

I'm changing dinamically with an AJAX request the options from the select where I'm using bsmSelect. When the request is finished I'm calling again bsmSelect() to update its values, but it has no effect.

A better explanation with the code involved is in stackoverflow:

http://stackoverflow.com/questions/8822601/jquery-plugin-bsmselect-doesnt-update-its-values-when-it-is-called-again-and-it

When typing in the select box, bsmSelect will choose an item even if it's not unique.

Using example 1 on:

http://www.suumit.com/projects/bsmSelect/examples/index.html

Highlight the select box (by tabbing to it or clicking it and clicking again on the down arrow).

Now type "honolulu". Note that HongKong is also added to the list. This is wrong only honolulu should be added. An item should be added only if it is unique.

As a second example type "s", and you can add all of the items starting with s. It should add nothing since nothing starts with ssss.

don't know if this is BSM or Rails, but if there is only one associated record, if you click "remove" and save the form, the corresponding record in the join table is NOT removed. works perfectly until you get down to the edge case of only one record left. also works correctly if you remove that record and add another before saving. ideas? tia.

This is a great module, the only problem I have is when the form is within a table. When I try t o submit a form in a table in FireFox 3.6.9, I don't get of the values (cities in your example).

Take out the table tag and it works fine.

Also works fine in IE as well, its just submissions with FireFox.

When selecting an item that is fairly long, the text is displayed in two lines during the animation and then goes to a single line when finished. This occurs with items already in the list too anytime another item is added. The animation looks sloppy as the text is not steady and when going to multiple lines, spills outside the list border.

Hello All,
could anyone tell me how can I change the title in bsmSelect dynamically.

Thanks in advance

dheeban

I'm using the sortable plugin to allow users to pick and sort, but when I re-display a select for editing, it's in natural order. How can I get the sortable plugin to use my order and not natural order after a re-display?

at least in the demo, maybe it just needs updated jquery.ui there

In the addSelectOption function, when the option element has no ID, the code generate one in this form (line 155) :

'bsm' + this.uid + 'option' + this.optIndex

This ID is not unique when there are multiple bsmSelect with different containerClass in the page.

I suggest to add the parent ID as a prefix. The following code works :

if (!$option.attr('id')) { $option.attr('id', $parent.attr('id') + '_bsm' + this.uid + 'option' + this.optIndex); }

I can reorder the items and they are also reordered in the listbox. However, it does not appear to be possible to store this sort order unless it's held in another hidden field. Can this feature be added or can you suggest how to implement such a feature?

I used the reference as given in issue 18.
#18
Came here from http://stackoverflow.com/questions/8822601/jquery-plugin-bsmselect-doesnt-update-its-values-when-it-is-called-again-and-it

I have setup a bsmSelect as below:

 $("#<%=chkLstPlannigProgrammes.ClientId%>").bsmSelect({
                //title: 'Select another Programme...',
                animate: true,
                highlight: true,
                debugMode: true,
                removeLabel: '<strong>X</strong>',
                containerClass: 'bsmContainer',                // Class for container that wraps this widget
                listClass: 'bsmList-custom',                   // Class for the list ($ol)
                listItemClass: 'bsmListItem-custom',           // Class for the <li> list items
                listItemLabelClass: 'bsmListItemLabel-custom', // Class for the label text that appears in list items
                removeClass: 'bsmListItemRemove-custom',       // Class given to the "remove" link
                //extractLabel: function($o) {return $o.html();}
                addItemTarget: 'original'
              });

Initial State

In an event on "Select" link, I get lots of data. I set the selected as below:
var $chkLstPlProgs = $("#<%=chkLstPlannigProgrammes.ClientId%>");
$chkLstPlProgs.val(res.Data.SelectedProgs); // SelectedProgs is array
$chkLstPlProgs.trigger('change');

It looks like this: (state 2)

Which is correct. Now I remove 1 item and add another.
It looks like this:

The issues are:

1. The Title is lost. (Select Programme)
2. "3G on 2G" is not selected in original list. (but is shows to be selected

It means the remove works fine (as it actually deselects the item in list, but selection doesn't add it)

A quick help would be very very appreciated. (As you might know I needed this yesterday:-))

Regards,
Nikhil

Just tried the demo on the iphone simulator and an ipod touch and it appears that all options in the dropdown are still selectable regardless of whether they have already been chosen. It's a shame because this is a great plugin, I may try and fork a version that removes the used options from the select instead?

Plugin works fine using jquery 1.7.1 (used in the examples), but there is one issue with the latest versions (we are using version 2.1.4 in our website):

If you remove an option and re-select it, it doesn't really selects that option again. The HTML looks exactly the same but if you show the dropdown, the item is not selected.

I'm attaching two screen shots here. One is after adding one item for the first time (works as expected) and the other after removing and adding again. You can see on the select element that the option is not really selected.

$(function() {
    $("#option_group").bsmSelect({
        //plugins: [$.bsmSelect.plugins.sortable()] 
        listType: 'ul',
        removeLabel: '',
        containerClass: '',
        selectClass: 'form-control',
        optionDisabledClass: '',
        listClass: 'list-inline',
        listItemClass: 'nicListItem',
        listItemLabelClass: '',
        removeClass: 'nicListItemRemove',
        highlightClass: ''
    });
    
    $('#block-product').on('change', '#option_group', function() {
        var test = $(this).val();
        alert(test);
    });
});

On change event '$(this).val()' display previous value, not the last value.

To reproduce this, try the following:

1. Open the example.html in Chrome
2. Go to example 5 and put 'Paris' behind 'Boston'
3. Submit the example 5 form
4. Go back (via the browser's back-button)
5. The list of selected items now displays 'Singapore' and 'Sydney'

I am using the latest Chrome 6.0.472.63 and can't reproduce this in the latest Firefox.

I know using the back-button is about the meanest thing you can do and also this might be Chrome-related but I thought I'd create an issue here nonetheless.

Hello,

I was having trouble with a select that has the 'optgroup' tag and I've downloaded the code available here on github -> vicb-bsmSelect-v1.0-0-geebd3b5.zip

So I noted why my example was not working. The file on the demo has the same date release and version number, but not the same code:

Header code from example:
/*
* Better Select Multiple - jQuery Plugin
*
* based on Alternate Select Multiple (asmSelect) 1.0.4a beta (http://www.ryancramer.com/projects/asmselect/)
*
* Copyright (c) 2009 by Ryan Cramer - http://www.ryancramer.com
* Copyright (c) 2010 by Victor Berchet - http://www.github.com/vicb
*
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*
* bsmSelect version:
*
* latest:
* - improved custom animations
* - support for optgroup
* - ability to set the default select title via the configuration
* - make the original label point to the new select
* - ability to customize the way list label gets extracted from the option
*
* v1.0 - 2010-07-02:
* - initial release
*
/
Header code from the archive:
/
* Better Select Multiple - jQuery Plugin
*
* based on Alternate Select Multiple (asmSelect) 1.0.4a beta (http://www.ryancramer.com/projects/asmselect/)
*
* Copyright (c) 2009 by Ryan Cramer - http://www.ryancramer.com
* Copyright (c) 2010 by Victor Berchet - http://www.github.com/vicb
*
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*
* bsmSelect version:
* v1.0 - 2010-07-02: initial release
*
*/

So, that is it. When I changed the file, my code worked, and congratulation, it's a nice plugin.

I'm having a trouble when my select has too many items. I tryed the "Select All" from the demo and was ok when I used without the 'optgroup', after I distributed them into groups, I got an message from the browser cause javascript code is too slow. so I have to remove the optgroup, do you have any idea to make it faster?

And Thanks again

I think it would be a great feature to modify the list if I change the value of the original select.

Using this example:
$("#list1, #list2, #list3").bsmSelect({
addItemTarget: 'bottom',
animate: true,
highlight: true,
plugins: [
$.bsmSelect.plugins.sortable({ axis : 'y', opacity : 0.5 }, { listSortableClass : 'bsmListSortableCustom' }),
$.bsmSelect.plugins.compatibility()
]
});

all the elements seem to appear correctly but when the form submits all values are submitted as the first elements values.

you can reorder items by bsmselect but there is probably no way how to force item order when building list without changing select options orders

example

• add few items
• reorder
• submit
• save with order

but there is missing way how to tell bsmselect that you want items with custom/saved order

I have the following javascript in-place to preselect items when a page loads. I'm using web2py and {{=fill_messages_saved}} returns an array [4, 144, 142, 143], which all correspond to values of the options I'd like to select. Unfortunately, the order is always displayed in the order generated in the portion of the html. Is there a way to load each item according to the array of values {{=fill_messages_saved}} as preselected options when a page loads? I can watch each item load individually with the alert() below, but they don't load top down.. they retain the order designated in the html. When I manually select the options, they show up correctly. jQuery(document).ready(function(){ jQuery(function($) { $("#fill_messages").bsmSelect({ animate: true, highlight: true, plugins: [$.bsmSelect.plugins.sortable(), $.bsmSelect.plugins.compatibility()] }); }); $(window).load(function(){ $.each({{=fill_messages_saved}}.toString().split(","), function(i,e){ alert() $("#fill_messages option[value='" + e + "']").prop('selected', true).trigger('change'); }); }); </script>

Hi is there any way to allow users to select up to 3 options and when someone try to select the 4th option to display a js alert message "You can only select up to 3 items" ?

That would be perfect for me.

Best Regards

There is no way to change the color of the text you supply in the title option. I tried CSS but it just gets overridden. It would be nice if you could, then you can match it to the rest of the forms placeholder text.

Using BSMSelect plus the sortable plugin as such:-
$(document).ready(function() {
$('.my_select').bsmSelect({
addItemTarget: 'bottom',
title: 'Select an entry to add',
animate: true,
removeLabel: 'Remove',
highlight: true,
plugins: [
$.bsmSelect.plugins.sortable({ axis : 'y', opacity : 0.5 }, { listSortableClass : 'bsmListSortableCustom' }),
]
});
});
Works fine on IE 9 Firefox etc. but of course my customer is using IE8 which causes this issue. Any ideas how I can resolve this? This is when I have mulitple Selects on the screen with that class :)

Hello,

I am running the following:

• Jquery v1.9.1
• Jquery UI 1.10.0

I currently init the bsm_select method via the following (bonus points in this code for those who want a bootstrap UI version for these lists!!)

bsmSelectConfig = {
    animate: true,
    addItemTarget: 'original',
    removeLabel: '<button class="btn btn-mini btn-danger pull-left"><i class="icon-remove"></i></button>',
    listClass: 'unstyled',
    listItemClass: 'clearfix paddable',
    listItemLabelClass: 'push-left',
    optionDisabledClass: 'muted',
    hideWhenAdded: true

}
$(".bsm_selectable").bsmSelect(bsmSelectConfig);

Example select box:

<div class="control-group select required"><label class="select required control-label" for="case_ref_goal_ids">    <abbr title="required">*</abbr> Programmatic Goals</label><div class="controls"><input name="case[ref_goal_ids][]" type="hidden" value="" /><select class="select required bsm_selectable" id="case_ref_goal_ids" multiple="multiple" name="case[ref_goal_ids][]" size="5" title="select subject areas"><option value="5">Health Promotion and Disease Prevention</option><option value="1" selected="selected">Medical Knowledge Base</option><option value="4">Problem-solving Skills</option><option value="3">Professional and Interpersonal Skills</option></select></div></div>

Everything is working appropriately, except the following:

• Animations are not animating. It is simply executing a show/hide for the elements to appear/disapear
• addItemTarget = 'original' appends items to the bottom of the list, rather than in the order they exist in the select list. This behavior is also present with your example #5 in the docs which includes the 'original' value used as addItemTarget.

Note: I also applied the patch detailed in #28 to no avail.

Cheers, and thanks for a great plugin.

Hi, on the demo page at the example2 if you add a city in the input field and click the add button it works ok but also submit empty values which is wrong how can we fix this ???

Thanks

I have this select:

<select id="myselect" name="test" multiple="multiple">
    <option value="40">A</option>
    <option value="75">B</option>
    <option value="41">C</option>
    <option selected="selected" data-bsm-order="1" value="29">D</option>
    <option value="39">E</option>
    <option value="23">F</option>
    <option selected="selected" data-bsm-order="0" value="44">G</option>
    <option value="62">H</option>
    <option value="38">I</option>
    <option value="61">J</option>
</select>

And the Javascript:

jQuery("#myselect").bsmSelect({
    addItemTarget: 'original',
    plugins: [jQuery.bsmSelect.plugins.sortable(), jQuery.bsmSelect.plugins.compatibility()]
});

The select is showed in the correct order. Then I change the order and after I add an option:

var option = jQuery("<option>", { text: 'NEW', selected: "selected"});
    jQuery("#myselect").append(option).change();

But the order of the options is changed to the initial and not to the last order.

I really liked this UI component, but it does not seem to function when inside of a table. The display is fine, but submission seems to skip the field from the POST.

I'm using normalize.css stylesheet, through html5boilerplate. The problem arise in Firefox (tested in Iceweasel 4.0.1), but at least no in Chrome and Opera.

In normalize.css the following rule is defined: html { overflow-y: scroll }. In firefox, it produces that when list items are moved, their top CSS property gets very low values (-700px, for example), making them appear on the top of the page and making them disappear from user visual field.

To solve this, you can define overflow-y: auto in .bsmList.

In my scenario I have a single list of presenters (pulled from a database). On my form I have multiple fields the presenters can be assigned to. For example, I have a list of sponsors, a list of chairs, a list of faculty, a list of moderators, etc.

Form looks something like this:

dropdown: Select a presenter
multiselect; John, Sam, Dave

dropdown: Select a presenter
multiselect: Sally, Sue, Bill

If I pick a name from the first dropdown list, I need it to appear in the first multilist, AND not only be disabled in the first dropdown list, but all lists on the page. So to say it another way, a presenter can only be on one list (sponsor, chair, etc.).

How can I keep all the dropdowns in sync?

When selecting items from the select-options (options are default order:bottom), list items are prepended, not appended.

I fixed this for me and changed the >case 'top':< to >case 'bottom':< in line 242 jquery.bsmselect.js

On line 42, the jQuery data('bsm-order') return value is strictly checked against null instead of undefined.

The result is that the data-bsm-order attribute is never set.

Per the jQuery API for the .data(key) method:

If no data at all was set on that element, undefined is returned.

Suggested fix:

if (typeof $(o).data('bsm-order') === 'undefined') {...

Thank you,

Frank

example:
$("#attributes").bsmSelect({
addItemTarget: 'bottom',
animate: true,
highlight: true,
plugins: [
$.bsmSelect.plugins.sortable({ axis : 'y', opacity : 0.5 }, { listSortableClass : 'bsmListSortableCustom' }) //at this line when ECMA strict mode is used
]
});

Simple question really, I've seen no update since 2016 and so I'm worried any changes to jQuery etc that cause issues will never be fixed.