I am trying to use ajax refresh on one row in a table. Usually this works as long as I provide a row number in ajax refresh. Now I have a client-side javascript that is executed when the table first loads that adds additional rows to the table. (these additional rows are only present on the client) If for example the client side javascript adds 1 additional row in the table, when I try to ajax refresh a row, it duplicates the row that I am trying to refresh 1 row above its original position.
I have illustrated my problem in the table below:
If for example the original table has 3 rows, and I want to refresh the 3rd row. An ajax refresh with row number 3 will work.
Now the client-side javascript adds in a row that is not propagated to the server
Now when I try to ajax refresh the same row, I end up with:
I am unable to provide actual screenshots of the program itself, hopefully this is clear enough to illustrate the problem I am facing.
Hello,
I may suggest to use some Javascript inside your javascript action to make sure if last row already added or no.
You can add unique CSS class name to record you adding and every time you call Javascript function you can check if there is any elements has this class name (getElementsByClassName()) if yes don't add it again if no you can add it.
The problem I am facing is not only for the last row. As long as the client-side javascript adds a row in the table (e.g. row X), ajax refresh row will break for any rows after that (e.g. row X+1).