You can add an editable table control to your page by dragging it on from the palette on the Page Structure tab.
This will give you a table structure with a couple of default fields.
If you now generate and preview the page you should see the table displayed. The insert, edit and delete buttons will automatically get added to the table as the page is rendered, and the rows present in the table will be converted to a display only view. This is done using JavaScript so you will need to have script enabled in your browser for this to occur.
You can now add an action from your page to a Controller and then generate, deploy and run the project. You will see that the rows present in the table when the action is called get converted into the XML information available in the Controller for you to process as needed. (eg send to a web service or store in a database.)
You can add additional fields to the table from the design palette or from a data source as required by using the Page Structure screen.
It is also possible to customize which of the insert/edit/delete functions are available. This is described here: http://www.hyfinity.com/node/44
If you are not seeing this expected behaviour, can you please provide some more details about what you are trying to do, and the results you are seeing? We can then work out the best way forward to get it working correctly for you.
Yes I did read that... so I can "see" the Edit, Delete and insert....
when I try it out, it looks like it should work, but it doesn't commit.
I checked and I have Javascript enabled... (using IE 8)
I may have done something wrong here...
RE:
"You can now add an action from your page to a Controller and then generate, deploy and run the project. You will see that the rows present in the table when the action is called get converted into the XML information available in the Controller for you to process as needed. (eg send to a web service or store in a database.)"
I created a controller for each - delete, edit and add... is this not correct? (I am sending to a database)
It is important to realise that when you use the insert, edit and delete functions, by default that is only happening client side. For example, it will not be updating a database at this point.
When you then submit the page to a defined action it will send the data displayed in the table at that point to process as needed.
You would need to identify which rows have been added, updated and deleted to be able to perform the correct SQL queries.
To do this you will need to define a change_function for the table as mentioned in the thread I linked to previously. You would then store away the id details of the deleted rows (for example) to be correctly processed on save.
I have attached an example project export that illustrates this basic approach. You should be able to import this into your installation and try it out. This is working on the Contacts database table provided in http://www.hyfinity.com/node/64 You will need to get this table set up, and then edit the database connection details in the imported project accordingly.
If you did want to update the database immediately after every insert/edit/delete operation on the client side, then you would need to use the change_function hook, and trigger the appropriate AJAX calls from it. Let me know if you would like some more details on this alternative approach.
It is important to realise that when you use the insert, edit and delete functions, by default that is only happening client side. For example, it will not be updating a database at this point.
When you then submit the page to a defined action it will send the data displayed in the table at that point to process as needed.
You would need to identify which rows have been added, updated and deleted to be able to perform the correct SQL queries.
To do this you will need to define a change_function for the table as mentioned in the thread I linked to previously. You would then store away the id details of the deleted rows (for example) to be correctly processed on save.
I have attached an example project export that illustrates this basic approach. You should be able to import this into your installation and try it out. This is working on the Contacts database table provided in http://www.hyfinity.com/node/64 You will need to get this table set up, and then edit the database connection details in the imported project accordingly.
If you did want to update the database immediately after every insert/edit/delete operation on the client side, then you would need to use the change_function hook, and trigger the appropriate AJAX calls from it. Let me know if you would like some more details on this alternative approach.
I hope this helps.
Now it makes sense... thank you for the help! I will try this out.
I was able to figure out how to use the controllers for the straightforward add.... update... delete on typical set ups, but I couldn't figure out how to from an editable row such as that.
Can you please provide details on the alternative approach where the database is updated immediately? I'm not sure where to set the ajax call.
Looking at the example, I'm not sure what the deletedRows hidden field is for, as well.
Hi mistalla,
It is important to realise that when you use the insert, edit and delete functions, by default that is only happening client side. For example, it will not be updating a database at this point.
When you then submit the page to a defined action it will send the data displayed in the table at that point to process as needed.
You would need to identify which rows have been added, updated and deleted to be able to perform the correct SQL queries.
To do this you will need to define a change_function for the table as mentioned in the thread I linked to previously. You would then store away the id details of the deleted rows (for example) to be correctly processed on save.
I have attached an example project export that illustrates this basic approach. You should be able to import this into your installation and try it out. This is working on the Contacts database table provided in http://www.hyfinity.com/node/64 You will need to get this table set up, and then edit the database connection details in the imported project accordingly.
If you did want to update the database immediately after every insert/edit/delete operation on the client side, then you would need to use the change_function hook, and trigger the appropriate AJAX calls from it. Let me know if you would like some more details on this alternative approach.
I looked at both threads, but I'm not able to find where I can have the insert/edit/delete buttons complete their functions simultaenously to the db rather than click a separate "update" button as in the EditableTable example project that was attached.
Also, when I drag and drop the data source (SQL -> List All Records) the buttons for inserting/editing/deleting all disappear even when the functions are set to true in the javascript. How do I fix this?
I have attached a new project export which expands upon the earlier example to provide an option to update the database immediately.
If this is enabled, then the page will make an ajax call to the server after every table operation (insert, edit, delete) to make the corresponding change to the database.
You should be able to have a look at the PageScripts.js file to see how the ajax calls are being triggered. On the server side the database updates are done using rules in the ImmediateUpdate partial page controller in the normal way.
Hopefully you find this proof of concept useful, and it provides a good example of an approach you could take.
One point to note is that this export was created with WebMaker 6, and so may not work correctly in older versions.
Can you also please explain the correct way to add the database records to the editable table without having the edit/insert/delete buttons removed?
I dragged and dropped (with merge on) from the datasource (List all Records) to the table and the buttons are always being removed.
(I also tried dragging a textbox for each field and setting the bindings up, but the buttons are also not visible as well.)
Also, this editable table is on a partial page. Do these tables not work on partial pages?
Merging the data source onto the editable table is the best way to get the database rendered in the table. (Although generally you should use the +?+?++Edit Multiple Records+?+?+? usage so that you get data entry controls rather than output fields.)
The buttons are added at runtime when the page is being rendered, so will never be visible on the Page Design tab.
If it is at runtime that the buttons are not appearing, one thing to check is that you don+?+?+?t have a hidden field as the first column in the table. It will use some styling information from this first column to work out how to style the buttons, so if you have a hidden field first this can cause the buttons to be invisible.
If this is not the case, and the buttons are still not displaying, then the most likely cause would be a script error of some sort. Can you check your browser+?+?+?s console to see if any errors are being reported?
Thank you so much for your reply.
I tried to replicate the example that you provided for the ajax updates. I was able to get my editable table to add an initial record. But, every record after that is not being updated/added/deleted. I looked in the debugger and it looks like the recordID is not being saved. Everything is dropped with the exception of the field that I'm entering. I'm continuing on looking through your example to see where I went wrong. Do you happen to know what I'm doing wrong for the recordID to be dropped?
This example is assuming that the unique ID (CID in this case) for each record is auto generated by the database when the record is inserted.
This new Id is then available in WebMaker in the generated_keys section of the sql_result message returned from the insert call.
This value is being bound to the newRecordId hidden field on the ImmediateUpdate partial page so that it gets returned to the screen.
The final step is to make sure that this newly generated ID is placed into the row that has just been inserted into the table on screen. This is done by script (see the immediateUpdateManipulateResponse function at the bottom of PageScripts.js) which takes the value out of the newRecordId hidden field, and places it into the correct ID hidden field in the inserted row of the table.
Some of these areas may need updating for you project. (For example, if your ID field is not called CID then the script line will need to be changed.) I would try tracing this through to see where the generated ID is getting lost.
Thank you for your response. I have a question regarding the function:
function immediateUpdateManipulateResponse(content, outcome)
Where is this being set to be called?
I can't seem to find this being set to be called on the ImmediateUpdate partial page or the Records page.
Also, another thing. It turns out that what's being returned when I run a sql query is the ROWID, and not the GENERATED_KEYS. Is this something that needs to be configured from the database or in webmaker?
I tried running the application that you attached (Editable Table with Ajax), but the application will not test run due to an error.
The ManipulateRepsonse function is one of the special functions you can create to configure an AJAX call. See http://www.hyfinity.com/node/93 for more details.
Generally the first part of the function name is taken from the name of the button that triggered the call, but in this case we trigger the ajax call from script, so instead this uses the value of the last parameter passed to the handleAjaxSubmission method (ie immediateUpdate).
There are other ways that this functionality could have been implemented, including using an onload event on the ImmediateUpdate partial page as you mention.
With regards to the generated keys returned from the database, I think the final element name is database dependent. If you are getting a different value returned, then just update the binding for the hidden field on the ImmediateUpdate page accordingly.
I think you should be able to get this example running. You will need to set up the contact database table (see http://hyfinity.net/HowTo/database/contacts.sql for an example sql script) and then configure the database connection in your project as required. What errors are you getting when trying to run it?
RE: Editable Table - how to use?
This will give you a table structure with a couple of default fields.
If you now generate and preview the page you should see the table displayed. The insert, edit and delete buttons will automatically get added to the table as the page is rendered, and the rows present in the table will be converted to a display only view. This is done using JavaScript so you will need to have script enabled in your browser for this to occur.
You can now add an action from your page to a Controller and then generate, deploy and run the project. You will see that the rows present in the table when the action is called get converted into the XML information available in the Controller for you to process as needed. (eg send to a web service or store in a database.)
You can add additional fields to the table from the design palette or from a data source as required by using the Page Structure screen.
It is also possible to customize which of the insert/edit/delete functions are available. This is described here: http://www.hyfinity.com/node/44
If you are not seeing this expected behaviour, can you please provide some more details about what you are trying to do, and the results you are seeing? We can then work out the best way forward to get it working correctly for you.
Regards,
Gerard
RE: Editable Table - how to use?
when I try it out, it looks like it should work, but it doesn't commit.
I checked and I have Javascript enabled... (using IE 8)
I may have done something wrong here...
RE:
"You can now add an action from your page to a Controller and then generate, deploy and run the project. You will see that the rows present in the table when the action is called get converted into the XML information available in the Controller for you to process as needed. (eg send to a web service or store in a database.)"
I created a controller for each - delete, edit and add... is this not correct? (I am sending to a database)
thanks for any help! :)
RE: Editable Table - how to use?
It is important to realise that when you use the insert, edit and delete functions, by default that is only happening client side. For example, it will not be updating a database at this point.
When you then submit the page to a defined action it will send the data displayed in the table at that point to process as needed.
You would need to identify which rows have been added, updated and deleted to be able to perform the correct SQL queries.
To do this you will need to define a change_function for the table as mentioned in the thread I linked to previously. You would then store away the id details of the deleted rows (for example) to be correctly processed on save.
I have attached an example project export that illustrates this basic approach. You should be able to import this into your installation and try it out. This is working on the Contacts database table provided in http://www.hyfinity.com/node/64 You will need to get this table set up, and then edit the database connection details in the imported project accordingly.
If you did want to update the database immediately after every insert/edit/delete operation on the client side, then you would need to use the change_function hook, and trigger the appropriate AJAX calls from it. Let me know if you would like some more details on this alternative approach.
I hope this helps.
RE: Editable Table - how to use?
Now it makes sense... thank you for the help! I will try this out.
I was able to figure out how to use the controllers for the straightforward add.... update... delete on typical set ups, but I couldn't figure out how to from an editable row such as that.
Cheers and thanks again!
Laura (mistalla)
RE: Editable Table - how to use?
Looking at the example, I'm not sure what the deletedRows hidden field is for, as well.
RE: Editable Table - how to use?
You can use the following link for more information on the general use of the Editable Table:
http://www.hyfinity.com/node/44
The following thread should also address some of your other questions.
http://www.hyfinity.com/node/133
Kind Regards
Abdul
RE: Editable Table - how to use?
I looked at both threads, but I'm not able to find where I can have the insert/edit/delete buttons complete their functions simultaenously to the db rather than click a separate "update" button as in the EditableTable example project that was attached.
Also, when I drag and drop the data source (SQL -> List All Records) the buttons for inserting/editing/deleting all disappear even when the functions are set to true in the javascript. How do I fix this?
RE: Editable Table - how to use?
I have attached a new project export which expands upon the earlier example to provide an option to update the database immediately.
If this is enabled, then the page will make an ajax call to the server after every table operation (insert, edit, delete) to make the corresponding change to the database.
You should be able to have a look at the PageScripts.js file to see how the ajax calls are being triggered. On the server side the database updates are done using rules in the ImmediateUpdate partial page controller in the normal way.
Hopefully you find this proof of concept useful, and it provides a good example of an approach you could take.
One point to note is that this export was created with WebMaker 6, and so may not work correctly in older versions.
Please let me know if you have any questions.
Regards,
Gerard
RE: Editable Table - how to use?
Can you also please explain the correct way to add the database records to the editable table without having the edit/insert/delete buttons removed?
I dragged and dropped (with merge on) from the datasource (List all Records) to the table and the buttons are always being removed.
(I also tried dragging a textbox for each field and setting the bindings up, but the buttons are also not visible as well.)
Also, this editable table is on a partial page. Do these tables not work on partial pages?
RE: Editable Table - how to use?
Merging the data source onto the editable table is the best way to get the database rendered in the table. (Although generally you should use the +?+?++Edit Multiple Records+?+?+? usage so that you get data entry controls rather than output fields.)
The buttons are added at runtime when the page is being rendered, so will never be visible on the Page Design tab.
If it is at runtime that the buttons are not appearing, one thing to check is that you don+?+?+?t have a hidden field as the first column in the table. It will use some styling information from this first column to work out how to style the buttons, so if you have a hidden field first this can cause the buttons to be invisible.
If this is not the case, and the buttons are still not displaying, then the most likely cause would be a script error of some sort. Can you check your browser+?+?+?s console to see if any errors are being reported?
Regards,
Gerard
RE: Editable Table - how to use?
I tried to replicate the example that you provided for the ajax updates. I was able to get my editable table to add an initial record. But, every record after that is not being updated/added/deleted. I looked in the debugger and it looks like the recordID is not being saved. Everything is dropped with the exception of the field that I'm entering. I'm continuing on looking through your example to see where I went wrong. Do you happen to know what I'm doing wrong for the recordID to be dropped?
RE: Editable Table - how to use?
This example is assuming that the unique ID (CID in this case) for each record is auto generated by the database when the record is inserted.
This new Id is then available in WebMaker in the generated_keys section of the sql_result message returned from the insert call.
This value is being bound to the newRecordId hidden field on the ImmediateUpdate partial page so that it gets returned to the screen.
The final step is to make sure that this newly generated ID is placed into the row that has just been inserted into the table on screen. This is done by script (see the immediateUpdateManipulateResponse function at the bottom of PageScripts.js) which takes the value out of the newRecordId hidden field, and places it into the correct ID hidden field in the inserted row of the table.
Some of these areas may need updating for you project. (For example, if your ID field is not called CID then the script line will need to be changed.) I would try tracing this through to see where the generated ID is getting lost.
I hope this helps.
Regards,
Gerard
RE: Editable Table - how to use?
function immediateUpdateManipulateResponse(content, outcome)
Where is this being set to be called?
I can't seem to find this being set to be called on the ImmediateUpdate partial page or the Records page.
Also, another thing. It turns out that what's being returned when I run a sql query is the ROWID, and not the GENERATED_KEYS. Is this something that needs to be configured from the database or in webmaker?
I tried running the application that you attached (Editable Table with Ajax), but the application will not test run due to an error.
Thank you again for your help.
RE: Editable Table - how to use?
The ManipulateRepsonse function is one of the special functions you can create to configure an AJAX call. See http://www.hyfinity.com/node/93 for more details.
Generally the first part of the function name is taken from the name of the button that triggered the call, but in this case we trigger the ajax call from script, so instead this uses the value of the last parameter passed to the handleAjaxSubmission method (ie immediateUpdate).
There are other ways that this functionality could have been implemented, including using an onload event on the ImmediateUpdate partial page as you mention.
With regards to the generated keys returned from the database, I think the final element name is database dependent. If you are getting a different value returned, then just update the binding for the hidden field on the ImmediateUpdate page accordingly.
I think you should be able to get this example running. You will need to set up the contact database table (see http://hyfinity.net/HowTo/database/contacts.sql for an example sql script) and then configure the database connection in your project as required. What errors are you getting when trying to run it?
Regards,
Gerard