michael / multiselect Goto Github PK

With bellow operation...

1. "Option Sortable" is enable.
2. Select items with plus button. ( for example, original list ordered 1, 2, 3. Then click order 3, 2, 1).
3. Post or put these data (by http).

In this case, we expect sent list ordered by selected list order. But, it send with "original list order". Then, I insert some code write bellow.

73a160,168

      if (this.options.sortable) {
          that = this;
          // apply the new sort order to the original selectbox
          that.selectedList.find('li').each(function() {
              if ($(this).data('optionLink'))
                  $(this).data('optionLink').remove().appendTo(that.element);
          });
      }

Thanks.

I'm running into a minor issue with sorting. Basically it seems like the sort does not apply when clicking the '+' icon to add items to the selectedList. Here are the steps to reproduce the issue I'm having:

Let's say I have an availableList with the following items (in this order):

• A
• B
• C

Now I'll go ahead and add the following items to the selectedList (in this order) by clicking the '+' icon next to each item:

• C
• A

The index on the original does not appear to update, so the items are submitted in their original order, which is: A C This issue doesn't seem to occur when I do the same thing using the drag and drop functionality of the application. I'm guessing there may be a issue in the click event that is not updating the index. Anyways not sure if this is expected behavior or not, but any insight on how this could be resolved would be great. Also please let me know if any additional information is needed, thanks!

When the multiselect tool is rendered in IE6 and IE7, the two panes are top and bottom instead of side by side.

Function _addNode looks for successor. When it is found line: node.insertBefore(succ) is called but it doesn't insert any node.

When succ is null then everything works fine.

http://www.sixtyseconds.co.za/ms.gif

The styling is incorrect on the multiselect, but thay could possibly be as a result of the global page styles. You can drag-order the left column, but you cannot select items from the right column.

JQuery 1.5 is going to support John Resig created jquery.tmpl plugin http://github.com/jquery/jquery-tmpl

An available list item disappears when dragging and releasing in the available list.

I meant to mention this is only on the next branch. I was using next version as the main version is too slow for 250 items.

When more than one instance of multiselect is used and 'sortable' option is enabled dragging functionality becomes crazy (JQuery 1.3.2).

Fixed version is available by url: http://code.google.com/p/nreco/source/browse/trunk/shared/blocks/JQueryMultiselect/js/multiselect/ui.multiselect.js

Not sure why this is happening, but the default dividerLocation isn't being used, however when specified in the instantiating parameters it works perfectly

Line: 877, 250

For example, I have a modal window with a select list inside of it. I'm using C# and the list gets populated with options from a callback response inside of a jquery click event. After the list is populated I have the modal actually display with the list of items. The problem is that $(#id).multiselect() must be called before the click event, and cannot be called inside of it (the multiselect plugin has no width and is scrunched up to the left of the modal window if I do call it inside of the click event).

Since the original select list gets populated after the multiselect is called, nothing gets added to the multiselect list. So is there anyway I can add select options to the multiselect after all of that, or is there some way around this?

Thanks

It would be good to be able to order the initially loaded selected items as they are ordered in the html rather than by alphabetical order.

Hello,
First of all thanks for this great plugin.
I just noticed that the plugin does not work in Opera 10 Windows XP.
To reproduce.
go to http://www.quasipartikel.at/multiselect
Select the last visible column and try to move it - after reordering the list is totally broken
Best Regards
Tony

If I drag an item before the drag animation of another item stops, the receiving list duplicates the item on both sides. I'm using the 'next' branch...

Usually, the availableContainer should be at left position instead of right position.
Maybe, an option availableContainer position could be added to define the required position.

Hi,
The function is great, looks professional and ease of use.
Problem is I can see that it takes up a very long time to generate the mark with list over 500+ items.
Is it possible that I can produce the html mark up for the html page in advance and the multiselect function doesn't need to produce the it, but the javascript functions still work.
My idea would be to use PHP script to create the markup list to save the javascript from doing it.
Cheers
Kaz

When an item is removed from the selected list, it'll reappear in the master list (good) but even when the master list is filtered (bad). For example, if the master list is filtered for "can", I'll see Canada and Vatican City, but if I remove Albania from the selected list, it'll pop into the master list, even if it matches the filter.

I add an attribute for one of option by "$("#countries option[value='CAN']").attr("selected",true);"
But the multiselect doesn't change,the left box have not "CAN" item.
How can I refresh It.

The number of selected items is reporting incorrectly after using the "remove all" control. It appears that the count is not decremented when doing so. It decrements correctly if the same items are removed one at a time.

