Can't get listview to reload based on selection from previous listview

[fired]

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:

<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);

[Petyo]

Hello Peter,

The code looks ok in general; the only issue I can see is that you are calling the goToSite in the onclick handler of the link. Apart from being slow, this is not reliable on touch devices. A reliable alternative in this case would be to use view parameters instead; check out how the sushi app implements a similar pattern. 

Regards,
Petyo
Telerik

 

 

[fired]

Hi Petyo - Thank you for your response. This is very helpful information, I actually tried that navigation approach but I couldn't figure out how to use a view parameter that is a dynamic template variable. For example, I know I can do:

<a data-icon="site" href="#closeoutPackages?siteName=name?siteId=id">

But in the context of a template, I can't figure out any syntax that works, all attempts have led me to the loader just spinning infinitely. I tried to do something like this:

<!--sites template-->
<script type="text/x-kendo-tmpl" id="site-lookup-template">

    <a data-icon="site" href="\\#closeoutPackages?siteName=\#: name \#?siteId=\#: id \#">
      #= name #
    </a>

</script>

I think you definitely pointed me in the correct direction here, do you know the proper syntax for when it is a template variable that needs to be used as a view parameter?


Thanks,

Pete

[fired]

Hi Petyo - sorry, here is a more accurate example of what I had tried:

<!--sites template-->
<script type="text/x-kendo-tmpl" id="site-lookup-template">
            
<a data-icon="site" href="\\#closeoutPackages?siteName=\#= name&amp;siteId=\#= id \#">
#= name #
</a>
            
</script>

[Petyo]

Hello,

The correct syntax in that case would be:

<a data-icon="site" href="\#closeoutPackages?siteName=#: name #&siteId=#: id #">

Regards,
Petyo
Telerik