I have a kendo window which is open as iframe and loads a page.
How can I close that window from a button (or by registering a startup script) from the loaded page?
Specifically I have the kendo window as below:
var win = j$("<div />").kendoWindow({
iframe: true,
actions: ['Close'],
draggable: true,
modal: true,
resizable: false,
title: title,
width: width,
height: height,
close: onClose,
content: 'mypage.aspx',
visible: false /*don't show it yet*/
}).center().open();
How can I close this window from mypage.aspx?
Thank you
It depends - if, for example, you have buttons inside your page, and you know the id beforehand, you can use the refresh event (which is triggered when the content has finished loading) to attach a close handler (fiddle):
var win = $("<div />").kendoWindow({
iframe: true,
actions: ['Close'],
draggable: true,
modal: true,
resizable: false,
title: title,
width: width,
height: height,
close: onClose,
content: 'mypage.aspx',
refresh: function () {
var that = this;
var iframe = $(this.element).find("iframe");
// find the element, e.g. a button you want to close with
var button = $(iframe).contents().find("#my-button");
$(button).click(function() {
that.close();
});
},
visible: true
}).data().kendoWindow.center().open();
As an alternative, you could access window.parent from within your iframe to get access to the Kendo Window, or to a close function you have defined in the parent window.
Note that this will only work if the content is served from the same domain, subdomain and port (same-origin policy).
Related
I used the jQuery dialog. The parent has user control which has an image to open the popup page when it is on click. The aspx page has cancel button to close jquery method and it is worked. I added the my jquery files on the parent page. I put the dialog div on parent page.
The problem is for closing the jquery dialog box and reloading the parent. If I added my jquery files on the header on the popup page, the function is called but the error is:
JavaScript runtime error: Object doesn't support property or method
'dialog'. Also the Cancel button didn't close the jquery.
However, when I uncomment my jquery files on the popup page, the cancel button works. But the another button which close the popup and reload parent page, the jquery method is not called and the popup page reload and not closed.
There is my code in jQuery
function openmodel(url, name, width, height) {
var maxHeight = dialogMaxHeight(height);
var dialogHeight = height;
if (height > maxHeight)
dialogHeight = maxHeight;
$('#dialog-model').dialog({
my: "center",
at: "center",
of: window,
autoOpen: false,
resizable: true,
max_height:'auto',
height: 'auto',
width: width,
title: name,
modal: true,
draggable: true,
open: function( ) {
$(this).load(url);
},
});
$('#dialog-model').dialog('open');
return false;
}
function CloseDialogmodel() {
$('#dialog-model').dialog({
autoOpen: false,
resizable: true,
title: name,
modal: true,
});
$('#dialog-model').dialog('close');
}
function CloseDialogModelAndReloadParent() {
CloseDialogmodel(); }
The code behind on aspx page:
Private Sub btnDone_Click(sender As Object, e As EventArgs) Handles btnDone.Click
'do something on server
Dim cs As ClientScriptManager = Page.ClientScript
cs.RegisterStartupScript(Page.GetType (), "closeandload", "CloseDialogBoxAndReloadParent();", True)
End Sub
Hope someone tell me how to resolve the problem, so I can close the popup page and reload it. Thanks in advance.
I have same issue and I handled it like below:
Child.aspx-Markup
<div class="button">
<asp:Button ID="btnDone" Text="Done" runat="server" />
<a ID="lnkClose" onclick="DecideForParent(false,true);return false;">
Close
</a>
</div>
<script type="text/javascript">
function DecideForParent(AllowReferesh, AllowClose) {
try {
if (AllowReferesh)
window.opener.HandlePopupResult();
}
catch (ex) {
}
// Close dialog
if (AllowClose)
$('#dialog-model').dialog('close');
}
</script>
Child.aspx-Code behind (C#)
private void btnDone_Click(object sender, EventArgs e)
{
// Do something ...
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallreturnToParent", "$(window).load(function () { DecideForParent(true,true);return false;});", true);
}
Parent.aspx-Markup
<script type="text/javascript">
function HandlePopupResultLURow() {
document.getElementById('<%=btnRefresh.ClientID%>').click();
}
</script>
Parent.aspx-Code behind (C#)
private void btnRefresh_Click(object sender, EventArgs e)
{
// Refresh your data
}
if i guess right, you create the dialog like this
$( "#dialog-confirm" ).dialog({
//....
modal: true,
buttons: {
"Do Action": function() {
CloseDialogBoxAndReloadParent();
},
"Cancel" : function() {
CloseDialogBox();
}
}
});
} );
if you add the element to the parameters
"Cancel" : function() {
CloseDialogBox(this);
}
you can access the right element
function CloseDialogBox(element) {
$(element).dialog('close');
}
function CloseDialogmodel () {
$('#dialog-model').dialog({ autoOpen: false, resizable: true, title: name, modal: true, });
$('#dialog-model').modal('hide');
}
Finally, I got it . I just need to respond redirect the parent page on btnDone_Click. Thanks.
I have been trying to setup a div to popup using jquery dialog
First, when user clicks on the button and opens the dialog then when he close the dialog it closes in the first click.
The second time when he tries to close the dialog it will again open the same popup and he needs to click the close button again to get it closed.
https://jsfiddle.net/xwpwku1w/31/
jQuery:
function ShowMyContainerDivForSC(containerID, title, width, height) {
if ($(containerID).data('uiDialog'))
$(containerID).dialog('destroy');
$(containerID).dialog({
width: width,
draggable: true,
height: height,
resizable: false,
title: title,
modal: false,
open: function (event, ui) {
$(this).show();
},
close: function (event) {
if (typeof AfterClose == "function") {
AfterClose(containerID);
}
//$(this).remove();-- commented cause it just removes the element.
}
});
return false;
}
Modified your code, var containerID = "#mpopup"; now works as expected for me https://jsfiddle.net/xwpwku1w/33 please check.
side note - would recommend you to save $(containerID) in a variable as it used 3 times, https://jsfiddle.net/xwpwku1w/34
I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?
Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.
Jquery dialog with Iframe not wroking in IE9.
I have an HTML Button on my parent.aspx
<input type="button" id="btnMessageFilter" class="mainFont" value="Message Filter"/>
On "btnMessageFilter" click, I want to open another aspx page (child.aspx) in Jquery dialog; I was doing this like this:
$(document).ready(function () {
$("#btnMessageFilter").live('click', function () {
var iframe = $("<iframe>").attr({
"src": "MessageFilter.aspx?btn=btnRefresh",
"height": "100%",
"marginwidth": "0",
"marginheight": "0",
"scrolling": "auto",
"frameborder": "0"
});
$("#dialog2").empty().append(iframe);
$("#dialog2").dialog({
modal: true,
title: 'Message Filter',
width: 400,
height: 450
});
$("#dialog2").parent().appendTo('form');
return false;
});
});
The code was works fine except for IE9. Any suggestions to fix the above cod or an alternate way to open another aspx in Jquery Dialog?
I am not sure what is wrong with your code. But I use iframes + jQuery-ui dialog on some pages of my website like this:
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false, // autoopen is set to false (we'll create only one dialog and open it on-demand)
modal: true,
resizable: false,
width: "auto", // set width and
height: "auto", // height to auto (we'll set width/height on the content)
close: function() {
iframe.attr("src", ""); // load blank document in iframe
// can be useful in situations, for example,
// when your frame is playing audio or video
}
});
$('#btnMessageFilter').click(function() {
iframe.attr("width", 400).attr("height", 200); // set width/height on the content
dialog.dialog("option", "title", "Message Filter").dialog("open");
iframe.attr("src", "http://example.com");
});
Demo here
I am replying to this thread as i didn't find the right solution for this problem yet.
To fix this issue make sure that you are setting the "iframe src at the end of your manipulation".
example - in above case src must be set after .dialog() call.
I want to enable a button after that i have opened a jquery dialog with option modal set to true.The button obviously is outside the dialog. I already know that this seems to be a strange request but i need this behaviour because I have a form in the dialog so after click on the button to submit the data I have to append the dialog at the end of the form and then click agin on the button that now is outside of the dialog.
Thank you in advance.
Use te open event that is fired whenever the dialog is opened
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourhiddenbutton').show();
}
});
EDIT - you could do it like this
$(function() {
$("#dialogRifiuto").dialog({
width: 'auto',
autoOpen: true,
closeOnEscape: true,
modal: true,
resizable: false,
open: function(){
//change the z-index and position the div where you want
$('#a').css({'z-index': 1005, 'position': 'absolute', 'top': 0 });
},
close: function(){
//go back to normal
$('#a').css({'z-index': 1, 'position': 'static' });
}
})
});
You can enable the button using
$('#myButton').removeAttr('disabled');