I am triggering a event when the user changes a selection in a select menu. As you would imagine it works when the user selects a option that is different than what is already there but when it is the same nothing happens. I have tried changing it to a click event but that doesnt seen to work.
If anyone has a work around for this it could greatly be appreciated.
I have found some solutions to this issue but none of them seem to work for me.
I am also using backbone if this makes a difference to you
My event looks like this:
'change .js-select' : 'show_colours',
UPDATE:
Thanks for the feedback
My scenario is this.
I have four select menus with 0, 1 and 2 as the options. If the user selects anything but zero a block of colour tiles will appear below it so the user can click on a colour. This is the same for all of the select menus.
Now due to lack of space the user can only have one block of colours open at a time. So if the user wants to go back and change a colour on a closed block of colours they need to select a different option than what they already have because if they select the same the event to open the block of colours will not fire.
I hope that is clear.
You can try something like this:
var open = false;
$('select').on('mouseup', function () {
if (open) alert(this.value);
open = !open;
});
http://fiddle.jshell.net/6LYbu/1/
Update
Since this will not work on touchdevices, we should listen for the change-event too:
var open = false;
$('select').on('mouseup change', function (e) {
if (open || e.type === 'change') alert(this.value);
open = !open;
});
Related
I almost got my function to work but I'm missing some ingredient.
I have 3 boxes with their own toggle open close button.
I have an Open All / Close All button that detects the number of open boxes, and switches its text label from 'Open All' to 'Close All' when all 3 boxes are open.
It works fine, except if you start out by clicking on the (red) Open All button after loading the page — and then manually close each individual box — and toggle them open again. Then the red Open / Close all button doesn't detect the opened boxes, and its text label doesn't switch from Open All to Close All.
I know it's unlikely that anyone would use the system this way, but I just want to understand why it stops detecting the number of open boxes.
http://codepen.io/StrengthandFreedom/pen/Yyemqa
// Open/close all boxes
$('.show-hide').on('click', function(){
event.preventDefault();
$('.box').siblings().toggleClass('is-visible',
$('.box').length != $('.box.is-visible').length);
$('.open-all').toggleClass('hide-text');
$('.close-all').toggleClass('show-text');
});
// Toggle boxes individually
$('.toggle-button').on('click', function(){
$(this).next('.box').toggleClass('is-visible');
// Count number of open (visible) boxes
var numOfVisible = $('.is-visible').length;
// if open boxes equal 3, switch button label
if (numOfVisible === 3) {
$('.open-all').addClass('hide-text');
$('.close-all').addClass('show-text');
}
// otherwise do the opposite
else {
$('.open-all').removeClass('hide-text');
$('.close-all').removeClass('show-text');
}
});
Can someone point me in the right direction? :-)
I think you just need to use
var numOfVisible = $('.box.is-visible').length;
instead of
var numOfVisible = $('.is-visible').length;
DEMO
Here is my solution:
http://codepen.io/anon/pen/epMJRz
This is the change on jquery code i made to make it work:
$('.show-hide').on('click', function(event){
event.preventDefault();
$('.toggle-button').trigger('click');
});
Had to refork it to resolve a bug now its perfect
I've a simple select initialized with jQuery Chosen, created on a hidden div.
$(".slcFriendlist").chosen({
no_results_text: 'Geen resultaten voor',
width: 300
});
When I click somewhere in my code I show it and I would like to open the select, and mantain it opened
$('.pcPhotoFriend').on('click', function(event){
$('div.pcPostcardFriendlist').show();
$(".slcFriendlist").trigger('chosen:open');
});
But the problem is that there is another event that trigger I guess the click outside the select, or something else, and my select get closed again -I saw it opens, tested with delay in operations- but that's not what I need.
My goal is to have a select always opened.
Do you have any suggestions?
Thanks in advance
solved like that, with the adding of stopPropagation
$('.pcPhotoFriend').on('click', function(event){
event.stopPropagation();
$('div.pcPostcardFriendlist').show();
$(".slcFriendlist").trigger('chosen:open');
});
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
We have a select2 dropdown in a row (just a div) and we need to be able to click that entire row to trigger the dropdown. I have no problem showing it, but trying to hide it has become a problem, and I'm wondering if my logic is flawed somewhere. select2 AFAIK doesn't have a toggle method on the version we're on, so I have to manually use it's open and close methods. This is what I tried.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
else {
$(this).find('select.interface_dropdown').select2('open');
}
});
This causes it to open properly, but when you click to close it, it closes on mousedown but reappears on mouseup.
Is there someway I can get it toggling properly?
Will you post relevant HTML? It's hard to understand what you're doing without seeing content.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
_dropdown.removeClass('select2-dropdown-open');
_dropdown.select2('close');
} else {
_dropdown.select2('open');
_dropdown.addClass('select2-dropdown-open');
}
});
It looks like you forgot to add/removethat class, maybe this will work better? Again, I'm kind of feeling around in the dark here without seeing your content.
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
in later versions of select2 (3.3+ iirc) this will never get triggered because when opened select2 creates a transparent mask over the entire browser and listens to click events. when the mask is clicked currently opened select2 is closed. this was the only reliable way to close a select2 when the user is ready to do something else.
The proper way is:
$('select').data('select2').toggleDropdown()
I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:
$('input[type=text][id*=tbCost]').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) { //If TAB key was pressed
e.preventDefault();
var editor = $('body').find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}
});
I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.
Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.
Thanks
Solution:
If anybody has this same question in the future and wants an example, here is the code I used:
$(document).ready(function () {
$('.reToolCell').focusin(function () {
var editor = $('body').find("<%=RadEditor1.ClientID%>");
editor.setFocus();
});
});
You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.
//on focus eventHandler for all your icons that calls a function
#('.elementtype, class or a generic way of identifying the icons'.onfocus(myFunction(this))
//the function take a parameter of your element, moves to the next sibling element and sets the focus
myFunction = (element) {
element.next().focus();
}