I have a list of elements and when clicking on each one I would like my jQueryUI dialog box to pop up next to the list element that was clicked on.
$( "#selector" ).dialog({ draggable: false,
width: 250,
autoOpen: false,
position: [e.pageX,e.pageY] });
$(".openDialog").click(function(e){
console.log('I need the cooridnates x:'+e.pageX+' and y:'+e.pageY+'to be passed to the dialog box');
$( "#selector" ).dialog("open");
});
I can get the coordinates I need, but I'm having trouble passing them to the dialog init.
Would love some insight into this.
Thanks in advance!
Since you want to show the dialog next to the clicked element, you should defer setting the dialog's position until that information becomes available, i.e. in your event handler:
$("#selector").dialog({
draggable: false,
width: 250,
autoOpen: false
});
$(".openDialog").click(function(e) {
$("#selector").dialog("option", "position", [e.pageX, e.pageY])
.dialog("open");
});
Before showing the dialog again, try:
$("#selector").dialog("option", "position", [e.pageX, e.pageY]);
Related
I have a jQuery dialog below. I'm using jQuery UI 1.11.
$("#contactContainer").dialog({
closeOnEscape: false,
modal: true,
dialogClass: 'contactsFooter',
open: function(event, ui) {
$(".ui-dialog-titlebar-close").show();
$('#dialog_footer').remove();
$(".contactsFooter").append('<div class="" id="dialog_footer"><div class="dialog-footer-buttons"><button type="button" id ="close" class="button-style-2" onclick="$(\'#hasChangedForm\').val(\'\');" style="margin-left: 5px;">Cancel</button></div></div>');
},
autoOpen: false,
width: 300,
minHeight: 'auto',
maxHeight: 400,
position: { my: 'top', at: 'top+50' },
close:function() {
$('#contactContainer').dialog("option", "position", { my:"top", at:"top+50", of: window });
$('#contactContainer').html('');
}
});
$("#contactContainer").dialog('open');
Here is the Fiddle. In that fiddle,
Click any of the textbox (means focus. In this example it is the one we have the value "test here").
Now scroll the dialog by clicking the scrollbar of the dialog and drag it down / up and see what is happening. It is loosing the focus on the textbox we clicked. If I press tab, it is setting the focus to the first field again. This is weird.
If I use mouse scroll, the focus is still there on the same field. This is normal.
Frankly, I don't know why this is happening. Can someone help me for how do I prevent the dialog loosing focus when scrolling? I want the focus to be retained on the same field.
Fixed. The problem is the tabindex.
I let you a fiddle working. The trick is removing the tabindex just after the initialization of the dialog, it can be done like this:
$(".ui-dialog.ui-widget").removeAttr("tabindex")
If you want this behaviour to be permanent you can edit the jQuery source code. If you reach the dialog section you are going to see a function called _createWrapper. Inside, you can see something like this:
.attr( {
// Setting tabIndex makes the div focusable
tabIndex: -1,
role: "dialog"
} )
Remove the tabindex from there, and that's all!
I think this might help you a bit.
$('#divWithTheScrollbar').scroll(function() {
$('#elementLosingFocus').focus();
});
From having looked around on the web it seems like the most viable option you have is the one #pritishvaidya added.
You have to realize that the focus event is triggered when anything gets clicked on your page. Meaning that if you click the scrollbar whilst having your textbox in focus you will put that the scrollbar in focus and lose the focus of the textbox.
I'd suggest you implement the solution by #pritishvaidya, but add some sort of validation around it where you know which one of the controls was in focus last and then force focus on that when the scrollbar's focus has been lost. That would put minimal strain on the client as well as allow you to progress with your use-case.
Happy coding!
Try this; its working(Not necessary to add id or other selectors with the inpus)
var focused;
setInterval(function(){
focused = $(':focus');
},500)
$("#contactContainer").scroll(function(){
//console.log(focused[0]);
$(focused).focus();
})
This might be a general solution but it needs to be tested:
var lastFocus;
$(document)
.on("focus", function(e) { lastFocus = e.target; })
$("#divWithTheScrollbar").scroll(function () {
if (lastFocus) lastFocus.focus();
})
It generally saves which element had focus last and sets it again when you scroll the div.
You need to extend it so an intentional blur event will still work without the element being focused again after scroll.
Please try with following JavaScript update.
https://jsfiddle.net/3q22xLhk/5/ You can check on fiddle
$("#contactContainer").dialog({
closeOnEscape: false,
modal: true,
dialogClass: 'contactsFooter',
open: function(event, ui) {
$(".ui-dialog-titlebar-close").show();
$('#dialog_footer').remove();
$(".contactsFooter").append('<div class="" id="dialog_footer"><div class="dialog-footer-buttons"><button type="button" id ="close" class="button-style-2" onclick="$(\'#hasChangedForm\').val(\'\');" style="margin-left: 5px;">Cancel</button></div></div>');
},
autoOpen: false,
width: 300,
minHeight: 'auto',
maxHeight: 400,
position: {
my: 'top',
at: 'top+50'
},
close: function() {
$('#contactContainer').dialog("option", "position", {
my: "top",
at: "top+50",
of: window
});
$('#contactContainer').html('');
}
});
var scrolling = false;
$("#contactContainer").dialog('open');
var lastFocusTextbox = null;
$("#contactContainer input").focus(function() {
lastFocusTextbox = this;
});
$("#contactContainer").scroll(function(e) {
scrolling = true;
});
$("#contactContainer").mouseup(function() {
if (scrolling) {
if (lastFocusTextbox != null) {
$(lastFocusTextbox).focus();
}
scrolling = false;
}
});
I have a jquery dialog with title and close bar. After that I am loading an another dialog called for confirmation. In my confirmation dialog UI I don't want the 'title' and 'close' button. If I remove title and close button using dialog 'open' method, in my confirmation dialog it's working fine with the title remove changes. But my backend dialog also getting removed with the title and close button. I only need that for the current dialog not for the parent one.
I am here attaching the UI for your reference.
In the first image, I am initializing with the jquery dialog with the title and close button.
In the second one, I am removing title and close with open function while init the dialog.
In my second dialog init,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).remove();
$(".ui-dialog-titlebar", ui.dialog | ui).remove();
},
If, I do remove like this, I am getting removed title all the dialog. I need to remove title for the specific dialog.Kindly help me out of this.
Okay, I found your issue. You were generalizing the title. You need to specifically do it. Try this:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false,
height:'300', // No I18N
width: '300', // No I18N
resize: false,
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
$( "#dialog2" ).dialog({
autoOpen: false,
height:'100', // No I18N
width: '100', // No I18N
resize: false,
open: function (event, ui) {
// Do not generalize here!
$("#ui-id-2").closest(".ui-dialog-titlebar").remove();
},
});
$("#opener1").click(function() {
$("#dialog2").dialog('open');
});
});
Preview
Album: http://imgur.com/a/xinCe#0
Fiddle: http://jsfiddle.net/PTXZV/65/
Hi i need to reload the parent page when close button clicked on modal dialog.
my code is:
//customer edit start
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.post("sample.php",
{
name:myGroupId,
},
function(data,status){
});
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
I tried for close button as/
$( ".ui-dialog-titlebar-close" ).click(function() {
window.location.reload(true);
});
on below also tried inside.Nothing works.Can anybody help me.Thanks.
You can use native create event of dialogue to bind close button click. Like this:
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn",
create: function() {
$(this).closest('div.ui-dialog')
.find('a.ui-dialog-titlebar-close')
.click(function(e) {
window.location.reload(true);
e.preventDefault();
});}
});
Working Demo
Try to use window property , to get access to main page from iframe
top Returns the topmost browser window
can you give link to your page or example at jsbin?
Elements that are added to the DOM at runtime requires event delegation as your popup is generated using model (jQuery UI)
You can execute a click event of close button by doing this:
$(document.body).on('click','.ui-dialog-titlebar-close',function(e) {
e.preventDefault(); // To prevent default dialog close action
window.location.reload(true);
});
See the API documentation for .on()
May be this will fix. But i think close() of model popup is already defined in UI. You may prevent the default action.
Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?
The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});
I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
I am using the jquery-ui-dialog plugin
I am looking for way to refresh the page when in some circumstances when the dialog is closed.
Is there a way to capture a close event from the dialog?
I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.
I have found it!
You can catch the close event using the following code:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()
I believe you can also do it while creating the dialog (copied from a project I did):
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
Note close: CloseFunction
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});
$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
"close" property of dialog gives the close event for the same.
U can also try this
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
This is what worked for me...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Because no one actually created an answer with using .on() instead of bind() i decided to create one.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});
add option 'close' like under sample and do what you want inline function
close: function(e){
//do something
}
If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?
(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)
Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.
More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.
So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.
You may try the following code for capturing the closing event for any item : page, dialog etc.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});