locked
Refresh data in a Grid Layout

    Question

  • I have an app (HTML5/WinJS) that grabs images from a server and displays them. The images are displayed in a "Grid Layout". A user can select any item in the grid and after selecting one or more items they can click the delete button. I want the Grid Layout to be updated with what images are left over by contacting the server and looking for more images. How does one rebind or refresh the data coming from the data.js file? Below is what I use to grab the JSON data in data.js:

    WinJS.xhr({ url: "http://www.serversite.com/appFolderCode/imageData.php?order=get_all&code=blablabla" }).then(
                function (request) {
                    
                    var tmpList = Array();
                    tmpList = JSON.parse(request.responseText);
                    tmpList.forEach(function (item) {
                        list.push(item);
    
                    });
                });

    I thought what I could do is have a button in the app bar that when clicked would call a custom made "refresh" function that would do another JSON request. Here ire the code for that:

    WinJS.xhr({ url: "http://www.serversite.com/appFolderCode/imageData.php?order=get_all&code=blablabla" }).then(
                function (request) {
                    var tmpList = Array();
                    tmpList = JSON.parse(request.responseText);
                    tmpList.forEach(function (item) {
                        console.log("The list size is" + list.length);
                        list.push(item);
                    });
                });

    Thursday, June 27, 2013 6:48 PM

Answers

  • I figured it out. Ended up being that because the url didn't change with every request. So the server kept serving the same results to the app. Adding a no-cache header fixed the issue.

    PHP code

    header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
    header('Pragma: no-cache'); // HTTP 1.0.
    header('Expires: 0'); // Proxies.

    Monday, August 19, 2013 8:19 PM

All replies

  • Here is the code that calls the refresh function which is located in "groupedItemd.js":

    imageAppBarSync.addEventListener("click", function () {
                    listView.itemDataSource = null;
                    listView.groupDataSource = null;
                    Data.refreshList();
                    listView.itemDataSource = Data.items.dataSource;
                    listView.groupDataSource = Data.groups.dataSource;
                    listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
                    listView.forceLayout();
                });

    Thursday, June 27, 2013 6:51 PM
  • Bump.
    Thursday, July 11, 2013 12:49 AM
  • I figured it out. Ended up being that because the url didn't change with every request. So the server kept serving the same results to the app. Adding a no-cache header fixed the issue.

    PHP code

    header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
    header('Pragma: no-cache'); // HTTP 1.0.
    header('Expires: 0'); // Proxies.

    Monday, August 19, 2013 8:19 PM