Closing a popup window from the Ajax content

3 posts, 1 answers
  1. Glyn
    Glyn avatar
    9 posts
    Member since:
    Jul 2013

    Posted 02 Oct 2013 Link to this post

    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?




  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 04 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Glyn
    Glyn avatar
    9 posts
    Member since:
    Jul 2013

    Posted 04 Oct 2013 Link to this post

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

Back to Top