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.
Related
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..
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 !
I have one button, and when i click it it adds elements that are with same class, for example my class is image_class, the default added elements are being dragged, but when i add new element with the class i can't drag it or sort it.How can i fix that ?I want when dynamically added element shows up to be dragged or sorted .There is no problem with the default ones.
I'm using jquery ui
Okay, here's one way of doing it (and since I have no idea what your button code does...)
http://jsfiddle.net/TrowthePlow/qZz5j/
By default, events are added at runtime and not bound to elements created after the point of binding, even when they have the same selector.
To make sure that events are bound to items with the same selector dynamically, make sure you use the jQuery live method to bind your events.
$('.clickme').live('click', function() {
// Live handler called.
});
Is it possible to use shift and mouse click to select multiple elements on a page using jquery?
I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.
I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.
Does anyone know how this can be done?
I did something like that some time ago, with jQuery:
$(id).click(function(event){ //Mouse Click+shift event
if(event.shiftKey){
//give some attribute that can indentify the elements of the selection
//example rel='multi-selection' or class='multi-selection'
}
});
Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:
function deleteMultiSelection(){
$('html').find('div[rel=multi-selection']).each(function(){
$(this).remove();
})
}
$("#button").click(function(){
deleteMultiSelection();
})
Be careful because I didn't test this code.
I have a jQuery plugin that does exactly what you want it is called finderSelect it enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.
It sounds like jQuery UI Selectable is what you're after, you can try it out here.
To stay with OS conventions, they key it uses is Ctrl and not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.
Sure, if you are willing to do some work :)
Listen for the shift keydown, set a var that you can access from within your click handler functions, if the var is set then add that item, (or their tabindex for your current implementation) to your list of items to operate on when an 'action button' is pressed.
unset the var when you get the shift keyup event.
To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?
However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?
It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but
I know that I can get the (numerical) index of the currently selected tab like this:
$('.selector').tabs('option', 'selected');
Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.
I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.
I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.
As far as I know, selected tab has class ui-tab-selected. You may use
$('.selector').find('.ui-tab-selected a');
to fetch selected tab. It was element, where href attribute - identifier of active panel.
#Matt Ball
You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:
var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];
'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.