istvan-ujjmeszaros/bootstrap-duallistbox

Bootstrap Dual Listbox

bootstrap-duallistbox's Issues

If a control is already duallistbox-ed, another call shouldn't duplicate it

I ran into an issue where I was loading a select control dynamically (using ajax) for a popup. I ran my init function once the popup was loaded:

function initDualbox() {
    $("select.dualbox").each(function () {
        $(this).bootstrapDualListbox({
            nonselectedlistlabel: 'Available',
            selectedlistlabel: 'Selected',
            moveonselect: false
        });
    });
}

The problem is, every other dual list box on the page (that was already rendered) duplicated! Every time the popup was called, another copy of that listbox was added to the page!

It would be great to have the plugin update the current rendering of the duallistbox (if it was called with different options) rather than creating a new copy.

At the very least, a workaround with some sort of html attribute would be useful, such that I could say "if this listbox was already initialized, don't do it again"

Retaining scroll position in Non-selected (left) listbox when many elements

A prior issue addressed retaining scroll position when changing the filter.

Because there are many items to choose from (not alphabetically, but functionally, sorted) we needed to retain the scroll position after the element clicked has been moved. My apologies for not completing a formal pull request.

  function move(dualListbox) {
    var scrollPos = dualListbox.elements.select1.scrollTop();    //  new line
...
    refreshSelects(dualListbox);
    dualListbox.elements.select1.scrollTop(scrollPos);    //  new line
    triggerChangeEvent(dualListbox);
    sortOptions(dualListbox.elements.select2);
  }

method to sort on Selected List

It would be valuable to be able to sort on the "selected" list

Does Not Work With Bootsrap 3.3.4

Using IE11 and Bootstrap 3.3.4 the tool does not work at all. See the following JSFiddle page for an example. This is a simple list with 5 items and the exact script from demo 2. Issues include:

1. The first list item is automatically added to the selected items
2. The selected items list will only allow one item
3. The select all (double arrows) does not work
4. Moving multiple selected items does not work, it only moves the last item. Possibly due to the same issue as 2.

https://jsfiddle.net/ddelella/ps11r1jf/1/

Keep "optgroup" grouping

It would be a nice feature to keep optgroups when the list is rendered and making it possible to select an entire optgroup.

Support for Safari in iPad (iOS) and chrome in Android

Dualistbox does not display properly in Safari for iPad (iOS?) and Chrome browser for Android due to the lack of support of select multiple:

http://stackoverflow.com/questions/5376507/safari-mobile-multi-line-select-aka-gwt-multi-line-listbox

Duallistbox for materializecss

Hello! I used to add this plugin with bootstrap (i really love this plugin). Is there a way to use the plugin with materializecss?

Double Arrow Not Working After DualListBox is re-initialized

Hi, I encountered an issue. I programmatically added options to the duallistbox. Everything working as expected. I then re-initialized it using

duallist.html('');

and re-populated the options. I then filtered the list and clicked the double arrow. This time, all the entries (included the filtered ones) were moved to the right column. This seems to be a bug? The double arrow was working as expected until I re-initialized the duallistbox.

to hide infoText and hide Buttons

1. i found no settings to make infoText(Empty) to be hidden, event i set it to false.
   $('.bootstrap-duallistbox-container .info').css('display', 'none');
2. i found no settings to make buttons to be hidden.
   $('.bootstrap-duallistbox-container .buttons').css('display', 'none');

shall we provide a setting config about the order between selected and Not selected options?

shall we provide a setting config about the order between box1 and box2?
in our working enviroment, we want the Not Selected options appear right and the selected options appear left, so i must change the source code in jquery.bootstrap-duallistbox.js.
if there is a config about this, then it will be better.

issue after deleting filter

hi,

after filtering and clicking on the show all button the selected value(s) won't move to the other column. after that it works fine.

awesome plugin by the way, keep up the good work :)

when performed with large bills, and 40,000 to 50,000, the browser fails.

Filter box cancel button content not consistent.

In line 59, clear1 and clear2 button the content should both be either x or X, right now clear1's button content is X while clear2's is x.

Unable to view demo as per what is shown on site

I downloaded the demo from github as well as the download link.
When I view the demo, I am not able to see it as viewed on the webpage. Please guide me as to where I am wrong.
None of the icons appear and doesn't appear bootstrap enabled in demo.

how can i get the values of non selected items in bootstrap dual box?

Add "reverse" parameter to indicate whether selected values are positioned on the right or on the left

Add "reverse" parameter to indicate whether selected values are positioned on the right or on the left

Avoid wrapping this in a jQuery object multiple times

Taking this piece of code:

