I have a jQueryUI tabs object, and i want to handle the event of a tab being clicked, when is already selected.
using:
$("#tabs").tabs({
select: function (event, ui) {
onSelected();
}
});
I'm able to handle the event when the tab is first clicked (selected), but when i click it again - the handler isn't called.
is there any solution for that?
If not - another option that will suit my needs is the following:
define the tabs as collapsible, and collapse them by script (and not by user click).
i define the tabs object as:
$("#tabs").tabs({
collapsible: true
});
but when i try to simulate a click using:
$("#tabs").tabs("select", 0);
or
$("#tab-link-0").trigger('click');
nothing happens.
I need to point out that the tabs are added dynamically, using:
$("#tabs").tabs("add", "#tab-link-0", "title 0");
any ideas\suggestions for any of the cases?
Thanks,
I experimented a bit and found out that you can prevent the collapse of a tab by calling event.preventDefault() in the select handler. You obviously only want to do this when the select handler is fired on your currently-selected tab (to prevent collapsing the tab), or you'll never be able to switch the tab. This is worth testing, due to the call to preventDefault() on the jQuery event, but it appears to give you the behavior you want, at least in Chrome:
var tabs = $("#tabs").tabs({
collapsible: true,
select: function(event, ui) {
if (tabs.tabs('option', 'selected') === ui.index) {
// Prevent the tab from collapsing if the event fired on the
// currently-selected tab
event.preventDefault();
}
onSelected();
}
});
Related
I have a div that is draggable. The "splitter" that is used for dragging it / toggling it, it's supposed to allow expanding and collapse only on doubleclick. (Or simple drag and expand).
The functionality works fine, but once the div is in the collapsed state, it repositions/opens up to some 10px width, when just 'clicking' on the splitter. I.e, single click/mousedown.
I have tried stopEvent, return false, also all other possibilities of fixing it, but it won't stop from expanding on single click
This is not supposed to happen. Any help would be appreciated.
To solve this problem I think you will need to add some extra state to your DOM node containing a flag if the object moved or not. If it really moved, then the click event should not be fired.
An example of adding the state:
lang.mixin(domNode, {
moved: false
});
Then, when the Move event is fired, you set the flag to true, for example:
moveable.on("Move", function(mv, pos, evt) {
if (evt.target.moved === false) {
console.log("Drag detected");
}
evt.target.moved = true;
});
In the click event handler you will have to verify if the flag is changed to true or not and put it back to false (for the next moves). For example:
on(domNode, "click", function(evt) {
if (evt.target.moved === false) {
// Execute your logic here
}
});
Of course, this isn't the most elegant solution (but it works). The most beautiful solution would be that you extend the Moveable yourself and make it work to your needs.
I tested it out with a JSFiddle, which you can see here.
When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)
Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});
I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.
the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.
The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});
I am using the jQuery Autocomplete widget and, after a "unsatisfactory" (at least for me) previous question that involved hacking the plugin in order to prevent closing the menu, I am looking for a "less invasive" way to make things with a different approach. So, I would like to know if there is a way to re-open the menu after a select event that involves a search event. That is, given
$(#input_field).autocomplete({
autoFocus: true,
select : function(event, ui) {
event.preventDefault();
$(this).autocomplete('search', "Custom search string" );
},
...
});
I would like to make the menu to open (note: there is a method to close the menu but not to open it) after that the user select a item from that menu. Is it possible? If so, how?
i found a way to do this . use a timer to listen autocomplete close event :
var stop = false;
setInterval(function(){
if(!$('.ui-autocomplete').is(':visible') && !stop)
{
$('.ui-autocomplete').css('display','block');
}
},10);
but this is not good way to prevent closing menu !!!!
you can set 'stop' to true when an event happen .
I'm using this snippet to bind on select event:
$("#myTabControl").tabs({
select: function(event, ui){
var selectedTabName = $("#myTabControl").find(".ui-tabs-selected").find("span").text();
// Do stuff with the selected tab name.
}
...
});
The problem is ... I'm getting the name of the tab that was previously selected, not the one that is currently being selected.
Any advice on how to get the latter?
Note - this question is either very similar or a dup ... but I'm not sure it is phrased well enough (I'm not even sure if it's a complete dup or not).
The select event is fired when you click on a tab button. At that moment, the tab has not yet changed.
You should use the show event:
$(paneSelector).tabs({
show: function(e, ui) {
var selectedTabName = $(paneSelector).find(".ui-tabs-selected span").text();
}
});
DEMO
I have an accordion that on load gets data using ajax to fill it starts getting autoupdates. Then on close I unload the data and removes it from autoupdate list.
But the user can open an Edit page in the accordion, and if this page is open the user should get a warning if he tries to close the accordion e.g. (Closing this will cause you to loose all none saved data) or similar.
So I want to "intercept" the accordion toggle close event and if certain data (The edit page) is loaded inside the accordion a "are you sure" warning should popup.
$( ".selector" ).accordion({
changestart: function(event, ui) {
...
if (dataInvalid) {
return false;
}
}
});