I'm trying to create a function like function(url,class) to create a modal,load in a page and then display it. however this function is dynamically called from reflection of method names in a SignalR hub, each time it opens up all modals, I need to be able to pass in a div ID unique to open up just the modal created in that instance, I have spent a while on this and have the below but can't get it to work... Please help!!!!
I think it needs to be some kind of anonymous callback, I have also messed about with eval() to no avail, thoughts?
So modalGo('/x.html','divid')
would create a modal open only for the specific variable created div?
function modalGo(url,x) {
var $dialog = $('<div id ="' + x + '></div>').load(url).dialog({
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: "",
zIndex: 190000
}, function() {
$(document.getElementById(x)).dialog('open');
});
}
i think you must append the div dialog
http://jsfiddle.net/NdN2L/
$(function(){
function modalGo(url,x) {
var dialog = $('<div>Ciao compa</div>');
$('#bibi').append(dialog);
dialog.dialog({
autoOpen: true,
modal: true,
height: 625,
width: 500,
title: "",
zIndex: 190000
}).show();
}
modalGo('http://www.pippo.com','test');
});
Related
I have the following javascript which opens a JQUERY Dialog box which contains a partial view:
html
<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>
javascript
$(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
});
$('#addressLookupBtn').click(function () {
$('#dialog').dialog('open');
});
});
When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'
I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:
var $this = $(this);
But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.
edit
If I add this:
$('#addressLookupBtn').click(function () {
$('#dialog').dialog().dialog('open');
});
The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.
The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.
Add and empty DIV inside the dialog then call .load on that.
<div id="dialog" title="Address Finder">
<div style="overflow: hidden;"></div>
</div>
Then the JS:
$('> div', this).load("#Url.Action("AddressLookup")");
I needed to initialize a new dialog each time I clicked the botton, this did the trick:
<script type="text/javascript">
$(function () {
$('#addressLookupBtn').click(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
width: 700,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
}).dialog('open');
});
});
</script>
I've got a JQuery dialog with an internal iFrame, which uses a php document to be filled with an image and some info. It works correctly, but if I click one of the images to go to the complete size image and show it in the iFrame, the dialog doesn't resize.
This is how the iframe and dialog get created, I've erased some extra code, but here it's the important thingy:
$('<iframe id="frameProductos" width="100%" src="articulos_info.php?codigo_art='+val+'" name="frameProductos">').appendTo('body');
var dialog = $("#frameProductos");
dialog.dialog({
title: 'Revisión de producto',
resizable: false,
modal: true,
position: ['center',150],
overlay: {
opacity: 0.5,
background: "black"
},
open: function( event, ui ) {
$('#frameProductos').width('100%');
},
close: function( event, ui ) {
$(this).dialog('destroy').remove();
},
width: 500,
height: 500,
buttons: {
"Cerrar": function () {
$(this).dialog('destroy').remove();
}
}
});
I need the dialog and iFrame to change their sizes if the content's size changes (when the image gets clicked, and the full resolution image appears).
Important Tip: you must update size of iframe after load completed
$(document).ready(function () {
//do somthing like this
window.parent.resizeIframe();
});
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]);
I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1
The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.
move the open into the callback...
$('#dialog').html(data).dialog('open');
I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}
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();
});