Getting an event from a combobox when selecting the same item - javascript

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 !

Related

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.

Conflict between jquery.multiselect and jquery.selectbox

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..

JQuery: How to force a select option to be "selected", using FancySelect plugin?

I have a direct question: How to make "selected" an option of a select using FancySelect plugin?
This is the situation: I have a select with two options and two links. The links should be synchronized with the select. That means that when clicking on a link, it must make "selected" an option of the select.
It is important notice anyway that it is not a normal select, but i am using a JQuery plugin called FancySelect: http://code.octopuscreative.com/fancyselect/
And this can be the main reason why normal solutions found elsewhere in StackOverflow did not apply to my specific case.
So the point is not how to make "selected" an option of a select, but how to make it "selected" while using the FancySelect plugin.
Here you can understand better:
http://jsbin.com/AqoYucAG/11/edit
This is the code i am trying to use, but is not working yet:
$( "#a1" ).click(function() {
$("#selector option:first").attr('selected','selected');
});
Can you tell me please how can i force an option of a select to be "selected"?
Thank you very much!
It seems like you are using a select plugin. So generally they convert the underlying select to divs/spans etc to achieve good look and feel. And hence when you change the select option you need to notify the plugin saying that you have updated it. In this case it seems like you can trigger a change/update event to do so. You need to do the same thing (triggering an update) when you add options dynamically to the select as well, so that the plugin gets updated.
So try:
$( "#a1" ).click(function(e) {
e.preventDefault();
$("#selector").val("1").trigger('change');
});
According to the plugin code as shown below, it updates the text while change is triggered.
sel.on('change', function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) {
return e.stopPropagation();
} else {
return updateTriggerText();
}
});
Easiest way, you don't need any option tag
$("#selector").val("myVal");

selecting multiple elements using shift and mouse click - jquery

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

How do I get the ID of the currently selected jQuery UI Tab?

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.

Categories

Resources