I have multiple pages that heavily rely on JavaScript, particularly for sorting and filtering datasets.
These pages typically display a list of intricate items, usually rendered as <li> elements with HTML content. Users can delete, edit, or add items using specific forms. To handle these complex items, I maintain an array of JavaScript objects to carry out various operations, such as validating user input before taking action.
User actions and details are sent to the server through asynchronous calls. Upon receiving the response, I need to update both the HTML content and the JavaScript array.
To achieve this, I have implemented a workaround where the server sends back the updated data structure in JSON format along with the new HTML content as a single string. Upon receipt, JavaScript code splits the response, parses the JSON part (for updating the array), and replaces the inner HTML of the container with the second part.
I avoid generating HTML directly from the data structure due to frequent changes in the HTML layout by web designers. Similarly, recreating the data structure from the HTML is too complicated and error-prone.
This system works smoothly, although it encounters some challenges with large content. It is cross-browser compatible (built on jQuery) and does not exhibit significant performance issues.
My question is: am I overlooking any subtle or obvious flaws in this approach? Is there a simpler and more efficient alternative available?
For reference, the server operates on PHP.
Thank you.