How can I update a ListView after adding a record to a file?

Question

Hi,

I have a problem to update my ListView. I looked at the other topics, but there was no solution. I have a page home.html and a page to add a contact contact.html. On the home.html there is the listView to show all contacts. The contacts are saved in a txt.file. When I add a contact and click "save" the app writes the contact in the txt-file. After that I added an animation to go back to home.html to see all contacts inclusiv the new contact. But the problem is, the new contact is not visible.

            listView = element.querySelector(".basicListView").winControl;
            listView.groupHeaderTemplate = element.querySelector(".headertemplate");
            listView.itemTemplate = element.querySelector(".itemtemplate");
            listView.oniteminvoked = this._itemInvoked.bind(this);
            
            this._initalizeLayout(listView, appView.value);
        },
                       
        _initalizeLayout: function (listView, viewState) {
            var appData = Windows.Storage.ApplicationData.current;
            var localFold = appData.localFolder;

            localFold.getFileAsync("userFile.txt").done(
               function (file) {
                   Windows.Storage.FileIO.readTextAsync(file).done(function (contents) {
                       var testData = JSON.parse(contents);
                       var list = new WinJS.Binding.List(testData);
                       listView.itemDataSource = list.dataSource;
                       listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
                   });
               });
         },

        _itemInvoked: function (args) {
            nav.navigate("/pages/users/user.html", { item: args.detail.itemIndex});
        }

Can you help me?

Answer 1

Hi,

Please, keep in mind that the save process is an asynchronous operation. It means that, you have to wait the program finish to save the data and after navigate to the page that shows the listview. That was an point. (search for saveAsync function)

You can also try using listview.forceLayout(); to update the list style.

Thanks

Answer 2

Hi,

i tried the method forceLayout() but it does not work. And I didn't find the method saveAsync(). At the newContact.html I edited my method to save the new Contact.

localFold.getFileAsync("UserFile.txt").done(function (file) {
                file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (readStream) {
                    var size = readStream.size;
                    var maxuint32 = 4294967295;
                    var i = 0;
                    var jsonObject;
                    var dataReader = new Windows.Storage.Streams.DataReader(readStream);

                    dataReader.loadAsync(size).then(function (numBytesLoaded) {
                        fileContent = dataReader.readString(numBytesLoaded);

                        if (fileContent !== "") {
                            jsonObject = JSON.parse(fileContent.toString());

                            for (i = 0; i < jsonObject.length; i++);

                            myJSON.id = jsonObject[i - 1].id + 1;
                            jsonObject.push(myJSON);
                        }
                        dataReader.close();
                    }).then(function () {
                    }).then(function () {
                        file.openTransactedWriteAsync().then(function (transaction) {
                            var dataWriter = new Windows.Storage.Streams.DataWriter(transaction.stream);
                            dataWriter.writeString(JSON.stringify(jsonObject));
                            dataWriter.storeAsync().then(function (size) {
                                transaction.stream.size = size;
                                transaction.commitAsync().done(function () {
                                    transaction.close();
                                });
                            });       
                        }).done(function () {
                            WinJS.Navigation.navigate("/pages/home/home.html");
                        });
                    });
                });
            });

When I click save and navigate back via Page-Animation to the home.html I get the message "Access denied". When I delete the navigation-function and click the "back" button, the listview will be work correct and list new item.

Answer 3

The "navigation function" is

WinJS.Navigation.navigate("/pages/home/home.html");

?

Thanks

Answer 4

Yes.

Answer 5

The idea is correct. You have to add into the "done" block the actions that you want to happen before the data is saved. I'm trying to figure out what is causing the error.

Answer 6

Okay, thanks. If you need more information, ask me ;)

Answer 7

Hi, friend,

I checked your code, and I beleive that the problem could be in the async sequence. Maybe the code is a little confuse and the operations are not been expected as it sould. I did not test, my try to change the code like this:

var dataReader;
var file;
var transaction;
localFold.getFileAsync("UserFile.txt").done(function (myfile) {
    file = myfile;
    return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (readStream) {
    var size = readStream.size;
    var maxuint32 = 4294967295;
    var i = 0;
    var jsonObject;
    dataReader = new Windows.Storage.Streams.DataReader(readStream);
    return dataReader.loadAsync(size);
}).then(function (numBytesLoaded) {
    fileContent = dataReader.readString(numBytesLoaded);
	if (fileContent !== "") {
		jsonObject = JSON.parse(fileContent.toString());
		for (i = 0; i < jsonObject.length; i++);
		    myJSON.id = jsonObject[i - 1].id + 1;
		jsonObject.push(myJSON);
	}
	dataReader.close();
	return file.openTransactedWriteAsync();		
}).then(function (mytransaction) {
    transaction = mytransaction;
	var dataWriter = new Windows.Storage.Streams.DataWriter(transaction.stream);
	dataWriter.writeString(JSON.stringify(jsonObject));
	return dataWriter.storeAsync();
}).then(function (size) {
    transaction.stream.size = size;
    return transaction.commitAsync()
}).done(function () {
    transaction.close();
	// Navigate Home
	WinJS.Navigation.navigate("/pages/home/home.html");
});

Answer 8

Thanks for your code. I did some changes, so it is working now.

var jsonObject = "";
var i = 0;

        if (checkFormResult == true) {
            var dataReader;
            var file;
            var transaction;
            localFold.getFileAsync("UserFile.txt").then(function (myfile) {                
                file = myfile;
                return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
            }).then(function (readStream) {
                var size = readStream.size;
                var maxuint32 = 4294967295;
                dataReader = new Windows.Storage.Streams.DataReader(readStream);
                return dataReader.loadAsync(size);
            }).then(function (numBytesLoaded) {
                fileContent = dataReader.readString(numBytesLoaded);
                if (fileContent !== "") {
                    jsonObject = JSON.parse(fileContent.toString());
                    for (i = 0; i < jsonObject.length; i++);
                    myJSON.id = jsonObject[i - 1].id + 1;
                    jsonObject.push(myJSON);
                }
                dataReader.close();
                return file.openTransactedWriteAsync();
            }).then(function (mytransaction) {
                transaction = mytransaction;
                var dataWriter = new Windows.Storage.Streams.DataWriter(transaction.stream);
                dataWriter.writeString(JSON.stringify(jsonObject));
                return dataWriter.storeAsync();
            }).then(function (size) {
                transaction.stream.size = size;
                return transaction.commitAsync()
            }).done(function () {
                transaction.close();
                // Navigate Home
                WinJS.Navigation.navigate("/pages/home/home.html");
            });

I marked the changes in the code above.

Thanks a lot.