Hello, I am building some kind of single page application with Kendo UI controls included on each view;
Navigation between sites is written in javascript with no server page reload (main div container is re-rendering depending on the content via ajax call).
Main view contains Kendo.Window, and looks like this:
My kendo window render function is placed in script file, which starts with the page, when it is "$(document).ready()"; here is the code:
When I open this view for the first time and click the button to open the window - it becomes visible; when I click on "#WindowButton" it shows one alert "button clicked!";
Problem starts, when I go to other view, and back again to this first view (I remind: with no page refresh, it is single page app) - then, when I open the window, and click on "#WindowButton", alert "button clicked!" openes two times - one after the other. When I go to other view and back to this once again (for the 3rd time), it shows 3 times and so on;
I noticed that all kendo controls are rendering on every single view load, and the old ones aren't replaced by new rendered, but they are duplicating, below the code from google chrome developer tools:
First view opened for the first time:
Control is rendered on the 7th line - when I open window, property "display" changes its value from "none" to "block" - it is obvious and correct;
When I open the same view for the second time (without server page reload), my HTML looks like this:
As you can see, kendo window control is rendered two times, so when I call button, placed on a window, the action is called two times :/ (action is recognized by jQuery function when element with id="WindowButton" is clicked - now there are two same buttons with the same ID). When I go to this page 3rd, 4th, 5th and so on, I receive html with as many duplicates of kendo controls as many times I have been opening this view.
Ofcourse it is simplified code above, true code is much, much heavier.
When I click refresh button on my web browser - html shows one kendo window, and all is back set to normal.
What should I do to avoid this problem? Maybe should I manually delete kendo html elements from view "on view detach" in javascript function? Are there any detach functions for kendo UI controls?
Navigation between sites is written in javascript with no server page reload (main div container is re-rendering depending on the content via ajax call).
Main view contains Kendo.Window, and looks like this:
<
div id="content"
>
<!-- SOME PAGE CONTENT-->
</
div
>
<
div
id
=
"Window"
>
<
div
class
=
"group"
>
<
div
class
=
"toolbar"
>
<
input
type
=
"WindowButton"
id
=
"Add"
class
=
"icon add"
/>
</
div
>
<!-- SOME WINDOW CONTENT-->
<
div
>
</
div
>
jQuery(
"#Window"
).kendoWindow({
"open"
:
//some function,
"refresh"
:
//some function,
"height"
:
"340px"
,
"width"
:
"550px"
,
"modal"
:
true
,
"title"
:
//some title,
"draggable"
:
true
,
"visible"
:
false
});
When I open this view for the first time and click the button to open the window - it becomes visible; when I click on "#WindowButton" it shows one alert "button clicked!";
Problem starts, when I go to other view, and back again to this first view (I remind: with no page refresh, it is single page app) - then, when I open the window, and click on "#WindowButton", alert "button clicked!" openes two times - one after the other. When I go to other view and back to this once again (for the 3rd time), it shows 3 times and so on;
I noticed that all kendo controls are rendering on every single view load, and the old ones aren't replaced by new rendered, but they are duplicating, below the code from google chrome developer tools:
First view opened for the first time:
01.
<
html
>
02.
<
head
>...something here...</
head
>
03.
<
body
>
04.
<
div
id
=
"content"
>
05.
SOMETHING HERE
06.
</
div
>
07.
<
div
class
=
"k-widget k-window"
data-kendo-role
=
"draggable"
style
=
"padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;"
>
08.
</
body
>
09.
</
html
>
Control is rendered on the 7th line - when I open window, property "display" changes its value from "none" to "block" - it is obvious and correct;
When I open the same view for the second time (without server page reload), my HTML looks like this:
01.
<
html
>
02.
<
head
>...something here...</
head
>
03.
<
body
>
04.
<
div
id
=
"content"
>
05.
SOMETHING HERE
06.
</
div
>
07.
<
div
class
=
"k-widget k-window"
data-kendo-role
=
"draggable"
style
=
"padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;"
>
08.
<
div
class
=
"k-widget k-window"
data-kendo-role
=
"draggable"
style
=
"padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;"
>
09.
</
body
>
10.
</
html
>
As you can see, kendo window control is rendered two times, so when I call button, placed on a window, the action is called two times :/ (action is recognized by jQuery function when element with id="WindowButton" is clicked - now there are two same buttons with the same ID). When I go to this page 3rd, 4th, 5th and so on, I receive html with as many duplicates of kendo controls as many times I have been opening this view.
Ofcourse it is simplified code above, true code is much, much heavier.
When I click refresh button on my web browser - html shows one kendo window, and all is back set to normal.
What should I do to avoid this problem? Maybe should I manually delete kendo html elements from view "on view detach" in javascript function? Are there any detach functions for kendo UI controls?