CKeditor at http://ckeditor.com/
Successor of FCKeditor

The remote lookup does not work in Chrome (currently viewing using Chromium 5.0.375.125). The following error appears to occur on ui.multiselect.js:50:

Uncaught TypeError: Cannot call method 'split' of undefined

I created a sample remote page that would return a few elements. Then in the debugger I placed a break at line 50:

lines
Array
0: a=Apple
1: b=Banana
2: c=Cat
constructor: function Array()
index: undefined
input: undefined
length: 3
proto: Array

On each iteration of the loop I see the following:

i=0
i=1
i=2
i=index

However, this loops stops at i=2 in Firefox so there are no issues with this. Changing line 49 from:

for (var i in lines) {

to

for (var i=0; i < lines.length; i++) {

seems to resolve this issue.

I'm using multiple instances of this great widget on the same page (downloaded the fix for multiple instances referred to from issues section.).

This works fine when adding single entries, but when I click "add/remove all" everything is moved in all of the widgets, not just the one where the button is clicked.

Keep ut the good work!

Hello Michael,

in jQuery UI 1.8 $.widget are replaced to $.Widget. So to make jQuery UI Multiselect works with both jQuery UI 1.8 and jQuery UI 1.7 you can change

destroy: function() {
this.element.show();
this.container.remove();

$.widget.prototype.destroy.apply(this, arguments);

}

to something like following

destroy: function() {
this.element.show();
this.container.remove();

if ($.Widget === undefined) {
$.widget.prototype.destroy.apply(this, arguments);
} else {
$.Widget.prototype.destroy.apply(this, arguments);
}
}

Best regards
Oleg

Just noticed a few times in the code that constants are referred to using 'constante' instead of contants.

Line: 220, 393, 751, 844

I am cloning a div that contains a multiselect. The HTML looks like this:

The javascript creates the multiselect as follows:
$("select[multiple='multiple']").multiselect();

Then, the clone is created as follows:

$("div.main").clone(true)

The clone never renders the options. Is this an issue or is there a way around this? Thanks.

It does work after you click at least one time on the [+] instead of dragging.
Then - dragging works.

Weird, did anybody get this too?

Hi,

I have a multiselect that is in a dialog. I would like to set the selected options and then open the dialog. However, due to the :visible qualifier in the code, the select and selectNone methods do not work. I could not decipher why the :visible qualifier is used.

I also had an issue initializing the multiselect if the element and parent were not visible. I added some code to get around this but I am a little stuck with the methods.

Thanks,

Dave

Hi Michael, great work so far on multiselect.

I like how you can order items before saving. The problem is (to my knowledge), this order can't be preserved without re-arranging the original list.

Here's a potential fix -- allow for some sort of weight (rel) attribute that can be applied to elements. This would allow for the "available" list to remain intact, but also let multiselect know how to order the selected items.

Example:

Selected item order:
D, A, C

Thoughts?

Hey,

When using the demo @ http://quasipartikel.at/multiselect_next/ (and on my own site) In Chrome you get an error "Uncaught TypeError: Cannot call method 'split' of undefined" Which relates to the line:

line = lines[i].split("=");

This essentially prevent the remote call from works due to the error and just sits on the "please wait" message when issuing a remote call

Zay

As you can even recognize in the demo, there is a small 1px white area on the right side. Its width is depending on the dividerLocation option. With 0.6 you get a rounding error in Line 60 and 61. You can fix it, with replacing http://github.com/michael/multiselect/blob/master/js/ui.multiselect.js#L61 with:

this.availableContainer.width(this.element.width()-this.selectedContainer.width());

It simply substracts the width of line 60 from the width of the element which gets to a nice result independently of any roundings.

I would like to have an option on the right, not be able to be moved up/down or removed.

It seems that if I want to load the multiselect list inside a jqueryui accordion (in a non-active accordion) it does not work at all. What I did is when the accordion containing the multiselect opens up I initialize the multiselect. However, in this case, the drag'n'drop doesn't work.

Maybe some css conflict or something alike..?

The underlying SELECT used for this plugin has many child OPTION tags, each of which supports a disabled attribute that is set to a boolean - true or false. The plugin doesn't honor that attribute, and allows the user to add or remove items at will from either list witout regard for whether each option is enabled or disabled.

I've been able to have the same item appear in both lists (selected and available). When this occurs, the true state is that the item remains unselected. This is verified by sending the selected items in a HTTP GET request and observing (via firebug) that the dup item is not in the request. Unfortunately, I'm unable to reproduce this consistently. If I find more information, I will post. Thanks for this great component. I would love to use it but will have to wait for that issue to be resolved.

I would like to be able to double click on an option and have an action occur like opening a url

Hello everybody,
Firstly congratulations to the creator of this plug-ing, is fantastic.
I wonder if he allows the blocking of the amount of intensity that is possible to select user?
This is for situations in which we have direct interaction of the user inserts directly into the database, so that even believe it faster and easier, simply clciar Add All on instead of selecting items one by one.
Of course avendi able to set the amount, in this case we have to also block the Add All option, because there is not logical to have the Add All because we are limiting the amount of items that can be uncertain.

Now appreciate the response.
Hugs
George Kania

Hi,
I am using the plgin in Asp.net
In my web page,I have a dropdown which causes postback but due to this,the list is distracted until it loads all the items,and then it displays properly.But in the meantime it look odd.
Can we prevent the Select box loosing its state.
Even at http://quasipartikel.at/multiselect_original/ we hit Refresh,the list gets time to have the style attributes

Going other way, can we show 'Loading..'image till all the data is populated?

Hi,
Firstly let me tell you that this is such a wonderful control you developed.
I am using it in my application.And it works well.
Just a single thing I am concerned is,there is 'Remove All' functionality,but how can I remove a single item from the selected list.

Hi, I dunno how to commit on github, never used it before. Below i pasted the source modified as described in the title. I think i made the iteration a bit faster too (items.length would be reread each time in any iteration so i changed the iteration condition)

regards

the changed ui-script is available over here:
http://dev.bandsonstage.net/js/multiselect/js/ui.multiselect.js

If I drag an item from the right side to the left and bring it back to the right (so the left side turns yellow) the left side stays yellow and further drags result in a nasty looking overlayed copy of the item, as well as items added having a + icon on the left side where it should be a -. This is on the http://yanickrochon.uuuq.com/multiselect/ version.

Nice work on this plugin!

The issue I describe above seems to be a usability/expectation issue. When I filter a list, I would expect "Add all" to add all of the items in the filtered list, not all of the unfiltered items as well.

If I have time, perhaps I'll take a shot at a solution, but wanted to see what others thought first.

-Eric

.val() as getter works ok, but not as setter.

$.ui is reserved for official jQuery UI widgets

Hi,
The search option is nice but it is searching the containing item.
I mean if user type r,then it displays all items containing 'r'.
Can I search the items starting with 'r'.
Please look into this.

Hey,

I've been using the newer version of the script for a while and it works great. I was running it on the 1.7.2 Jquery UI and jquery 1.4.2. However since upgrading to the JqueryUI 1.8 and the new 1.8 version you released a few days ago, everything works fine apart from the destroy function no longer works. In Firebug I get the message

$.widget.prototype.destroy is undefined

The Widget disappears but the script actions after this of course no longer work due to the error produced from destroying the multiselect.

I'm still using the method $("#idhere").multiselect('destroy');

Cheers

There's a problem now with overflow: auto; for IE6.
I had to remove position: relative, in order to make draggables behave correctly (draggables are slipping behind the ul while dragging if I specify position:relative;).
No idea how to solve that yet.

When I upgraded from jquery UI 1.7 to 1.8 the UI.multiselect plugin does not work properly anymore. Any help?

Let me know if this isn't fixable.

I'm loading an input form dynamically via AJAX. All the javascript (UI, multiselect) gets loaded dynamically also. Everything seems to load just fine, but the actual multiselect area gets shrunken to like 1px.

In the _create() function, this.element.width() and this.element.height() are both returning 0 for the select box. This causes multiselect to become unusable.

A temporary workaround is to hard-code the dimensions, e.g....

    this.container.width(this.element.width()+1);
    this.selectedContainer.width(Math.floor(this.element.width()*this.options.dividerLocation));
    this.availableContainer.width(Math.floor(this.element.width()*(1-this.options.dividerLocation)));

    // fix list height to match <option> depending on their individual header's heights
    this.selectedList.height(Math.max(this.element.height()-this.selectedActions.height(),1));
    this.availableList.height(Math.max(this.element.height()-this.availableActions.height(),1));

...to...

    this.container.width(501);
    this.selectedContainer.width(300);
    this.availableContainer.width(200);
    this.selectedList.height(200);
    this.availableList.height(200);

Is there a better workaround?

UI is broken is JQuery UI 1.8 and remove is not working .