How to update Spry-table and present the updated table in a div element?

Question

Hello!
I am using a very interesting AJAX-framework called Spry when designing a web page. Here the web page is: Link.
I need some help.
Every time a new project or shift is added, the changes are written to an xml-file. When the page is reloaded, Spry reads data from xml-files.
This is caused by this code:
dsProjects = new Spry.Data.XMLDataSet("timetable/projects.xml", "projects/project");
dsShifts = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project/shift"); //look inside projects.xml and //extrac xml-file. url
dsName = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project");
I call this function that I have written: loadProjectsIntoDivElement ().
This function does the following: [See attached code.]
It iterates through the Spry-datastructure and puts the data in a table inside of the div-element called 'projectsList'.
Now, when I add a new project, I want it to be inserted into the Spry-datastructure and then cause the new data to be written into the div element called 'Specials_DIV'.
I have found out how to update a Spry-datastructure (e.g. dsProjects above), but I don't know how to update the table containing the data without refreshing the page. This should be done using Spry.
Some code:
1:
2:
3:
function loadProjectsIntoDivElement () {
$('#projectsList').html('');
$('#projectsList').append('<table id="Specials_Table"><tr><th spry:sort="id">ID</th><th spry:sort="NAME">Name </th><th spry:sort="hoursestimated">Nr. of hours estimated</th><th spry:sort="hoursworked">Nr. of hours worked</th><th spry:sort="costperhour">Cost per hour.</th></tr>{function::init_hours}<tr spry:repeat="dsProjects" onclick="chooseProject({ds_RowID})"><td>{id}</td><td>{NAME}</td><td>{hoursestimated}</td><td>{hoursworked}</td><td>{costperhour}</td></tr></table><br/>{function::get_hours}<br/>');
I have tried to accomplish this in various ways but I don't succeed.
I want to do it without refreshing the page.
Update: I found some code here that I will try: Link
Thanks in advance!
Anders Branderud
My blog

Answer 1

Hello!
Thanks!
I don't succeed with the implementation in any browser.
I have found a way to it, but I would like a way that updates the data quicker and without reloading all of the page. After all, I am only adding one row on the end of the data structure, so there should be no need to read in all data again.
Now I do it like this:
When a project is added, do this:
1. Store a new row in the project file through a php script.
2. When the post-call to the php-file returns, do refresh of the whole page.
Then the newest version of the xml file will be read in.
However, I don't want to read the data from a xml file each time that a new project is created.
I know how to add the new data to a Spry-datastructure [in my code 'dsProjects'], but I don't know how to display the updated data without reloading the whole page.
I have tried some various ways to do it, but haven't succeded.
Thanks!
Anders Branderud