problem with window.location after using hyperlink from template

8 posts, 0 answers
  1. Jordan
    Jordan avatar
    10 posts
    Member since:
    Mar 2016

    Posted 18 Aug Link to this post

    Hello, 

    I am very new at html and javascript so basic reponses would be better. Using this template location in a .html file 

     <ul data-role="listview" data-source="app.data" data-template="LED-template"></ul>

       <script id="LED-template" type="text/x-kendo-template">
        <a href="page/LEDlist/details.html?##id=#: LEDPartNumber #">   
                <div class="Manufacturer">#: LEDManufacturer #</div>
                <div class="Partnumber">#: LEDPartNumber #</div>
            </a>
        </script> 

    gives me a list of all the data in app.data. Once any of the links are clicked this is executed 

     var location = window.location.toString();
     var partNumber = location.substring(location.lastIndexOf('?') + 4);

    it is able to get the partnumber which I can use to filter the total data to find the right data and create a page based on the information. The problem I am having is that after going back once and choosing a second partnumber the above code fails to return a valid reponse. I've attached the console that is outputing 
    location and the partNumber 

    Thank you for any help!

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 22 Aug Link to this post

    Hi Jordan,

    The provided screenshots imply that the scenario that fails occurs on a different view (not details, but index).

    If debugging does not reveal the cause of the unexpected behavior, please send us a runnable sample for inspection.

    On a side note, I recommend finding the needed query string parameter value in a more reliable fashion, for example:

    - search for the expected parameter key and then obtain its value, instead of using substring
    - obtain the view parameters by using the Kendo UI API, instead of using string operations:

    The Kendo UI Mobile Application instance has a router field that can be accessed in the application's init event:

    http://docs.telerik.com/kendo-ui/api/javascript/mobile/application#fields-router

    http://docs.telerik.com/kendo-ui/api/javascript/mobile/application#events-init

    The router filed returns a Kendo UI Router instance:

    http://docs.telerik.com/kendo-ui/framework/spa/router

    http://docs.telerik.com/kendo-ui/api/javascript/router

    The Router instance has a change event that provides access to the view parameters. The event can be attached via bind():

    http://docs.telerik.com/kendo-ui/api/javascript/router#events-change

    http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-binding-after-initialization


    var app = new kendo.mobile.Application(document.body, {
        init: function(e) {
            e.sender.router.bind("change", function(j) {
                console.log(e.params);
            });
        }
    });


    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Jordan
    Jordan avatar
    10 posts
    Member since:
    Mar 2016

    Posted 22 Aug in reply to Dimo Link to this post

    I have been trying different ways of debugging but with no results, can you please explain how to make an runnable sample to send?
  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 24 Aug Link to this post

    Hi Jordan,

    My suggestion is to create a small and simple runnable Kendo UI Mobile Application, similar to the one that I have attached (you can even use it as a starting point).

    Include only widgets and logic that are relevant to reproducing the discussed behavior. You can use local dummy data for simplicity, or Ajax requests to static JSON files.

    Regards,
    Dimo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Jordan
    Jordan avatar
    10 posts
    Member since:
    Mar 2016

    Posted 24 Aug in reply to Dimo Link to this post

    Hi Dimo,

    Upon further investigation, it seems like window.location does not return the right value the second time the page is accessed. However, it works fine the first time.

    The second (or third, etc) time the page is accessed, window.location returns the previous page, not the current one.

    See attached picture.

    Would you know what could cause this?

    Thank you,

  7. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 26 Aug Link to this post

    Hello Jordan,

    The only thing that comes to my mind is that window.location is accessed too early in the JavaScript, so it returns old data.

    If you believe there is an issue in Kendo UI, please provide the requested isolated runnable example for us to inspect. Thank you.

    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  8. Jordan
    Jordan avatar
    10 posts
    Member since:
    Mar 2016

    Posted 27 Aug in reply to Dimo Link to this post

    Hello again,here isthe base of my project. what I am sending you is able to run in the appbuilder simulator in the CLI with the error. to get the error, choose any LED and you will see the page with data, then press back and choose another the info on the next page will be wrong showing the first page again since the location is returning the wrong info. 

    [Attachment removed, in accordance with customer request.]

     

     

  9. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 31 Aug Link to this post

    Hi Jordan,

    Thanks for the runnable example.

    The problem is caused by the code in detail.js. It relies on the page URL to have changed when the Details view is displayed, but this is not always the case. As a result, the partNumber retrieval fails, then the filtering fails, and finally, the led object construction fails.

    The recommended approach is to rely on the Kendo UI API to retrieve view parameters. Please make the following changes:

    1. onShow can be executed as a show handler, after-show is not needed:

    http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-show

    data-show="app.LEDsDetail.onShow"


    2. partNumber should be retrieved from the View params:

    http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#fields-params

    A similar approach is used here:

    http://demos.telerik.com/kendo-ui/m/index#mobile-listview/hierarchical-databinding


    onShow: function (e) {
      var partNumber = e.view.params.id;
    }


    3. filtering a Kendo UI DataSource may be an asynchronous operation. That's why you need to wait for the DataSource instance to obtain the filtered data before using it. Use a one-time change event handler attached with .one()

    http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#event-binding-after-initialization

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change


    onShow: function (e) {
        var partNumber = e.view.params.id;
     
        app.data.one("change", function() {
            currentLED = app.data.view()[0];
            var led = { /* ... */ };
     
            kendo.bind($('#LEDContent'), led, kendo.mobile.ui);
        });
         
       app.data.filter({
            field: "LEDPartNumber",
            operator: "eq",
            value: partNumber
        });
    }

    4. on a side note <div>'s cannot be placed inside <a>'s, consider using different markup with inline elements instead of <div>'s

    <a href="page/LEDlist/details.html?id=#: LEDPartNumber #">
        <div class="Manufacturer">#: LEDManufacturer #</div>
        <div class="Partnumber">#: LEDPartNumber #</div>
    </a>


    Regards,
    Dimo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready