problem with window.location after using hyperlink from template

[Jordan]

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!

[Dimo]

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

[Jordan]

I have been trying different ways of debugging but with no results, can you please explain how to make an runnable sample to send?

[Dimo]

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

 

 

[Jordan]

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,

[Dimo]

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

[Jordan]

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.]

 

 

[Dimo]

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