Some sort of ListView/DataSource lifecycle error?

[Brett]

I have a list view that uses a datasource (see list view code below). Loads, works fine, no errors. When you click on an item in the list view, it redirects the URL to another page. After that redirected page shows up, a half-second later an error comes in the console that isn't very useful (see error below). After much tracing it seems that the error is being generated by the list view code which has since been unloaded because of the redirect.

Do I need to unregister/destroy datasources and widgets somehow before I redirect a page? Or some other problem? Apologies it's vague, very hard to debug.

Any help appreciated.

Cheers,

Brett

 

ListView Code:

$("#solutions-gallery-id").kendoListView({
                dataSource: solutionsDataSource,
                selectable: true,
                template: kendo.template($("#solution-card-template-id").html()),
                change: function(e){
                    var selectedIndex = this.select().index();
                    var dataItem = this.dataSource.view()[selectedIndex];
                    window.location = window.location.protocol + "//" + window.location.host + "/solution/" + dataItem.solution_id;
                }
            });

 

Error:

kendo.all.js:186 Uncaught TypeError: Cannot read property 'replace' of undefined
    at Object.compile (kendo.all.js:186)
    at Object.d [as template] (jquery.min.js:2)
    at init.<anonymous> (4:489)
    at Object.i (kendo.all.js:7415)
    at Object.<anonymous> (jquery.min.js:2)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Object.e.(anonymous function) [as resolve] (http://localhost:3000/javascripts/jquery.min.js:2:29192)
    at success (kendo.all.js:6980)
    at Object.i.success (kendo.all.js:5911)
compile @ kendo.all.js:186
d @ jquery.min.js:2
(anonymous) @ 4:489
i @ kendo.all.js:7415
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
e.(anonymous function) @ jquery.min.js:2
success @ kendo.all.js:6980
i.success @ kendo.all.js:5911
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
y @ jquery.min.js:4
c @ jquery.min.js:4
XMLHttpRequest.send (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
read @ kendo.all.js:5914
(anonymous) @ kendo.all.js:6975
d @ jquery.min.js:2
_queueRequest @ kendo.all.js:7190
_dequeueRequest @ kendo.all.js:7202
success @ kendo.all.js:7072
success @ kendo.all.js:6979
i.success @ kendo.all.js:5911
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
y @ jquery.min.js:4
c @ jquery.min.js:4
XMLHttpRequest.send (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
read @ kendo.all.js:5914
(anonymous) @ kendo.all.js:6975
_queueRequest @ kendo.all.js:7190
read @ kendo.all.js:6968
(anonymous) @ 4:591
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

[Konstantin Dikov]

Hello Brett,

It is really strange that the error is thrown after the redirect and if the new page is already loaded, it is highly unlikely that the problem is with the ListView from which the redirect is initiated. Nevertheless, within the "change" event you could try to redirect to the new page within a setTimeout function:

change: function(e){
    var selectedIndex = this.select().index();
    var dataItem = this.dataSource.view()[selectedIndex];
    setTimeout(function(){
        window.location = window.location.protocol + "//" + window.location.host + "/solution/" + dataItem.solution_id;
    })
}

If the issue persist, you could try to redirect to a different page to see if the problem will persist. If not, this will indicate that the issue is with the newly opened page.


Regards,
Konstantin Dikov
Progress Telerik