How to trigger the function inside kendo window? - javascript

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>

Related

Click once to open dialog

Im trying to use dialog() and it's working, but I have to click two times for the dialog text to open. My latest test was adding return false; after jQuery(this).dialog("close");.
jQuery("#divId").on('click', function() {
jQuery("divclass").dialog({
autoOpen: true,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {jQuery(this).dialog("close");return false;}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The definition of the jQuery dialog should be outside the click listener.
also, if you want to open it on click event, you should change the autoOpen to false.
$("#divId").on('click', function() {
$(".divclass").dialog( "open" );
});
$(".divclass").dialog({
autoOpen: false,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {$(this).dialog("close");return false;}
}
});

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.

iframe calls Action method twice while setting src attributes

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")';
}
});
},
}
});

jQuery dialog: external file load not working from button

Could someone please tell me what is up with this code? I can't for the life of me see whats stopping it from working. If I set it to autoOpen: true it works, but getting it to open from the button does not seem to work! Many thanks in advance.
Jquery:
$(document).ready(function () {
$("#pextension").load('tour_extension_lb.aspx').dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
});
$('a.extension-link').click(function () { $('#pextension').dialog('open'); return false; });
});
html:
OPEN EXTENSION DIALOG
<div id="pextension" class="dialogBox" style="display:none;"></div>
try by changing your code
function opendialog(){
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: loaddialogcontent();
});
}
function loaddialogcontent(){
$("#pextension").load('you file to load');
}
$(document).ready(function () {
$('a.extension-link').click(opendialog);
opendialog();
});
Try:
$(document).ready(function () {
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: function() {
$(this).load('tour_extension_lb.aspx');
}
});
$('a.extension-link').click(function (e) {
e.preventDefault();
$('#pextension').dialog('open');
});
});

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