Load content in iframe only when the window is shown, make sure refresh button works

[Matthew]

telerik mvc window: change the url of window when iframe is set to true

My goal is to have a set of windows for a page and for the content to not be loaded until the first time the window is opened.

Each window has a maximize, minimize, and refresh button.

Here is the script to load a window.

var w = $(id).data('kendoWindow');
var url = $(id).data('url');

            var loaded = $(id).data('load');
            if (loaded == null) {
                w.refresh({
                    url: url
                });
                w.setOptions({
                    contentUrl: url,
                });
                $(id).data('load', 'false');
            }

However, with this approach, the "refresh" button on the window seems to have no effect after the content loads.
How can I maintain the URL so the window'scontent can be loaded programmatically and the refresh button reload the content?

[Marin Bratanov]

Hello Matthew,

I have answered your support ticket with this question and I am posting the information here for anyone else trying to load the content in an iframe only when the window is shown.

I also edited the title of the post to make it clearer.

---

Below is an example that does GET requests on my end to the devised URL when the window is opened for the first time, and also when the built-in Refresh button is clicked. I highlighted and added comments on the key changes I made.

It also shows some ideas how you can debug and potentially work around issues where the content does not reload from the refresh button. We have not had such reports, however, and my best guess is that something may be being cached on the server or there may be some issue with the controller, and I'd recommend monitoring the network traffic to see what happens (see the attached video as a reference).

<button onclick="showDialog();">show window</button>

@(Html.Kendo().Window()
    .Name("myWindow")
    .Title("my title")
    .Iframe(true)
    .Visible(false)
    .Actions(a => a.Refresh().Minimize().Maximize())
    .Draggable()
    .Resizable()
    .Width(500)
    .Height(400)
    .HtmlAttributes(new { data_url = "/home/about" })
    .Events(ev => ev.Refresh("reloadFrame"))//to showcase a debugging approach only
)

<script>
    function showDialog() {
        var id = "#myWindow";
        var w = $(id).data('kendoWindow');
        var url = $(id).data('url');

        w.open(); //to show the window

        var loaded = $(id).data('load');
        console.log("loaded is: " + loaded);
        if (loaded == null || loaded == undefined) { //added the undefined check because the unset attribute is undefined, not null

            w.setOptions({ //first set the options and make sure they include an iframe so the widget is prepared for that
                            //without this, you need the .LoadContentFrom() configuration which will always make the GET upon initialization
                            //and whlie it could be some dummy action that just returns "plase wait, loading", its still unnecessary
                content: {
                    url: url,
                    iframe: true
                }
            });

            w.refresh({
                url: url
            });

            $(id).data('load', 'false');
        }
    }

    function reloadFrame(e) {
        //this just confirms the event fires on my end
        //if the GET request for the action does not return the expected data
        //call the refresh() method here
        //if you need to do that, add the handler when you first open the window and not in its intialization
        //as shown in the second example here: https://docs.telerik.com/kendo-ui/api/javascript/ui/window/events/refresh
        console.log(e);
    }
</script>

 

If this does not help you resolve this, you can hook to the refresh event as shown above (through the bind() method), and .destroy() the current window, and create a new one to fetch the desired content.

Regards,

Marin Bratanov
Progress Telerik