I need a function which will get the text of the currently selected tab. I can get the selected tab using events, but I need to get the text even if the selected event is not yet thrown.
Here's my event script,
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
_textOfTab=$(ui.tab).text();
});
How can I just query the tabs for the currently selected one?
The <li> of the selected tab will have a ui-tabs-selected class on it, you can use that to find the active tab.
$("#tabs ul.ui-tabs-nav li.ui-tabs-selected").text()
You can test it out here.
Related
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
I am using jQuery UI Autocomplete plugin on a textarea
What I want is the textarea content should not be modified when the user hovers on the autocomplete list
This means, if the user scrolls though the list or hovers on the options, the textarea contents should not change. The change should occur only on selection of the option.
$("#my_textarea").autocomplete({
source: mySource,
focus: function (event, ui) {
event.preventDefault() // <-- prevent the textarea from being updated.
}
});
Example: http://jsfiddle.net/hJ9sA/
I am loading the data in jquery tabs using ajax based on the combobox selection it's working fine for first time ,the data are loading properly if i change the combobox selection at that time the first tabs becomes empty if i switch to second tab and came for first tab then the data is loading fine.I don't know why it's not loading while changing the combox selection in first tab.
In the below example i am checking the condition like "Value L" ,if it's "L" then i need to show the three tabs,If the value is not "L" then i need to show the two tabs.
While the two tabs are displaying at that time the first tab data is not loading.
$(function() {
$("#contractType").change(function(){
if($("#contractType").val()=="L") //Combo Selection Values
{
$("#hidetab").show();//Loading tabs
$("#tabs-0").show();
$("#dispEmp").removeClass('ui-tabs-selected ui-state-active');
}//if
else
{
$("#hidetab").hide();
$("#tabs-0").hide();//Hides the first tab
$("#tabs-1").show();/*Displays remaining two tabs below*/
$("#tabs-2").show();
$("#dispEmp").addClass('ui-tabs-selected ui-state-active');
$("#jqgrid").show();//Here i am trying to load the data in second tab using ajax call.
$("#dispEquip").removeClass('ui-tabs-selected ui-state-active');
}
});
});
I got the answer and it's working fine now.
While i am changing the combobox at that time based on the condition i am making the tab as selected.
$( "#yourtabId" ).tabs( "option", "selected", 0 );//this code will select the index of the tab as selected.
0->Index of the tab.
While selecting the tab if we need to return the tab index value then this function will get invoked.
$('#yourtabId').tabs({
select: function(event, ui) {
ui.index // Will return the selected index of the tabs.
}
});
I'm using nested jQuery UI tabs as shown here http://jsfiddle.net/VvFyM/1/
I'm trying to bind to the tabsselect event separately for both the outside tabs and the nested tabs. Problem is, whenever the nested tab's tabsselect event is triggered, it seems that either:
The outside tab's tabsselect handler catches it as well, or
The outside tab's select event is also triggered (hence it is caught).
Which is it?
Then, is there a way to trigger and bind the 2 events separately?
So, instead of
$("#tabs").bind("tabsselect", function(ev, ui){
console.log("Tab selected");
})
I want to do something like
$("#tabs").bind("/*tabsselect outside tabs only*/", function(ev, ui){
console.log("Tab selected");
})
and
$("#tabs").bind("/*tabsselect inside tabs only*/", function(ev, ui){
console.log("Tab selected");
})
Instead of binding the select function after initialization bind it while you initialize the tabs and that solves the problem. I updated your fiddle to show this: http://jsfiddle.net/R5sSh/
Additionally, you can remove the ui-tabs-selected and ui-tabs-active classes, then you can use $('#tabscontainer').tabs( "select", hashOrIndex );