Closing a popup window from the Ajax content

[Glyn]

Hi all,
I have a popup window which loads the content from another source.

var kendoOrderWindow = $("<div id='orderWindow' ></div>").kendoWindow({
 title: "Order "+orderIndex,
 resizable: false,
 modal: true,
 width: 1000,
 draggable: false,
 content: "myURLcontent",
 open: function (e) {
  this.wrapper.css({ top: 50 });
  }
});
kendoOrderWindow.data("kendoWindow")
 .center()
 .open()

The loaded content has a button, which should close the window

$("#button_close").click(function(e) {
    e.preventDefault();
    $('#orderWindow').data("kendoWindow").close();
});

What I find is that the close button works once, but if another orderWindow is opened after, the closebutton click event no longer fires.
If I reload the calling page the event will work again (but only once)

I have searched the forums and tried using
  $(this).closest(".k-window-content").data("kendoWindow").close();
and changing the click event to an onClick javascript function.
But none of these things seem to help.

Any ideas, suggestions to what I'm missing or doing wrong?

[Alexander Popov]

Hello Glyn,

In this scenario I would recommend you to use the Window's open event to find the close button and attach a handler to its click event. Here is an example:  

open: function (e) {
   var that = this;
   this.element.find("#close_button").click(function(){that.close()});
 }

 
Regards,
Alexander Popov
Telerik

[Glyn]

Hi Alexander,

Thanks for the reply.
The element.find did not seem to find my button element. I think it may be a timing issue with loading content with the kendowindow content parameter.
Either way, I found a work around.

To help any others that might have a similar issue:
I managed to get round this by loading the content with $.ajax on the window.open event, into a pre-existing div which already had a close button.

<div id='orderWindow' >
    <div id='orderPage'>
    </div>
    <div class='formButtons' >
        <button id='button_close' class="k-button" >Close</button>
    </div>
</div>

var orderWindow = $('#orderWindow').kendoWindow({
    title: "Order "+orderIndex,
    resizable: false,
    modal: true,
    width: 1000,
    draggable: false,
    open: function (e) {
        this.wrapper.css({ top: 50 });
        $.ajax({
            type: "POST",
            url: "myContentURL",
            async: true,
            success: function(msg){
                $('#orderPage').html(msg);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus+' '+errorThrown+' '+XMLHttpRequest.responseText);
            }
        });
    }
}).data("kendoWindow").center().open();

$("#button_close").click(function(){
    var orderWindow = $('#orderWindow').data("kendoWindow");
    orderWindow.close();
});