I start with a listview that contains all states with a click event on each to build event headers by state (below). Once a state is selected, I fetch event headers and build another listview using this function. Once an event header is selected, I populate a detail page. When loading fresh and selecting a state (Arkansas), the listview is populated and selecting an event populates the detail screen as expected. Hitting the "back" button (data-role=backbutton), selecting another state, then an event for that state throws e.dataItem undefined in the click method of the function below. If I go back again, select another state, then sometimes it works, sometimes it doesn't. What am I doing wrong here?
function BuildEventHeadersListByState(abbr)
{
app.showLoading();
var stateAbbr = abbr;
var xml;
var template = kendo.template($("#ulEventHeaders-template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options){
$.ajax( {
type: "GET",
data: { "apikey": apiKey, "stateAbbreviation": stateAbbr},
dataType: "text",
success: function(result) {
options.success(result);
app.view().header.find(".km-navbar").data("kendoMobileNavBar").title(abbr + " Events");
app.hideLoading();
}
});
}
},
schema: {
type: "xml",
data: "/ArrayOfEventHeader/EventHeader",
model: {
// configure the fields of the object
fields: {
EventCity: "EventCity/text()",
EventDate: "EventDate/text()",
EventID: "EventID/text()",
EventTitle: "EventTitle/text()",
}
}
}
});
$("#ulEventHeaders").kendoMobileListView({
dataSource: dataSource,
template: $("#ulEventHeaders-template").text(),
dataBound: function(){
this.scroller().reset(); //scroll to top
},
click: function(e){
var eventID = e.dataItem.EventID;
BuildEventDetailsByEventID(eventID);
}
});
}