Bootstrap 3 dropdown events not firing - javascript

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

Related

Links not clickable due to JS return false

JS Fiddle Example
I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
$(document).on('click', '.dd-box', function() {
// Comment out the return statement below and the links will start working.
return false
});
The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
The reason I need this code is because I don't want the dropdown boxes to close when click events happen within them.
I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?
you should put stopPropagation
$(document).ready(function() {
$("a").click(function(e) {
e.stopPropagation();
});
...
see JSFiddle

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

.keyup event not working

$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', ! $('input[name="list_checkbox_ids[]"]:checked').length);
});
The scenario is, I click on search button that generates a list of checkboxes. button_link should be defaulted to disabled until I select one of the checkboxes. Now in the above code, Howcome it does not remove the disabled? I tried looking for errors in the console but cannot find one. Pls help.
list_checkbox_ids are dynamically loaded on the page.
Can you change
This
$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});
Into this(using event delegation) for dynamically created content
$(document).on('keyup','input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});

Identify Which Accordion Panel is Open Bootstrap 3

I have a standard bootstrap 3 accordion panel with a dynamic number of panels. I need to display another div with information specific to the panel that is open. I have trapped the open event and tried to identify the calling panel with the following code:
$(document).on('click', "#accordion_a", function(){
$('#accordion_a').on('shown.bs.collapse', function (e) {
alert('Calling #' + e.currentTarget.id);
})
})
However it just returns the parent panel set "#accordion_a." (and for some reason fires multiple times) So how can I identify which panel is open?
there are some issue in your javascript, I would suggest to use the
$(function() {});
instead of
$(document).on('click', "#accordion_a", function(){});
And then the event shown.bs.collapse must be triggered on the "collapse" block not on a link.
Please check this demo : http://jsfiddle.net/V8h9a/
And let me know if it solves your issue.

jquery selectable and right click

I am using a jquery selectable as shown below.
//Selectable Functionality
$(document).ready(function () {
$("#Selectable_Positions").selectable({
selected: function (event, ui) {
dostuff();
}
})
})
It is working correctly however only left click will cause the select event to fire. I am trying to make it so that right click will as well. I have tried adding the code below and the alert fires but the selected item does not change.
$(document).ready(function () {
$('#Selectable_Positions').mousedown(function () {
$('#Selectable_Positions').trigger('selectableselected');
alert('foo');
})
})
How can I programatically change the selected item in the mousedown event function?
edit
Updated eventname as per Ian's suggestion below.
I have created a jsfiddle showing what I am trying to achieve and the triggered event not firing on right click. Does anybody know how to make this work? It would be greatly appreciated
http://jsfiddle.net/Jzjdm/
The correct event name is "selectableselected". So use:
$('#Selectable_Positions').trigger('selectableselected');
Reference:
http://api.jqueryui.com/selectable/#event-selected
Ended up writing my own select function and calling it on right click. Not sure what is up with that event.

Categories