I used a script file (xxx.js) where i created a div with id = "#divid" and then created the window. I added this script file to my page in head tag. Now if i try to access the div with id "#divid" i am able to access it but if i try to access
$(
'#divid')..data("kendoWindow"), it is giving null error. if i create the kendo window in the page itself in a script tag, iam able to access the data object but if i do the same in seperate js file, i am not able to. Is there any problem with this type of creating? Please help me out. Following is code snippet in my .js file.
$(
'[data-class=MyModal]').click(openmodal);
function openmodal(event) {
var dialog = $('#divid');
debugger;
if (dialog.length == 0) {
dialog = $(
'<div id="divid" style="display:none"></div>').appendTo('body');
}
dialog.kendoWindow({
modal:
true,
title: "Some Title"
,
actions: [
"Close"],
draggable: true
,
resizable: true
,
height: "400px"
,
width: "400px"
,
content: "myurlofsomepagewithinsamedomain",
});
dialog.data(
"kendoWindow").center();
dialog.data(
"kendoWindow").open();
}
event.preventDefault();
}
12 Answers, 1 is accepted
P.S: By the way, looks like you have more closing '}' than opening '{', not sure if you did not post the full code but that event.preventDefault() line is out of the openmodal function
dialog.kendoWindow({
modal:
true
,
title:
"Some Title"
,
actions: [
"Close"
],
draggable:
true
,
resizable:
true
,
height:
"400px"
,
width:
"400px"
,
content:
"myurlofsomepagewithinsamedomain"
});
->Create a span with id
->take a .js file and add it in head tag
->inside that take the span with id selector
->and define click event to have open the kendo window in it with url as another page say "windowpage"
-> in the "windowpage" page create a close button and define a click event and try get the data object of window which you created on fly in script file
->here I am not getting it
->one more thing i tried defining the close event inside the script file, even not able to get the kendo window object
I found a round about for this as follows but i dont want to do in that way.
->I created another close in main page and defined its click in js file after window creation to close it.
->i am triggering this close button click from "windowpage" close button click
It is like indirectly - windowpage calling main page click which can close the window...which i dont want as i have to make this main page close button as invisible....
If that is the case, and both pages are in the same domain, to close the window from the inner button you should do this:
$(
'#innerButton'
).click(
function
(){
parent.$(
'#myWindow'
).kendoWindow(
'close'
);
});
But no luck, it is giving error "Cannot call method 'close' of kendoWindow before it is initialized"
My complete code is as follows in simple...
Main page code:
<li id="TestID" data-title="Test This" data-content="/Shared/SharedView?labelText=Test" data-resizable="True" data-draggable="True" data-height="480px" data-width="850px" data-class="ModalLink" jQuery171026112451566937705="2" jQuery17105815626872866682="3">
This is seperate .js file which is included in head
$('[data-class=ModalLink]').click(openkendo);
function openkendo(event) {
var contentUrl = $(this).attr("data-content");
if (!contentUrl) {
contentUrl = $(this).attr("href");
}
if (contentUrl) {
var dialog = $('#mywindow');
if (dialog.length == 0) {
dialog = $('<div id="mywindow" style="display:none;"></div>').appendTo('body');
}
dialog.kendoWindow({
modal: true,
title: $(this).attr("data-title"),
actions: ["Close"],
draggable: $(this).attr("data-draggable"),
resizable: $(this).attr("data-resizable"),
height: $(this).attr("data-height"),
width: $(this).attr("data-width"),
content: contentUrl,
});
dialog.data("kendoWindow").center();
dialog.data("kendoWindow").open();
}
event.preventDefault();
}
Now the code for SharedView is as follows:
<!DOCTYPE html>
<html>
<head>
<title>SharedView</title>
</head>
<body>
<div>
ohter stuff...
<span id = 'btnCloseLocal' >Close</span>
</div>
</body>
<script type="text/javascript">
$("#btnCloseLocal").click(function () {
debugger;
parent.$('#modalwindow').kendoWindow('close');
});
</script>
</html>
$(
"#btnCloseLocal"
).click(
function
() {
debugger;
parent.$(
'#mywindow'
).kendoWindow(
'close'
);
});
You created the window div with "mywindow" as its id, but you were trying to get an element with id = modalwindow, as it does not exist you get the undefined error when you try to call the kendoWindow('close') function.
Solution a (forcing to use an iframe):
- Along with the properties you use for your kendoWindow instance, set iframe: true
$(
'#mywindow'
).kendoWindow({
...
iframe:
true
});
- Now the code I posted earlier will work
- This is weird, but if it is not working with an iframe it should close when you use:
$(
'#mywindow'
).kendoWindow(
'close'
);
If you cannot get it working yet, could you upload a little project example to work on?
you are right. It worked finally with following code after setting iframe as true. Thanks a lot.
parent.$(
'#modalwindow').data("kendoWindow").close();
But i have read that by default iframe is true in documentation and it is even behaving as if some iframe is there (like posting from window doesn't refresh main window..etc). So it means by default kendow is dynamically adding iframe to DOM but without us accessing it? And if by default there is no iframe, i would be able to access without parent. even i tried that earlier but no luck
So what i can infere is if we dont give iframe as true, internally it adds an iframe but we can't access it within DOM at the same time we can't access directly without parent..either way i didn't get window object. That is what happened till now with me???
Iframe: true solved my problem but some layout issues appear, which i will solve later.
Thanks a lot once again.
I will try to find a workaround without having to use an iframe.
Though in the code you posted there is no reference... are you loading again jQuery in the shared view?
If I'm right and you're referencing it again, when the window loads the content reloads jQuery and then everything until that moment made with jQuery (the kendoWindow instance, etc.) will be destroyed as you're overriding the jQuery instance.
Sample working: http://jsbin.com/axusom/1/edit
1) Reference it on the views you will not load in a kendoWindow at the end of all your html code
2) Load the pages using the iframe option
As for the site you will have to load in the kendoWindow if you use the absolute url as the content for the kendoWindow it will use an iframe, so no problem for the jQuery instances as they will be in different environments.
To sum up, the problem with the jQuery override is present only if you use a relative url, because kendoWindow loads the page without using an iframe in that case.
P.S: To see whether jQuery loads again, you can use jsbin.com and copy the code from the url I posted earlier and in the loaded page set a reference to jQuery too.
When you have all ready, with the developer tools of chrome (or firebug, ...) look at the .data() of the window div element, you will see that it has a role definition but the kendoWindow definition (containing all the functions of it, etc.) will be missing.
http://jsbin.com/axusom/2/edit
There you have the updated sample, it will not close on this version because the loaded page is creating a new instance of jQuery.