I have a SplitView with links in the left pane. All links are pointing to one external view, which is called with different parameters at the URL, so the response is always another one.
When you take the HTML code below, you will see, that the external view site is loaded only once, not taking care about the URL parameters given. Can I disable this external view load caching?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WG4 - Online visualization</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<!-- //-->
<div id="home" data-role="splitview" data-layout="default">
<div data-role="pane" data-layout="side-default" data-transition="slide">
<div data-role="view" data-title="WG4 - Online visualization" id="side-root">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Cluster View
<ul>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Coal </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a15635%2c%22ActualPower%22%3a6257%2c%22GaugeValue%22%3a40.019187719859290054365206268%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
6257 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas BeNeLux </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a10238%2c%22ActualPower%22%3a5227%2c%22GaugeValue%22%3a51.054893533893338542684117992%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5227 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas FR & SE </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a8635%2c%22ActualPower%22%3a5363%2c%22GaugeValue%22%3a62.107701215981470758540822235%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5363 MW
</td>
</tr>
</table>
</a>
</li>
</ul>
</li>
<li>Country View
<ul data-role="listview" data-style="inset">
<li>
<a href="/DeviceScaled/CountryMenu?country=Italy" data-role="button">
<table>
<tr>
<td>Italy </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a201%2c%22ActualPower%22%3a128%2c%22GaugeValue%22%3a63.681592039800995024875621891%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
128 / 201 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=BeLux" data-role="button">
<table>
<tr>
<td>BeLux </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a3308%2c%22ActualPower%22%3a1907%2c%22GaugeValue%22%3a57.648125755743651753325272068%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
1907 / 3308 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Netherlands" data-role="button">
<table>
<tr>
<td>Netherlands </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a351%2c%22ActualPower%22%3a231%2c%22GaugeValue%22%3a65.811965811965811965811965812%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
231 / 351 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Germany" data-role="button">
<table>
<tr>
<td>Germany </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a352%2c%22ActualPower%22%3a263%2c%22GaugeValue%22%3a74.715909090909090909090909091%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
263 / 352 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=France" data-role="button">
<table>
<tr>
<td>France </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a146%2c%22ActualPower%22%3a142%2c%22GaugeValue%22%3a97.26027397260273972602739726%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
142 / 146 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Poland" data-role="button">
<table>
<tr>
<td>Poland </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a362%2c%22ActualPower%22%3a309%2c%22GaugeValue%22%3a85.3591160220994475138121547%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
309 / 362 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Spain" data-role="button">
<table>
<tr>
<td>Spain </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a218%2c%22ActualPower%22%3a180%2c%22GaugeValue%22%3a82.56880733944954128440366972%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
180 / 218 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Greece" data-role="button">
<table>
<tr>
<td>Greece </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a100%2c%22ActualPower%22%3a86%2c%22GaugeValue%22%3a86%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
86 / 100 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
<ul data-role="listview">
</ul>
</div>
<div data-role="layout" data-id="side-default" data-show="toggleBackButton">
<div data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>
<div data-role="pane" data-layout="main-default" id="main-pane">
<div data-role="view" data-title="Current state">
<div>
<center>
<div class="gauge-container" style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a35023%2c%22ActualPower%22%3a8597%2c%22GaugeValue%22%3a24.546726436912885817891100134%2c%22Available%22%3a1%7d); width: 90%; height: 20px; margin: 5px">
<center>
<div style="margin:5px; color: darkgray">8597 / 35023 MW</div>
</center>
</div>
</center>
</div>
</div>
<div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
<div id="product-details">
</div>
</div>
<div data-role="layout" data-id="main-default">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>
</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">WG4 - Online visualization</div>
</header>
</section>
<style>
.infobox
{
background-color: lightgray;
vert-align: middle;
vertical-align: middle;
horiz-align: center;
mso-horizontal-page-align: center;
}
ul li, div, ul li a
{
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
#mainView ul li
{
padding: 0 !important;
}
.small-info {
font-size: 9px;
}
ul li table tr, ul li table tr td, ul li table tr * {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
</style>
<script src="/Scripts/jquery-1.8.2.js"></script>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script>
window.app = new kendo.mobile.Application(document.body,
{
transition: 'fade'
});
</script>
</body>
</html>
When you take the HTML code below, you will see, that the external view site is loaded only once, not taking care about the URL parameters given. Can I disable this external view load caching?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WG4 - Online visualization</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<!-- //-->
<div id="home" data-role="splitview" data-layout="default">
<div data-role="pane" data-layout="side-default" data-transition="slide">
<div data-role="view" data-title="WG4 - Online visualization" id="side-root">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Cluster View
<ul>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Coal </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a15635%2c%22ActualPower%22%3a6257%2c%22GaugeValue%22%3a40.019187719859290054365206268%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
6257 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas BeNeLux </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a10238%2c%22ActualPower%22%3a5227%2c%22GaugeValue%22%3a51.054893533893338542684117992%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5227 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas FR & SE </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a8635%2c%22ActualPower%22%3a5363%2c%22GaugeValue%22%3a62.107701215981470758540822235%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5363 MW
</td>
</tr>
</table>
</a>
</li>
</ul>
</li>
<li>Country View
<ul data-role="listview" data-style="inset">
<li>
<a href="/DeviceScaled/CountryMenu?country=Italy" data-role="button">
<table>
<tr>
<td>Italy </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a201%2c%22ActualPower%22%3a128%2c%22GaugeValue%22%3a63.681592039800995024875621891%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
128 / 201 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=BeLux" data-role="button">
<table>
<tr>
<td>BeLux </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a3308%2c%22ActualPower%22%3a1907%2c%22GaugeValue%22%3a57.648125755743651753325272068%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
1907 / 3308 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Netherlands" data-role="button">
<table>
<tr>
<td>Netherlands </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a351%2c%22ActualPower%22%3a231%2c%22GaugeValue%22%3a65.811965811965811965811965812%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
231 / 351 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Germany" data-role="button">
<table>
<tr>
<td>Germany </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a352%2c%22ActualPower%22%3a263%2c%22GaugeValue%22%3a74.715909090909090909090909091%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
263 / 352 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=France" data-role="button">
<table>
<tr>
<td>France </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a146%2c%22ActualPower%22%3a142%2c%22GaugeValue%22%3a97.26027397260273972602739726%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
142 / 146 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Poland" data-role="button">
<table>
<tr>
<td>Poland </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a362%2c%22ActualPower%22%3a309%2c%22GaugeValue%22%3a85.3591160220994475138121547%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
309 / 362 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Spain" data-role="button">
<table>
<tr>
<td>Spain </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a218%2c%22ActualPower%22%3a180%2c%22GaugeValue%22%3a82.56880733944954128440366972%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
180 / 218 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
<li>
<a href="/DeviceScaled/CountryMenu?country=Greece" data-role="button">
<table>
<tr>
<td>Greece </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a100%2c%22ActualPower%22%3a86%2c%22GaugeValue%22%3a86%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
86 / 100 MW <b>Spot:</b> 45,6€/MWh <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
<ul data-role="listview">
</ul>
</div>
<div data-role="layout" data-id="side-default" data-show="toggleBackButton">
<div data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>
<div data-role="pane" data-layout="main-default" id="main-pane">
<div data-role="view" data-title="Current state">
<div>
<center>
<div class="gauge-container" style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a35023%2c%22ActualPower%22%3a8597%2c%22GaugeValue%22%3a24.546726436912885817891100134%2c%22Available%22%3a1%7d); width: 90%; height: 20px; margin: 5px">
<center>
<div style="margin:5px; color: darkgray">8597 / 35023 MW</div>
</center>
</div>
</center>
</div>
</div>
<div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
<div id="product-details">
</div>
</div>
<div data-role="layout" data-id="main-default">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>
</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">WG4 - Online visualization</div>
</header>
</section>
<style>
.infobox
{
background-color: lightgray;
vert-align: middle;
vertical-align: middle;
horiz-align: center;
mso-horizontal-page-align: center;
}
ul li, div, ul li a
{
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
#mainView ul li
{
padding: 0 !important;
}
.small-info {
font-size: 9px;
}
ul li table tr, ul li table tr td, ul li table tr * {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
</style>
<script src="/Scripts/jquery-1.8.2.js"></script>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script>
window.app = new kendo.mobile.Application(document.body,
{
transition: 'fade'
});
</script>
</body>
</html>
14 Answers, 1 is accepted
0
Hi Rita,
Yes, this is possible. Please check the respective topic in our documentation.
Regards,
Petyo
Telerik
Yes, this is possible. Please check the respective topic in our documentation.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 14 Dec 2014, 10:40 PM
I have a similar problem. My setup is similar to Rita's but instead of passing the external view's parameter through the URL query string, I'm setting it in localStorage. I'm doing it this way because I want this app to work offline, and I don't want to have to include each possible URL in the AppCache manifest file. How do I get the external view to refresh on each list item click when the URL is the same each time?
<div data-role="view" id="side-Checklists" data-title="Checklists" data-init="checklistSideViewInit" >
<ul id="sitesChecklists"></ul>
</div>
<script type="text/x-kendo-template" id="sitesChecklistHistoryTemplate">
<a>${ChecklistDate}</a>
</script>
<script>
function checklistSideViewInit(e) {
e.view.element.find("#sitesChecklists").kendoMobileListView({
dataSource: sitesChecklistHistoryDataSource,
template: kendo.template($("#sitesChecklistHistoryTemplate").html()),
click: function (e) {
localStorage["ClickedChecklist"] = e.dataItem.ChecklistFileName;
var pane = $("#main-pane").data("kendoMobilePane");
pane.navigate("ChecklistOld.html");
}
});
}
</script>
<div data-role="view" id="side-Checklists" data-title="Checklists" data-init="checklistSideViewInit" >
<ul id="sitesChecklists"></ul>
</div>
<script type="text/x-kendo-template" id="sitesChecklistHistoryTemplate">
<a>${ChecklistDate}</a>
</script>
<script>
function checklistSideViewInit(e) {
e.view.element.find("#sitesChecklists").kendoMobileListView({
dataSource: sitesChecklistHistoryDataSource,
template: kendo.template($("#sitesChecklistHistoryTemplate").html()),
click: function (e) {
localStorage["ClickedChecklist"] = e.dataItem.ChecklistFileName;
var pane = $("#main-pane").data("kendoMobilePane");
pane.navigate("ChecklistOld.html");
}
});
}
</script>
0
Hello Mark,
you can use the data-reload=true configuration option of the external view.
Regards,
Petyo
Telerik
you can use the data-reload=true configuration option of the external view.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2015, 08:20 PM
[quote]Petyo said:
you can use the data-reload=true configuration option of the external view.
[/quote]
Thank you for your response, Petyo. By external view do you mean the view in ChecklistOld.html in my example above? I have put data-reload=true in that view and it has not fixed the problem.
When I first click a list item in my side pane the main pane navigates to ChecklistOld.html. If I click a different item which should refresh or reload the ChecklistOld.html view in the main pane it doesn't. Nothing happens.
you can use the data-reload=true configuration option of the external view.
[/quote]
Thank you for your response, Petyo. By external view do you mean the view in ChecklistOld.html in my example above? I have put data-reload=true in that view and it has not fixed the problem.
When I first click a list item in my side pane the main pane navigates to ChecklistOld.html. If I click a different item which should refresh or reload the ChecklistOld.html view in the main pane it doesn't. Nothing happens.
0
Hello Mark,
I am not sure why that option does not work for you. It is used in numerous client projects, and none of our customers has reported it as not working. A thing you may do is to use your development tools to check if the HTTP request is performed correctly again and if the server returns the correct response.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 12 Jan 2015, 09:22 PM
This is my view in ChecklistOld.html:
The HTTP request does not seem to be performed correctly the second time. Because the application is cached and it's working offline it wouldn't be going to the server, but ChecklistOld.html does not seem to be requested a second time when clicking on a second list item. The data-show function does not get called the second time.
I have another link in the side view outside the list (not in the snippet a few replies up) that replaces the main pane with a different view. If I click that one it replaces the main pane, and then if I click back on a different list item then ChecklistOld.html is requested again, and the correct data is shown. The problem only occurs when I click one list item after another, so I want the view main-OldChecklist shown above to reload. It does not reload.
<div data-role="view" id="main-OldChecklist" data-title="Checklists" data-reload="true" data-init="oldChecklistViewInit" data-show="oldChecklistViewShow"> <ul id="oldChecklistList"></ul></div>The HTTP request does not seem to be performed correctly the second time. Because the application is cached and it's working offline it wouldn't be going to the server, but ChecklistOld.html does not seem to be requested a second time when clicking on a second list item. The data-show function does not get called the second time.
I have another link in the side view outside the list (not in the snippet a few replies up) that replaces the main pane with a different view. If I click that one it replaces the main pane, and then if I click back on a different list item then ChecklistOld.html is requested again, and the correct data is shown. The problem only occurs when I click one list item after another, so I want the view main-OldChecklist shown above to reload. It does not reload.
0
Mark
Top achievements
Rank 1
Rank 1
answered on 13 Jan 2015, 10:38 PM
Could you show me to an example or demo of data-reload working when the url to the remote view is exactly the same for each click?
0
Hello Mark,
find attached an example and a screenshot which shows the http requests.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 14 Jan 2015, 08:44 PM
Hello Petyo,
I have edited the index.html in your example to make it a split pane, like I'm trying to do. When I click the button the http request is sent the first time. If I click again there is no request. How do I get it to request again?
See attached files.
I have edited the index.html in your example to make it a split pane, like I'm trying to do. When I click the button the http request is sent the first time. If I click again there is no request. How do I get it to request again?
See attached files.
0
Hello Mark,
now I understand your case - you are trying to refresh the currently displayed view. This is not supported out of the box. However, you may destroy the view, and then remove its element, then navigate to it again.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 18 Jan 2015, 08:23 PM
[quote]Petyo said:
you are trying to refresh the currently displayed view. This is not supported out of the box. However, you may destroy the view, and then remove its element, then navigate to it again. [/quote]
Could you please provide an example on how this is done? Thank you.
0
Hello Mark,
I have updated the link in my post with a code example. Please check it.
Regards,
Petyo
Telerik
I have updated the link in my post with a code example. Please check it.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 21 Jan 2015, 01:04 AM
Petyo,
I have attempted to destroy and remove the view before navigating to it again, but I still can't seem to get it to work. See my attached example. Click on Button 1 in the side pane. The main pane shows the view from bar.html. Click on Button 2. The main pane goes blank, as if the destroy and remove work, but then it doesn't navigate to the view in bar.html again.
I have attempted to destroy and remove the view before navigating to it again, but I still can't seem to get it to work. See my attached example. Click on Button 1 in the side pane. The main pane shows the view from bar.html. Click on Button 2. The main pane goes blank, as if the destroy and remove work, but then it doesn't navigate to the view in bar.html again.
0
Hello Mark,
apologies for misleading you. Indeed, that would not work, since the pane still remembers its current view and does not attempt to re-navigate to it again. Please find attached another possible approach.
Please keep in mind that refreshing the data in such manner is far from optimal. I would suggest that you use ajax requests to fetch and rebind new data in a JSON format from the server to the existing UI, as this would be noticeably faster on a mobile device.
Regards,
Petyo
Telerik
apologies for misleading you. Indeed, that would not work, since the pane still remembers its current view and does not attempt to re-navigate to it again. Please find attached another possible approach.
Please keep in mind that refreshing the data in such manner is far from optimal. I would suggest that you use ajax requests to fetch and rebind new data in a JSON format from the server to the existing UI, as this would be noticeably faster on a mobile device.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!