I have to implement a list in my website, that behaves as follows:
1. In the home page, a list is rendered and shows only the first 12 items, and after that a “load more…” button.
2. Right after the page finished loading, the next 12 data should be pre-loaded.
3. When clicking “load more” the loaded 12 are rendered, right after that the next are pre loaded, and so on again and again…
My app is using node.js, express.js, jQuery, ejs and bootstrap.
Right now, my server logic produces the list of data successfully, then I use ejs template to render the whole big list.
I’m quite confused about how to change that to be a dynamic list using ajax.
Will the “first render” should still be done using ejs from the server, and then any adding of list items will be rendered again using ejs, but this time from the client side? What is the best/simple way to implment the behavor I need? BTW – every list item, includes an img tag, that direct to a unique image – isn’t that a problem when using JSON … ?
Any help, or a link to helpful example – will be very appreciated. Thanks.
You have two options for your AJAX call as far as I can tell. One is to return JSON to the browser and use a client side template library to render the data. The other option is to render just the list on the server and return the HTML to the browser which you can then insert straight into the DOM.
You will need to set up a different route in express so that it only returns either the JSON or the HTML for the list items, rather than the entire HTML document from the first load.
The advantage of returning HTML to the browser is that you don’t need to load a template engine on the browser or have template logic in both the browser and the server which reduces your code size and keeps everything DRY. However, if you have a need to store the data in browser memory to perform other manipulation then JSON is your best bet.
I’m happy to expand on any point that you need to make things more clear.