Window created by script from script file not getting data object

[Shiva]

Hi,

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();

 

 

 

 

 

}

 

 

[Nohinn]

Remove the last comma in your kendoWindow instance, and be sure you are not (by any chance) creating in the dom tree two divid elements:
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"

});

[Shiva]

those are typose, while pasting code here so dont bother. Main problem is whenever i create a kendo window on fly from a script file on some click, then I am unable to get the data object of that so i can't close it without it. And I am able to see only one div in DOM but object is not accessible. If you try follow these steps, you may simulate my problem

->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....

[Nohinn]

Can you check if your "windowpage" is rendering inside an iframe?

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');

});

[Shiva]

Yes, it is with iframe.
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>

[Nohinn]

Wrong id:

$("#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.

[Shiva]

Thats my mistake..in actual code both are same while modifying to paste it here i didn't modify in all places, never mind..But still problem remains same. Dont bother my typo ones.

[Nohinn]

I have made a test project, the error you say "Cannot call..." happens because the content in the window isn't actually inside an iframe.

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

Solution b (working without iframe):

• This is weird, but if it is not working with an iframe it should close when you use:
  
  $('#mywindow').kendoWindow('close');

By the way, put the script of the shared page at the end of the body, not after it.
If you cannot get it working yet, could you upload a little project example to work on?

[Shiva]

Hi,

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.

 

[Nohinn]

I have made some tests and the kendoWindow uses an iframe if the content url is an absolute url, if it is relative it shows the content without iframe and the click on the button looks like is not able to close the window.
I will try to find a workaround without having to use an iframe.

[Nohinn]

Ok, I got it working without 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

[Shiva]

Hi, Not sure but iam not setting any layout to null and in my main page i have references to all script files including jquery one. So u r saying, while loading view in modal window it is re loading jquery files again? I completely understand that but how to see whether they r loading again? While observing DOM in IE developer tools i see script tag of jquery in between my div and window content. So how to stop this, if i remove layout i may loose css. Any common approach? And one thing here let say i have to load some site in kendo window and that site uses jquery so in thag case how we avoid this problem as its gonna load there too..lots of questions

[Nohinn]

If you really require jQuery to be loaded, and you're using razor layouts, you only have two options:
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.