Conflict between jquery.multiselect and jquery.selectbox - javascript

I am using jquery.multiselect.js and jquery.selectbox-0.2.js in my application for muti-select drop down and single select drop down.
I am able to use both the drop downs perfectly alone. If I have a page with both the drop downs, i am having an issue.
The issue is that , the muti-slect dropdown does not close, on clicking outside.There is no issue for single select drop down. So once i expand the muti-select drop down and click somewhere on the page, it does not close.

What does your selector look like? Is your selector inclusive of select elements in general or just those that are multiselects? For example:
$('select').multiSelect();
would affect all select elements, including those bound to the selectbox plugin.
If you haven't yet, make sure your multiselect plugin is only affecting select elements with the multiple attribute:
$('select[multiple]').multiSelect();
It's likely that your selectbox plugin could be affecting the multiselect elements as well. You'll need to filter these selects from those with the multiple attribute. You can do this two ways:
Provide the single selects with an identifying class (i.e. class="single-select"), which is more verbose.
Use jQuery's :not() selector, like so: $('select:not([multiple])').selectbox();

Jquery select box plugin has the below function
$("html").on('mousedown', function(e) {
e.stopPropagation();
$("select").selectbox('close');
});
I commented the e.stopPropagation(); line..Now on clicking outside, it invokes the buur method in mutiselect...Thats the close.. I understand that because of e.stopPropagation(), the close of mutiselect was not getting invoked earlier..

Related

How can I disable the select2 plugin for certain select dropdowns?

I'm using the jquery select2 plugin but I want to disable it for certain select dropdowns. Is there a way to exclude select elements the plugin will be applied to?
I was thinking maybe a class on the select element to tell the plugin to ignore it.
$('select').not('.yourExcludeClass').select2();
Here's a link to the docs for $.not()
While just not calling .select2() on the elements which you don't want to be dropdown works, you might want to disable Select2 after you've already initialized it.
In order to do this, you have two options
Visually disable it like you would a standard <select> by calling $("select").prop("disabled", true).
"Destroy" Select2 so it goes back to looking like a standard dropdown by calling $("select").select2("destroy").
You can disable it using -
$('select').select2("enable",false);
using JQuery.
I am assuming you are applying it to all selects via:
<script type="text/javascript">
$('select').select2();
</script>
There are a few ways you could solve it, but the easiest would be to add a class to the selects you want to be styled And only call the select2() on those:
Add the class addStyling to your selects to be styled
Initialize them with $('select.addStyling').select2();

Jquery multiselect - Togggle hide optgroup issues

I have implemented the jquery multiselect addon and got it working fine. I have a long list of select options and are divided by optgroups. While optgroups organizes my long list but still users still have to scroll for a while to get to the bottom option. I am simply looking for a solution to have the optgroup collapsed by default and un-collapsed when you click on the group.
At the moment when you click on the optgroup it automatically selects all options under it which I would like to prevent and instead replace that with a hide function instead. I know that jquery by default cannot target a select's optgroup but the Jquery Multiple select addon has an event handler that apparently allows you too. If you scroll a bit half way down their site it gives you all the event handlers this addon supports. I was really interested in the optgrouptoggle event:
Fires when an optgroup label is clicked on. This event receives the original event object as the first argument, and a hash of values as the second argument: js
$("#multiselect").bind("multiselectoptgrouptoggle", function(event, ui){
/*
event: the original event object, most likely "click"
ui.inputs: an array of the checkboxes (DOM elements) inside the optgroup
ui.label: the text of the optgroup
ui.checked: whether or not the checkboxes were checked or unchecked in the toggle (boolean)
*/
});
I tried implementing a show hide function as follows but I still new with jquery and might be botching this completely. Any help would be appreciated.
http://jsfiddle.net/akhyp/1986/
$("#selected_items").bind("multiselectoptgrouptoggle", function(event, ui){
$(this).children().show();
}, function() {
$(this).children().hide();
});
A few problems with this approach, some in your code, some in the plugin's API:
Your demo code references $("#selected_items"), which is nowhere in your markup. Change the selector to $("select") to match your declaration of the multiselect above. Better still, cache the jQuery object in a variable: var $multiselect = $('select');
The docs specify using bind to attach an event listener, but bind is deprecated in recent versions of jQuery. Use on instead.
You're passing two functions to the on/bind method--it only takes one. Instead of using hide() and show(), you can just use jQuery's toggle method.
The multiselect plugin isn't structuring its generated markup semantically, so optgroups and their child option elements are translated into straight-up li elements, with the optgroup and option elements as siblings. That means you can't use children() the way you would hope. However, the API provides you with a way to find the checkboxes that were associated with the optgroup: ui.inputs. From those, you can find each of the parent li elements and hide them. Unfortunately, it doesn't look like the API gives you a way to directly address them, but you can use a code snippet like so:
var parentLiOfInput = function(input) {
return $(input).closest('li');
};
var $listEls = ui.inputs.map(parentLiOfInput);
// $listEls is now an array of jQuery objects
// Note this isn't the same as a jQuery wrapped set--
// you can't do $listEls.hide(), for example.
Hiding the generated "option" elements will prevent the plugin from working--it uses a jQuery selector to toggle the checkboxes, and that selector relies on the associated elements to be visible.
That last point is the blocker: Once you hide the checkbox, the plugin will fail on the next optgroup click. Demo of the failing behavior.
I don't really see any options for you at this point, without directly modifying the code of the plugin.

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

Getting an event from a combobox when selecting the same item

I have a few HTML pages. The header contains a combo which allows a navigation by selecting different pages : A, B, C, D.
For the moment, I use:
combo.change(function(){
window.location=path;
});
But I would like to select A even if A is already selected, which make a kind of reset of the page. I tried the events blur or click, but it's not working the way I would like.
I know it's not a great web design, but it's a request by my client.
combo.children('option').click(function(){
window.location=path;
});
fiddle : http://jsfiddle.net/z4H5R/1/
Even though the requirement is very simple, there is no direct solution for this. Could have fixed this if all browsers had supported click and key events for option tag.
So one solution I have to suggest is using dropkick - a jQuery drop down plugin.
http://jamielottering.github.com/DropKick/
This plugin actually hides the select element and adds a proxy drop down element, in which actually options are li elements with a tag. The plugin is coded in such a way that it triggers change event even if the newly selected option is the current one. You can see it in the first example. It also supports key navigation.
I found a nice solution with Jquery :
The real code with my combo with id='route' is :
$("select#routes option").click(function(){
console.log("Click on "+$("#routes").val());
window.location= $("#routes").val();
});
The $("select#routes option").click() means that I click on the DOM tag into the tag.
And it Works !

jQuery Selectbox Append Options OnChange

I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.

Categories

Resources