iframe calls Action method twice while setting src attributes - javascript

I am calling action method from controller side through iframe.src attributes and it returns partial view but it calls twice what is the reason can any body help me on this
find my code here
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src='#Url.Action("TestPage", "Fax")';
},
close: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src="about:blank";
});

solved this issue by changing the code of iframe content change instead of src attribute
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("TestPage","Fax")',
type: 'GET',
cache:false,
success: function(data){
var frameSet = document.getElementById("testdailogFrame");
var iframedoc = frameSet.document;
if (frameSet.contentDocument)
iframedoc = frameSet.contentDocument;
else if (frameSet.contentWindow)
iframedoc = frameSet.contentWindow.document;
if (iframedoc){
iframedoc.open();
iframedoc.writeln(data);
iframedoc.close();
}
},
error: function () {
window.location.href = '#Url.Action("Index","Error")';
}
});
},
}
});

Related

How to close a jquery dialog from inside the open function?

I want to open this dot_card.php page in a dialog box. I want to interrupt the the form submission to do some stuff and them do an ajax call. After the form is submitted via ajax, I want to close the dialog box. But the code below doesn't seem to close it.
What am I doing wrong?
Here is my code.
$('<div><div id="addDotDiv"></div></div>').appendTo('body').dialog({
modal: false,
title: 'title',
closeOnEscape: true,
zIndex: 10000,
autoOpen: true,
minWidth: 650,
resizable: false,
position: { my: 'top+50', at: 'center', of: '#id-top' },
open: function() {
$('#addDotDiv').load('dot_card.php', '', function() {
$('#create_dot_form').submit(function(e) {
e.preventDefault();
var actionUrl = $('#create_dot_form').attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: $('#create_dot_form').serialize(),
success: function() {
$(this).closest('.ui-dialog').dialog('close');
}
});
});
});
},
close: function() {
$(this).remove();
}
});

How to trigger the function inside kendo window?

I have a page(A.html) that will open a kendo window with iframe(B.html) inside.
Here is my configuration to open the kendo window in A.html:
var contentUrl = 'B.html';
var window = $("<div id='dvB' />").kendoWindow({
title: "B", content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow');
window.open();
So now I want to call the retrieveFunction() in B.html from A.html.
I try to do it like below:
Window = $('#dvB').data('kendoWindow');
Window.retrieveFunction();//not work
var windowElement = $("#dvB");
var iframeDomElement = windowElement.children("iframe")[0];
var iframeDocumentObject = iframeDomElement.contentDocument;
iframeDocumentObject.retrieveFunction(); //not work
Anyone know how to achieve that?
You can trigger custom event from B.html and pass function as parameter and listening it on A.cshtml, something like this:
B.html
<script>
function retrieveFunction() {
console.log('retrieveFunction');
}
$(function () {
window.parent.$('body').trigger('customEvent', { func: retrieveFunction});
});
</script>
A.html
<script>
$(function () {
$('body').on('customEvent',
function(event, data) {
console.log('triggered');
data.func();
});
$("<div id='dvB' />").kendoWindow({
title: 'B', content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow').open();
});
</script>

How to use div.load properly when calling for a partial view in another controller?

So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button
Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.

Dialog is not draggable because of draggable background?

In my project I've a draggable page and on top of it I've popped a dialog and made it draggable. But somehow the dialog is not dragging. I dont know why it is happening.
dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable? Please do Help
This is dialog code:
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});

Redirect jquery ui dialog on close

I tried different ways to do this but i cant get it work. this is the code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { redirect here? how? }
});
});
});
Thanks dekomote for helping me. At his advice i solved the problem: here is the full working code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { location.href = 'url here' }
});
});
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { window.location.href = "page.html"; }
});
});
});
where "page.html" is the page you wish to redirect to on close

Categories