...

elements.originalselect.find('option').each(function() {
    if ($(this).prop('selected')) {
        selectedelements++;
        elements.select2.append($(this).clone(true).prop('selected', $(this).data('_selected')));
    }
    else {
        elements.select1.append($(this).clone(true).prop('selected', $(this).data('_selected')));
    }
});

...

it can be refactored as this:

...

elements.originalselect.find('option').each(function() {
    var $this = $(this);

    if ($this.prop('selected')) {
        selectedelements++;
        elements.select2.append($this.clone(true).prop('selected', $this.data('_selected')));
    }
    else {
        elements.select1.append($this.clone(true).prop('selected', $this.data('_selected')));
    }
});

...

Thus, it avoids wrapping the context in a jQuery object multiple times, thus improving perfs. It could be done in a lot of places in the code.

By the way, we could also use the current item iterated on (passed as parameter in the each function) instead of using the this context. It is far more readable and you know directly which context you're working on.

What do you think @istvan-ujjmeszaros?

Filter box cancel button should have type of button.

The button type attribute of clear1 and clear2 should be set to type="button" to prevent unnecessary form submission.

Single Listbox

Is there any method so that I can use only one Listbox?
Wanted to use this component, precisely because of his search box that works very well within Listbox, but could not make him stop creating the second listbox.
Is there any way to use only the search? Or disable the creation of the second Listbox?

submit when changed

Hi

Can I make it submit the form when an item is appended without having to press the submit button?

List in bootstrap modal

It seems the duallist is not loading options when put inside of a bootstrap modal.

Javascript dies if select box has no class.

Uncaught TypeError: Cannot call method 'match' of undefined on line 107 of the js file. Happens when original select input has no class attribute.

var c = elements.originalselect.attr('class').match(/\bspan[1-9][0-2]?/);
if (!!c) {
    container.addClass(c.toString());
}

instead it should check if the attribute exist first before attempting to add/move the classes.

var classAttr = elements.originalselect.attr('class');
if (typeof classAttr !== 'undefined' && classAttr !== false) {
    // ...
}

When I put more the 500 items in the list browser get choked

Disabled dual list

Hi,
Thank you for creating this library, it's really helpful.
I was wondering how can disable a dual list ? after:

$(".dual-list").bootstrapDualListbox();

Accent sensitive

Maybe we should strip accents before applying the filter?

infotextfiltered isn't updated in the documentation

In documentation is so :

infotextfiltered : col-md- class="label label-warning" this is the info text when not all of the options are visible.

When really the right is :

infotextfiltered : span class="label label-warning"

You should change the documentation or the method.

Need new methods to get the selectable and selected lists of options

Create custom filters

How can i create custom filters for each list?

For example, i need a select with 2 options that should filter the items in the left column. Also im going to need another select filter for the right column.

Is there any way that i can filter using data-something tags? Any other way?

Hope anyone can help!
Thanks in advance.
Damian

When using filter it would always moves to top

I am using Dual list box in one of my project.
I came across a problem as, I am using filter option because its very useful and users love it. But when this feature is enabled when ever i select any option it always moves to top.

As i have about 500 options in my selection area and i want to select option no 340 and 345 but when i clicked the 340 option it moved me to the top and then i have to scroll back down looking for the option 345.
This is bit annoying for the user as he might get lost from where he was selecting items. Mostly it's annoying with large set of options.
So what i did here is i changed the filter() function a bit.

Orignal

