Here is the code I am using to initialize my dialog. I figured that since I the button doesn't exist which the page initially loads, I would need to use the on or live event to trigger the click (like in the Update call), but that hasn't worked. I confirmed that jQuery is finding the button using the console debugger but I cant for the life of me figure out how to trigger the button click.
Any suggestions?
$(function () {
var iframe = $('<iframe id="pageFrame" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen width="800" height="600"></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 950,
height: 600,
close: function () {
iframe.attr("src", "");
},
buttons: {
"Save": function () {
if ($("#pageFrame").contents().length > 0) {
if ($("#pageFrame").contents().find("#btnCreateContent").length > 0) {
$("#pageFrame").contents().find("#btnCreateContent").click()
}
else if ($fuze("#pageFrame").contents().find("#btnUpdateContent").length > 0) {
$("#pageFrame").contents().find("#btnUpdateContent").on("click", function () {
alert("update triggered");
});
}
else if ($("#pageFrame").contents().find("#btnCopyContent").length > 0) {
$("#pageFrame").contents().find("#btnCopyContent").click();
}
}
},
Cancel: function () {
if (confirm("Are you sure you want to exit?\n\nUnsaved changes will be lost.")) {
$(this).dialog("close");
}
}
}
});
});
This turned out to be the answer
$("#pageFrame").contents()[0].getElementById("btnUpdateContent").click();
Hope this helps somebody else out
Related
If I initialize my modal like this:
$("#dlg").dialog({
open: function (e) {
$(this).load('mvc action url');
},
close: function () {
$(this).dialog('destroy').empty();
},
modal: true
});
...it initializes as modal. However, if I leave out modal: true at initialization and try to set modality after the dialog is already open like this:
$("#dlg").dialog("option", "modal", true);
...it doesn't work. I know it's being set because I can alert the modal value after setting it. I'm also properly referencing jquery-ui's library because I can open it as modal at initialization.
Edit
Here's a fiddle:
http://jsfiddle.net/s9zmfkdn/1/
When you click open initially, it shows as modal as expected. Now remove the line as I instruct in the fiddle. When you open the dialog this time and then click Make it modal, nothing happens
So there are a few things that are causing this to fail to work as you anticipated.
You wrapped the initialization of the dialog in a function, so it was not globally available to other functions.
You destroy the dialog upon close, so it no longer exists to allow the change of the modal option.
It's not clear why you're doing it this way and I suspect there is something you're not sharing. Regardless, here is one example that works:
http://jsfiddle.net/Twisty/s9zmfkdn/2/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" />
JavaScript
$(function() {
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
Now if you need, you can define the object more globally and manipulate it like so:
http://jsfiddle.net/Twisty/s9zmfkdn/4/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" data-modal="true" />
JavaScript
$(function() {
var $diag = $("#basesystem");
$(".moduleloader").click(function() {
$diag.dialog({
open: function(e) {
$diag.html('<span>hello</span>');
},
close: function() {
$diag.dialog("destroy").empty();
},
modal: $("#makemodal").data("modal")
});
});
$("#makemodal").click(function() {
if ($(this).data("modal")) {
$(this).data("modal", false);
$(this).val("Make Modal");
} else {
$(this).data("modal", true);
$(this).val("Remove Modal");
}
});
});
This creates a new dialog every time and destroys it upon close. The only difference is that modal preference is stored someplace. You could also do this by storing it in global variable too.
Update 1
Based on your description, what you'll want to do is remove or create the ui-widget-overlay element.
Try this on for size: http://jsfiddle.net/s9zmfkdn/5/
$(function() {
function removeOverlay() {
$(".ui-widget-overlay").remove();
}
function setOverlay() {
if ($(".ui-widget-overlay").length) {
return false;
}
var $ov = $("<div>", {
class: "ui-widget-overlay"
}).css({
width: $(window).width(),
height: $(window).height(),
zIndex: 1001
});
$("body").append($ov);
}
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
var $button = $("<a>", {
href: "#"
}).html("Toggle Modal").button().click(function() {
if ($(".ui-widget-overlay").length) {
removeOverlay();
} else {
setOverlay();
}
}).appendTo($(this));
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
I have a modal popup just for comfirmation. When 'continue' is clicked it closes and it goes to the controller Action Delete and it returns. But after returning back to the view, the summary message validation div is not being showed which is what I want.
Here is the modal with div code:
<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this?</p>
</div>
<script type="text/javascript" lang="javascript">
//$(document).ready(function () {
$(function () {
var deleteLinkObj;
$('.delete-link').click(function () {
deleteLinkObj = $(this); //for future use
$('#delete-dialog').dialog('open');
return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
});
//})
</script>
So what i basically want it to do, is going to the controller if 'continue' is clicked, and show the summary message.
So how can I 'stop' the execution of the jquery function after comming from the controller?
I got the modal code from this site
You should use .append of jQuery inside your callback, after the post.
As you did not show any div. I'm assuming the div as
<div id="summary"></div>
This is how you the final dialog is :
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
$('#summary').append(data); // this will append the content in data to your div with id as summary
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
Hope it helps
I'm able to load and reopen jQueryUI Dialogs with a Datepicker as the first element in all browsers I've tried ... except IE 9.
If a Datepicker is the first element to receive focus when the Dialog opens, the Datepicker will auto launch. I'm able to suppress this behavior in FireFox and Chrome. IE 9 still launches the Datepicker on creation.
My open and close function for the Dialog are:
open: function (event, ui) {
$('#Date').blur(); // kill the focus
if ($('#Date').hasClass('hasDatepicker')) {
$("#Date").datepicker('enable');
}
else {
$("#Date").datepicker();
}
},
close: function (event, ui) {
$("#Date").datepicker('disable');
}
Here is the 'click' code
var dialogs = {};
$('#clicker').click(function (e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function (id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end()
.appendTo(document.body)
.dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: see above
close: see above
};
jsfiddle showing this IE9 problem http://jsfiddle.net/stocksp/DdRLp/8/
What can I do to get IE to behave, short of not placing the Datepicker as the first element?
I don't have IE9 available at home so give this a try: http://jsfiddle.net/DdRLp/10/
I added a class to the datepicker input to make it easier to grab.
$(function() {
$(document).on("dialogcreate", "#dlg", function() {
$(".date_picker").datepicker();
$(".date_picker").datepicker("disable");
});
var dialogs = {};
$('#clicker').click(function(e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function(id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end().appendTo(document.body).dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: function(event, ui) {
$("div#dlg form input").blur(); //takes focus off inputs
$(".date_picker").datepicker("enable");
},
close: function(event, ui) {
$(".date_picker").datepicker("disable");
}
});
};
});
In docs I didn't see such information.
There are options to close dialog in such cases:
1) push Esc;
2) click on "OK" or "Close" buttons in the dialog.
But how to close dialog if click outside?
Thanks!
Here are 2 other solutions for non-modal dialogs:
If dialog is non-modal Method 1:
method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2:
http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
I found solution on ryanjeffords.com:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$('.ui-widget-overlay').live("click",function(){
$("#dialog").dialog("close");
});
});
</script>
If dialog is modal, then paste these 3 lines of code in the open function when you create your dialog options:
open: function(event,ui) {
$('.ui-widget-overlay').bind('click', function(event,ui) {
$('#myModal').dialog('close');
});
}
Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
The plugin is also on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside
Laurent
This is my solution.
I have, for example
<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>
Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.
// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
if( $("div.ui-dialog").is(":visible") )
{
var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
if ($("#"+openDialogId).dialog("isOpen"))
{
$("#"+openDialogId).dialog('close');
}
}
});
On my site I've a button that when is clicked open a dialog with a form already populated for send an e-mail. In this form I have a button called "invia" to send mail, the mail are sent correctly, what does not work it is closeing dialog after send e-mail. Here attacched my code:
Thanks in advance for help.
$("#invio_mail").live("click", function() {
if (m=="") //that's to prevent multiple dialog opening
{
$.post("./php/testo_mail_xml.php",
{contratto:contratto, piatta:piatta, testo:"stampa_login"},
function(xml)
{
if ($(xml).find("status").text()==1)
{
$("#ris_dial").load("./schemi/sch_mail.htm");
delay( function() { //that's a function for delay population
scorriDati(xml, "forMail"); //that's function for populate
}, 500);
var dm = {
modal: true,
height: 'auto',
width: 'auto',
title: "<span class='ui-icon ui-icon-info'></span> Invio Mail",
closeOnEscape: false,
buttons: {"Invia": function() {
$.post("./php/mail.php",
{dati:$("#forMail").serialize()},
function(xml)
{
if ($(xml).find("status").text()==1)
{
//var opt={close:true};
//$("#ris_dial").dialog(opt);
$(this).dialog("close"); //this is not wrking code
}
else
$(this).append($(xml).find("errore").text());
},"xml"
);
}
}
};
$("#ris_dial").dialog(dm);
}
else
{
$("#ris_dial").empty().append($(xml).find("errore").text());
$("#ris_dial").dialog(dialogError);
}
},
"xml"
);
m++;
}
});
the context of this changes inside of $.post()
save this before you call post:
var $this = $(this);
and change your call to close to be:
$this.dialog("close")