Clicking a link to an external view is loaded only once

15 posts, 0 answers
  1. Rita
    Rita avatar
    2 posts
    Member since:
    Mar 2014

    Posted 01 Sep 2014 Link to this post

    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&nbsp;&nbsp;</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&nbsp;&nbsp;</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 &amp; SE&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=BeLux" data-role="button">
    <table>
    <tr>
    <td>BeLux&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=Netherlands" data-role="button">
    <table>
    <tr>
    <td>Netherlands&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=Germany" data-role="button">
    <table>
    <tr>
    <td>Germany&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=France" data-role="button">
    <table>
    <tr>
    <td>France&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=Poland" data-role="button">
    <table>
    <tr>
    <td>Poland&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=Spain" data-role="button">
    <table>
    <tr>
    <td>Spain&nbsp;&nbsp;</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&nbsp;&nbsp;<b>Load:</b> 8692 MW
    </td>
    </tr>
    </table>
    </a>
    </li>

    <li>
    <a href="/DeviceScaled/CountryMenu?country=Greece" data-role="button">
    <table>
    <tr>
    <td>Greece&nbsp;&nbsp;</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&nbsp;&nbsp;<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>
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Sep 2014 Link to this post

    Hi Rita,

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 14 Dec 2014 in reply to Petyo Link to this post

    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>
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 17 Dec 2014 Link to this post

    Hello Mark,

    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!
     
  6. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 08 Jan 2015 in reply to Petyo Link to this post

    Petyo said:
    you can use the data-reload=true configuration option of the external view. 


    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.
  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Jan 2015 Link to this post

    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!
     
  8. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 12 Jan 2015 Link to this post

    This is my view in ChecklistOld.html:

    <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.
  9. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 13 Jan 2015 Link to this post

    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?
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Jan 2015 Link to this post

    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!
     
  11. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 14 Jan 2015 in reply to Petyo Link to this post

    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.
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 16 Jan 2015 Link to this post

    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!
     
  13. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 18 Jan 2015 in reply to Petyo Link to this post

    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. 



    Could you please provide an example on how this is done?  Thank you.

  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 20 Jan 2015 Link to this post

    Hello Mark,

    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!
     
  15. Mark
    Mark avatar
    12 posts
    Member since:
    Aug 2012

    Posted 20 Jan 2015 in reply to Petyo Link to this post

    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.
  16. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 22 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready