Firing up a tooltip - javascript

Ok so i have this page and if you look at the second dropdown...i want to fire up a tooltip or something when the user tries to select the second dropdown before the fire...otherwise i do the slidetoggle
$('.real_business_select .trigger').click(function(){
if($("#industry_category_id").val() != ""){
$(this).parent().parent().toggleClass('select-active');
$(this).parent().parent().children('.drop-down').slideToggle();
}else{
//fire some tooltip....any ideas
}
return false;
});
any ideas on a good simple solution....im trying to find a good solution that will only fire when i need it too and not everytime the user hovers over the element..any ideas

You might want to take a look at qtip2. It's a jQuery addon that does wonderful things. You could provide any event as tooltip activators.

Related

How do I reactivate an event on file input cancel?

So, I have a hidden file input, and multiple clicks open up multiple file input dialogs. So I disable them temporarily like so:
on click:
$("#file_input").click();
$(document).off(event, #parent_click);
on success, on the change event for the file input
$(document).on(event, #parent_click, clickHandler);
HOWEVER! If the user opens up the File Dialog, and then decides to not do anything, and hits cancel, the #parent_click clickHandler can never be turned on again.
How do I rectify this?
If I correctly got it, you can on .change() check for input value and if it's empty just not to fire disable
$('#yourInputId').change(function{
if($('#yourInputId').val() == ''){
//do some stuff
} else {
//do other stuff
}
})
BTW please, could you provide some fiddle next time, if it's possible, it will be much easier to find out a solution with it.
UPDATED working Fiddle

Trigger event on a select when the value is the same

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;
});

Toggle select2 from different element

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()

Javascript disabling a button during requests

I am trying to briefly disable a 'Save' button on a page during requests to prevent users from clicking it twice. Following advice that I found here, I put
elem.setAttribute("disabled","disabled")
at the very beginning of the onclick method, but it doesn't work, I can still click multiple times very fast and cause multiple requests to be sent before the buttons get disabled. Does anyone have any advice?
Try using the elements properties instead of its attributes
elem.disabled = true;
The onclick method can do this, too. In addition to disabling the button.
if (inclick) return;
inclick = true;
... handle the entire click work ...
inclick = false;
be sure to default inclick = false; at the start of the world.
This will make sure any fast clicks get ignored. (It's a sort of 'debouncing' effect.)
like this
elem.attr("disabled", "disabled");
$("#idButton").attr("disabled", "disabled");
could you help this.
Disabling a submit button after one click
http://jsfiddle.net/V7B3T/12/

Disable click handler when click is fired in jQuery

We have a website built in .NET and jQuery. We have custom jQuery to call the load method on a processing ASP.NET page. That ajax call is fired in a click handler, e.g.
$("#Submit").click(function(){
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
}
return false;
);
Our issue is when we hit the #Submit button the click is fired which calls the ajax to process it. People seem to be double-clicking the button and therefore we're getting multiple results in our database from the dual clicks. Does anyone have an idea on how to prevent this issue? I considered something like disabling the button via JS but I'd like to know of other ideas.
Use the one function of jQuery. This way, the event is only ever fired once. Of course, you should also disable the button so the user knows that clicking on it is futile. In addition, show a spinner, progress bar, or change the cursor styling to indicate to the user that something is happening and the system isn't stuck.
stop propagation
$("#Submit").click(function(event){
event.stopPropagation();
if (typeof $_submitSend == "undefined")
var $_submitSend = true;
else if ($_submitSend == true)
return false;
$_submitSend = true;
$(this).attr("disabled", "disabled");
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
$_submitSend = false;
$(this).removeAttr("disabled");
}
);
$("#Submit").click(function(){
$(a_selector).removeClass("class").load("Process.aspx?data=" + someDataObject, null, function(){
$(this).addClass("class");
alert("Done")});
}
return false;
);
Then just add some specific class without any styling which you will use as a selector. Dont know if it will work the way you want, but it looks like simplest solution to me... :)

Categories

Resources