vicb/bsmSelect

A few issues (Not animating, not retaining sort order)... latest jquery.

Closed this issue · 7 comments

drew-dulgar commented

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.

drew-dulgar commented

Discovered the sorting issue. By me specifying two classes for the listItemClass, line 246 does this following:

$('.' + o.listItemClass, this.$list).each(function() {

which of course, ends up looking for $(".clearfix paddable").

To compensate for this, I have added the following in replacement of that line too:

this.$list.children().each(function() {

Thoughts on this?

As for the animations, I am still baffled by this.

vicb commented

Could you please setup a little testcase in a GIST, I'll look at it next week.

drew-dulgar commented

I tested the downloaded example page with the versions of jquery/jquery ui I have and the animations were working, so I must have an unknown conflict going on somewhere in my code base.

With that being said, I was able to use the showEffect and hideEffect options and everything is working as expected. As of right now, this is good enough for me.

vicb commented

So the only issue left (in the master branch) is with the dual classes, right ?

drew-dulgar commented

That is correct, with the assumption that #28 is committed to master. I'm not sure if you need me to post in that particular issue, but I have tested the fix to be working as intended.

vicb commented

@DrewBe121212 #28 has been merged into master on Feb 17.

vicb commented

@DrewBe121212 everything should be in master now. Thanks for your fix.