We Keep Coding

Capturing focus on a specific jQueryUI tab

I have jQueryUI tabs, and on a specific tab, I have defined a click function (the ajax call works correctly):
$("a[href='#tabs-1ua']").click(function (event, ui)
{
//ajax call
});
Now what I am trying to do is to accomodate not just clicks, but any type of focus on this tab in general, such as navigating to it using a keyboard arrow key for example. I tried activate in place of click, but I got an error. How can I capture all types of focus on a specific jQueryUI tab?
Thank you.

You should set "tabsactivate" listener while the tab has been activated. Please check below code.
//tabs is the id of UL in which all the tabs has been wrapped. Please replace it with according to your code.
$('#tabs').tabs({
activate: function(event ,ui){
if(ui.newTab.attr('href')=='#tabs-1ua'){
//make ajax call
}
});

focus() by default is accepted by input elements (<input>, <textarea>, <select>) and not <a> elements. Try adding a tab index to the anchor first:
$(document).ready(function () {
$("a[href='#tabs-1ua']").attr("tabindex", "-1").focus(function
(event, ui) {
// JS goes here
});
});

Try
$("a[href='#tabs-1ua']").on('click hover', function () {
// Do something for both
});

I got it working as follows:
I initialized tabs in my application using the class attribute instead of an id, and within it is specified the activate option. In there, I got the id of the currently active tab using $(".tabui .ui-tabs-panel:visible").attr("id"); where tabui is the name of the class. The code is below.
$('.tabui').tabs({
activate: function (event, ui)
{
//do something 1
var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id");
console.log (currentTab);
if(currentTab === "#tabs-1ua")
{
//do something 2
}
}
});
Thanks to all who replied trying to help me.

You do need to use the focus event for key movement, and can use it for mouse clicks as well. The focus event and related events are notoriously quirky in their behaviors, especially with respect to how they are implemented in frameworks and plugins. While I can't say just why, focus on the a element fires on a mouse click, and focus on the enclosing li element fires when you navigate to the element with keys. (Tested with Chrome.) So:
$("#myTabs").tabs();
$('#myTabs li, #myTabs a').on('focus', function(e, ui){
//do whatever
});
Demo

Why .trigger('change') is not working?

Got this piece of code, which works great. However the .trigger('change') is not working.
$(function () {
$('form').each(function () {
var form = $(this);
form.find('.cbox1').change(function () {
if (form.find('.cbox1:checked').length) {
form.find('.cbox2, .cbox3').button("enable");
} else {
form.find('.cbox2, .cbox3')
.prop("checked", false)
.trigger("change")
.button("refresh")
.button("disable", "disable");
}
});
});
});
I know this is probably something simple, but for a noob like me, it's killing me, been reading and studying for days...
Any knowledge/assistance is greatly appreciated,
Si

It works fine. Try adding this line and you'll see that cbox2 change is triggered.
$('form').find(".cbox2").on("change", function() {alert("cbox2 triggered")});

When you are triggering a change, you are triggering it on .cbox2 and .cbox3. However you have not added any listener for the change event on these elements. The listener for change event is attached only to .cbox1. If that is the listener you want to trigger, then call the the trigger("change") on .cbox1 or add event listeners for the other two elements.

Bootstrap 3 dropdown events not firing

I am trying to get an shown event fired at dropdown at this site running on BS3.0
http://hmelius.com/avant/index.php
I have tried this code in the console (from the BS3 documentation page) but with no luck
$('.dropdown-toggle').on('shown.bs.dropdown', function () {
console.log("shown");
});

I believe the events fire on the "parent" not the toggle, so it would be the element above the toggle with .dropdown or .btn-group; the dropdown wrapping element
take a look at the source to see what I mean: https://github.com/twbs/bootstrap/blob/master/js/dropdown.js

Based on #monastic-panic 's comment this works
$(".dropdown-toggle").parent().on('show.bs.dropdown', function () {
console.log("shown");
});

Dropdown Box disappear on click away

This is my first post on here and I'm just learning Jquery so please be kind! :)
I have just created a website - www.wayfairertravel.com and I have some dropdown boxes on my homepage, where users can search 'By Style' etc...
At the moment once those boxes are opened you have to close them manually... I'm just wondering if there is a way to change the code there currently so that when a user clicks elsewhere on the page it disappears.
Any help greatly appreciated. If you you could be as precises in your answer that would be great - I.e where to change the code and what to change to.
Cheers,
Harry

Usually, you add events on body and on the desired dropdown:
$(document.body).on('click', function() {
dropdown.close(); // .hide(); whatever
});
dropdown.on('click', function(event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
However, I think there are jQuery plugins for clickOutisde events that you could use too (they probably work like mentioned above, but you don't have to write it yourself).

I took Jakub Michálek advice and applied it your code. I prepared fiddle so you can test it out: http://jsfiddle.net/tmuuS/
This is your javascript you want to have on your page:
$(document).ready(function () {
$("#expslider").hide();
$("#expshower").show();
$('#expshower').click(function () {
$("#expslider").slideToggle();
});
$(document.body).on('click', function () {
$("#expslider").slideUp();
});
$("#expslider").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
$("#expshower").on('click', function (event) {
event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});
});
Although remember that it's better to have javascript in head tag, not right beside the place where you use it. (hard to look for it later when you need changes)

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.

Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example