function filter(dualListbox, selectIndex) {
if (!dualListbox.settings.showFilterInputs) {
  return;
}
saveSelections(dualListbox, selectIndex);
dualListbox.elements['select' + selectIndex].empty().scrollTop(0);

How i changed it

function filter(dualListbox, selectIndex,moveToTop) {
if (!dualListbox.settings.showFilterInputs) {
  return;
}

saveSelections(dualListbox, selectIndex);
if (moveToTop != false) {
    dualListbox.elements['select' + selectIndex].empty().scrollTop(0);
}
else {
    dualListbox.elements['select' + selectIndex].empty();
}

Now in the refreshSelects() function i changed

if (dualListbox.settings.showFilterInputs) {
  filter(dualListbox, 1);
  filter(dualListbox, 2);
}

To

if (dualListbox.settings.showFilterInputs) {
  filter(dualListbox, 1,false);
  filter(dualListbox, 2,false);
}

And every thing is as it should be i get filtering and i don't get dragged to top while selecting options.
There might be some problems with doing it but i haven't found any yet.
I just wanted to let you guys know that this change might help to improve user experience

OnMove method

I looked through the documentation... I apologize if this has already been addressed...

I have a two lists:

box1:

Item 1 (category)
Item 2 (category)

box2:

Item3 (New)
Item4 (New)

I have a text box below that would populate the category as I move from box2 to box1. When I move from box1 to box2, it would change to new. It would change both the html value="" and the display.

I don't see a "changeValueOnMove" method. Not sure if this is something you would even want, but it would be useful to me...

Also, I am new to Open Source project, so if I am doing it wrong, please let me know!

Localization the placeholder text of the input filter

Hello,

For localization the placeholder text of the input filter, I added a new option in settings:
filtertextplaceholder: 'Filter'

And I changed the definition of the container:
From this: ... placeholder="Filter" class="filter" ...
To this: ... placeholder="' + settings.filtertextplaceholder + '" class="filter" ...

I hope this has helped for the improve the plugin.

Add support for i18n

I really like this plugin, have any spectative to add i18n support?

Make into a Rails gem

It would be great to have this as a gem.

Make the plugin Bootstrap 3 compatible

Make the plugin Bootstrap 3 compatible while retaining Bootstrap 2 compatibility.

How to remove all the button

How to remove all the button

Filtering stops you being able to move items between lists

You can actually recreate this on the demo: http://www.virtuosoft.eu/code/bootstrap-duallistbox/

• Load page in firefox (I'm using version 26).
• Filter the left-hand box (type "4" or something like that into the filter).
• Move over the one you selected by clicking on it.
• You can't move it back by clicking on it!

Move elements between List programmatically

Hi everyone, I'd like to know how can I do the swapping movement between 2 List programmatically but I didnt find the function or way to do that.

Thank you.

Filter not setting property after refresh

After clearing all selects, adding new ones, then refreshing the plugin, the filter doesn't appear to be adding the appropriate data key value pairs.

The proposed fix is to update the option found, instead of doing an additional find on line 155:

    $item.data('filtered'+selectIndex, isFiltered)

// dualListbox.element.find('option').eq($item.data('original-index')).data('filtered'+selectIndex, isFiltered);

Here is the code I am using to update the select:
var select = $("#select_id");

    select.find("option").remove().end();

    $.each(returned_data, function(index, item) {
        var option = $("<option />").val(item).html(item);
        select.append(option);
    });

    select.bootstrapDualListbox('refresh');

[Feature] Trigger the change event

The plugin should trigger the change event on the original select after modifying its value, so that other JS code relying on the change event still work when applying the plugin

Order right list and submit witout the need to be all items marked

Hi, I'll start to use your component in one of my projects and I need made some changes but need some help or tips in how to achieve this.

• I need to add the ability to sort/order the list on the right, is that possible right now? If not how many code I need to change and where
• Also I need to send the component without select all items, is that possible?

Add append feature

We are tring to use the plugin in our application and the only feature that`s missing is the move/append. Right now, the move function just move elements in the same order that the non selected list box. It will be usefull to have the option to move with order and move with append. Just do this from non selected to selected list box. We want the non selected to keep the original order of his elements.

In our case, the dual list box plugin is used to determine the order by for a query.

Thanks and awesome on the plugin.

NFR: Options to disable regex search

It's a unwanted feature in some cases, like when we have a large amount of data.

Need readonly state

Must provide a way to make the lists readonly.

how to add .box2 items by my click-order?

[.box1]
option 1 ----- click last
option 2 ----- click then
option 3 ----- click first

[.box2]
option 3
option 2
option 1

Restructure the plugin so to accept function calls

The plugin should be able to allow setting changes, such as moveOnSelect, selectedListLabel.

Generally speaking, the major improvements the plugin needs are:

• allow settings change by custom public methods
• safe re-instantiation of the plugin
• resource de-allocation on destroy
• jshint (also camelCase all options and methods)

See http://learn.jquery.com/plugins/basic-plugin-creation/ and http://learn.jquery.com/plugins/advanced-plugin-concepts/.

Need a setting for hiding the filters

The readme should warn about option renaming in 0.3

When rewriting the plugin in 0.3, all options have been changed to camelCased names rather than lowercased ones. This means that options passed by the calling code are ignored when updating the library, unless you update the names. However, there is not indication of this renaming in the doc.

reset dual listbox from javascript function.

There are times when the dual listbox needs to be reset to the original. i.e. unselect all the values. I need to do this from a javascript method.

Please suggest.

Fix element on selected list

Hi, I'd like to know how can I fix one element on the selected listbox and avoid the change to the other.

Thank you.

Ajax Search

OMG! I loved this plugin! I created one like this, but it belongs to my old job :(

How can I do an Ajax search when filtering?