This question is locked. New answers and comments are not allowed.
I am having this issue on a Samsung Galaxy Note 3 but it works in the simulator. I have tried many different ways, has anyone run across a similar problem? Basically there are 2 listviews, sites and packages, when you select a site it brings you to a new listview of the packages based on the site you select. The second packages listview is populated by a SQL datasourse and it uses a value from the selected sites item to use in the SQL which populates the packages listview on the next view. Any help is appreciated!
HTML:
JavaScript:
HTML:
<
div
id
=
"closeoutSites"
data-role
=
"view"
data-title
=
"Sites"
data-model
=
"app.closeoutViewHelperService.viewModel"
>
<!--Header-->
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
href
=
"#tabstrip-closeout"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
div
class
=
"view-content"
>
<
br
/>
<
h3
>Select a Job Site</
h3
>
<
div
class
=
"separator"
>
<
div
class
=
"dark"
></
div
>
<
div
class
=
"light"
></
div
>
</
div
>
<
ul
data-role
=
"listview"
class
=
"closeout-site-list"
data-style
=
"inset"
data-bind
=
"source: displaySitesDataSource"
data-template
=
"site-lookup-template"
>
</
ul
>
</
div
>
<!--sites template-->
<
script
type
=
"text/x-kendo-tmpl"
id
=
"site-lookup-template"
>
<
a
data-icon
=
"site"
onclick
=
"app.closeoutViewHelperService.viewModel.goToSite('#= id #','#= name #')"
>
#= name #
</
a
>
</
script
>
<!--Footer-->
<
div
data-role
=
"footer"
>
</
div
>
</
div
>
<
div
id
=
"closeoutPackages"
data-role
=
"view"
data-title
=
"Packages"
data-model
=
"app.closeoutViewHelperService.viewModel"
data-init
=
"app.closeoutViewHelperService.viewModel.showPackageList"
data-show
=
"app.closeoutViewHelperService.viewModel.refreshPackageList"
>
<!--Header-->
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
href
=
"#closeoutSites"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
div
class
=
"view-content"
>
<
br
/>
<
h3
><
span
data-bind
=
"text: selectedSiteName"
></
span
></
h3
>
<
div
class
=
"separator"
>
<
div
class
=
"dark"
></
div
>
<
div
class
=
"light"
></
div
>
</
div
>
<
ul
id
=
"packageList"
<!--data-role="listview" -->
class="closeout-package-list"
data-auto-bind="false"
data-style="inset"
>
</
ul
>
</
div
>
<!--packages template-->
<
script
type
=
"text/x-kendo-tmpl"
id
=
"closeout-package-template"
>
<
a
data-icon
=
"package"
onclick
=
""
>
#= name #
</
a
>
</
script
>
<!--Footer-->
<
div
data-role
=
"footer"
>
</
div
>
</
div
>
JavaScript:
(
function
(global, $) {
var
CloseoutFormsViewModel, app = global.app = global.app || {};
CloseoutFormsViewModel = kendo.data.ObservableObject.extend({
selectedSiteId :
""
,
selectedSiteName :
""
,
init :
function
() {
var
that =
this
;
kendo.data.ObservableObject.fn.init.apply(that, []);
sitesDataSource =
new
kendo.data.DataSource({
transport : {
read :
function
(options) {
read(app.db, options.success);
},
data : {},
},
schema : {
model : {
id :
"id"
,
fields : {
name : {
editable :
false
},
id : {
editable :
false
},
package_id : {
editable :
false
},
naming_convention : {
editable :
false
}
}
}
}
});
packagesDataSource =
new
kendo.data.DataSource({
transport : {
read :
function
(options) {
readPackages(app.db, selectedSiteId, options.success);
},
data : {},
},
schema : {
model : {
id :
"id"
,
fields : {
name : {
editable :
false
},
id : {
editable :
false
}
}
}
}
});
that.set(
"displaySitesDataSource"
, sitesDataSource);
///that.set("displayPackagesDataSource", packagesDataSource);
},
refreshPackageList :
function
() {
$(
"#packageList"
).data(
"kendoMobileListView"
).dataSource.read();
//$("#packageList").data("kendoMobileListView").setDataSource(packagesDataSource.read());
var
listView = $(
"#packageList"
).data(
"kendoMobileListView"
);
listView.refresh();
return
;
},
showPackageList :
function
() {
if
($(
"#packageList"
).data(
"kendoMobileListView"
) !=
null
) {
$(
"#packageList"
).data(
"kendoMobileListView"
).dataSource.read();
}
else
{
$(
"#packageList"
).kendoMobileListView({
dataSource : packagesDataSource,
template : $(
"#closeout-package-template"
).html()
});
}
},
goToSite :
function
(id, name) {
var
that =
this
;
selectedSiteId = [id];
selectedSiteName = [name];
that.set(
"selectedSiteId"
, id);
that.set(
"selectedSiteName"
, name);
app.application.navigate(
"#closeoutPackages"
);
//.then($("#packageList").data("kendoMobileListView").dataSource.read());
//var newDataPromise = $.ajax(packagesDataSource.read());
//$("#packageList").data("kendoMobileListView").dataSource.read();
//var newDataSourcePromise = $.ajax(
//$("#packageList").data("kendoMobileListView").setDataSource(packagesDataSource);//);
//$("#packageList").data("kendoMobileListView").dataSource.read();
//$.when(newDataPromise,newDataSourcePromise).done(function() {
//var listView = $("#packageList").data("kendoMobileListView");
//listView.refresh();
//app.application.navigate("#closeoutPackages");
//});
//var listView = $("packageList").data("kendoMobileListView");
//listView.refresh();
//app.application.navigate("#closeoutPackages");
//$("#packageList").data("kendoMobileListView").refresh();
//$("#packageList").data("kendoMobileListView").dataSource.read().then(app.application.navigate("#closeoutPackages"));
//var dataPromise = $.ajax(packagesDataSource.read());
//$.when(dataPromise).done(function() {
//var listView = $("#packageList").data("kendoMobileListView");
//listView.refresh();
// });
//app.application.element.find(packageList).data("kendoMobileListView").dataSource.read();
//$("#packageList").data("kendoMobileListView").dataSource.read();
//that.set("displayPackagesDataSource", packagesDataSource);
//app.application.navigate("#closeoutPackages");
//app.application.element.find(closeoutPackages).find(packageList).data("kendoMobileListView").refresh();
//$("#listView").data("kendoMobileListView").setDataSource(bar);
}
});
function
read(db, callback) {
db.transaction(
function
(tx) {
tx.executeSql(
'select projects.* from project'
, [],
function
(tx, result) {
callback(toArray(result));
}, app.onerror);
});
}
function
readPackages(db, siteId, callback) {
db.transaction(
function
(tx) {
tx.executeSql(
'select package_instances.id, packages.id as package_id, packages.name, packages.naming_convention from packages join package_instances on (package_instances.package_id = packages.id) where package_instances.object_table = "projects" and package_instances.object_id = ?'
, [siteId],
function
(tx, result) {
callback(toArray(result));
}, app.onerror);
});
}
function
toArray(result) {
var
length = result.rows.length;
var
data =
new
Array(length);
for
(
var
i = 0; i < length; i++) {
data[i] = $.extend({}, result.rows.item(i));
}
return
data;
}
app.closeoutViewHelperService = {
viewModel :
new
CloseoutFormsViewModel()
};
})(window, jQuery);