I am using a jQuery dialog and I would like to add some functionality to the close button in the upper right and corner of the dialog frame. Can I accomplish this by simply adding a close function to the dialog without it affecting the cancel button contained within the dialog? Meaning the cancel button obviously closes the dialog and performs its own function but the close button in the dialog frame needs to do something else. Hopefully I have explained that clearly enough.
If you are using the buttons options within the dialog, and one of them is Cancel, then yes. You can obviously create your own function for the Cancel button and then a seperate one with the close event. Just to be safe, you'll probably want to include preventDefault() in the function for your Cancel button.
$('#dialog').dialog({
buttons: {
"Ok" : function() {
//perform whatever
},
"Cancel" : function(e) {
e.preventDefault();
//perform whatever
},
close: function() {
// perform special CLOSE function
}
});
Actually I used this method below to accomplish this. It seems to work just fine so I don't know if there are any drawbacks with going this way. Here is the code:
$("#dialog").dialog({
...dialog code goes here...
}).bind('dialogclose', function(event, ui) {
... dialog close code goes here...
});
I suppose the answer above is better as it is clearer and cleaner implementation.
Related
I have several jQueryUI dialogs with Ok and Cancel and radio buttons (no text input).
My requirements are:
OK button should be right of the Cancel button and Ok button should be in focus:
when the dialog opens,
after any user click or drag.
Requirement no 1 can be implemented by giving the Ok button an id and the following code:
open: function(event, ui) {
$('#OkButton').focus();
},
Requirement no 2 is harder. It could be implemented by defining focusing delegates for a lot of events:
.ui-dialog-titlebar click
.ui-dialog-buttonpane click
dragStop
etc
But surely there must be a simpler way?
Try this code. myDialog is main dialog div When you drag your dialog this will do the job
jQuery('.myDialog').bind('move', function(e) {
$('#OkButton').focus();
}).bind('moveend', function() {});
and when you click on your dialog main div this will do the job.
jQuery('.myDialog').click(function(){
$('#OkButton').focus();
});
For jqueryUI's tabs, I'm familiar w/ adding a function to the show event, as described in this question. However, is there a way to add a function when a tab is unloaded or loses focus? I see there is a hide function, but my function doesn't get called when I click away from a tab (to another tab).
Here is my code:
$("#myTabs").tabs({
selected: tab,
show:
function (event, ui) {
//some code that works
},
hide:
function(event, ui) {
//some code that never gets called
}
});
Instead of trying to accomplish something during the hide function, I added a custom function in my "select". You can read more about it on this other question.
Jquery Tabs showing a confirmation before activate
I have the following bit of jquery:
http://jsfiddle.net/tad604/Ck2qk/10/
I want the foo div's click handler to not fire, when you click and drag. I've tried doing all sorts of things inside the stop/start events of the drag (event.stopPropagation() etc) all to no avail. The click handler is fired after the drag event regardless.
It's annoying, but the only fix is to remove the event on drag start and put it back on drag stop. Try this:
$(".foo").click(function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".foo").click(function(){
alert("blah");
}); }, 100)},
start: function(event) { $('.foo').unbind('click'); }
});
Now there is still the problem that your click events are probably a bit more complicated than this, and you probably don't want to have to rewrite them. You can save the events for later using jquery data like this:
var events = $('#test').data("events");
Alternatively, you can use jquery live function to attach the click event so the event will only ever be binded to an element that matches that selector. That means if you change the class while dragging, so that it no longer matches that selector, it would no longer have that click event. Something like this might work:
$(".bar .foo").live('click', function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".draggableBar").removeClass('draggableBar').addClass('bar');
}, 100)},
start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }
});
You'd also have to update the css so draggablebar gets the same style as bar.
EDIT:
the jQuery UI selectable widget has a callback built into it, stop, I need to know how to trigger this event programmatically.
(this was poorly worded)
I've attached an event listener to the jQuery UI Selectable Widget. How can I programmatically trigger the stop event?
Ex Selectable:
$("table").selectable({
filter: "tr",
stop: function(){
//do stuff
}
});
// Various attempts at triggering the stop event
// one
$("table .ui-selected").click();
// two
$("table .ui-selected").select();
// three
$("table .ui-selected").trigger("click");
// shot in the dark 1
$("table").selectable('widget').trigger('stop');
// Shot in the dark 2
$("table").trigger('stop');
// really long shot in the dark
$("table").selectable('widget').call('stop');
Further Attempts
// selectablestop event
$("#table").selectable('widget').trigger('selectablestop');
$("#table .ui-selected").trigger('selectablestop');
If you want to trigger the event outside of the control you can simply call .trigger(). This assumes you are using the .bind() and not the anonymous stop:function() in options.
$("#selectable").selectable({});
$("#selectable").bind("selectablestop", function(event) {
$("body").append("<h1>did selectablestop</h1>");
});
$(":button").click(function() {
$('#selectable').trigger('selectablestop');
});
Code example on jsfiddle.
Edit
Another way would be to retrieve the stop: option value (which would be the function)
var s = $('#selectable').selectable( "option" , "stop");
s(); //call the function.
Code example on jsfiddle.
I ended up doing this, found at How to programmatically select selectables with jQuery UI?
$('#selectable').data("selectable")._mouseStop(null);
This will trigger the mouse stop event and execute the binded stop function on the selectable. If there's a way to trigger the stop in a more elegant way, I would love to see.
I have an image that opens the jQuery UI Slider div on click and allows users to set a value by dragging the handle. What I'm trying to do now is hide that handle when the user clicks anywhere else on the page, but the regular .blur event doesn't seem to work.
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").show();
$("#slider-vertical").focus();
});
$("#slider-vertical").blur(function () {
$("#slider-vertical").hide();
});
Probably you will have a better luck on defining global onclick handler and there you need to check if source of event is not your slider. If not - do your magic.
Basically - if you spinner doesn't include element such as text field or link it will not support focus/blur
Ok, this is what I have put together to make this work.
Thanx DroidIn.net for your help.
$(document).bind("click", function(e){
if(e.target.id != "openPriceToSliderGif")
$("#slider-vertical").hide();
return false;
});
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").toggle();
});