Partial update using templates?

Is it possible to do partial updates with just templates?

What does this mean? Change just part of the page HTML?

exactly that :slight_smile:

Could just use a closure? Take the rest of the needed values later and resolve and call it when you have them all?

What is the problem that you are trying to solve?

Currently, Iā€™m trying to do something a lot more simple than what Iā€™m asking but still having some trouble lol

Iā€™m made a ā€œlikeā€ button using a form that sends a post request. Redirecting to the same page, on success, leaves a duplicate browser history.

Ahh, I actually break up my templates into lots of little parts and use something like the intercooler-js library to handle little things like that (until I start setting up an entire websocket on the page). Any kind of normal html interaction will refresh the page and add to the history, but something like intercooler-js or javascript or whatever can easily work around it. Iā€™ve made a little intercooler-js Elixir helper library that I should probably publish sometime, but with it you can just add the proper attribute tag on your like button with another attribute that says what html element to update, then have your like phoenix response just send that part of the page by just sending that part of the template. :slight_smile:

In general I think it is good to break up each pageā€™s templates a lot, I have a lot of reusable bits and it helps them keep in sync too. :slight_smile:

1 Like

@OvermindDL1 I would love to learn more about how youā€™re structuring your views and controllers!

An example:
I have a check in/out system for inventory, when someone scans something in (a barcode reader, it just sends the barcode then a return when scanned, very simple) it scans into the pre-focused text field, which then uses intercooler-js to send the form POST to the server (which falls back to standard html when javascript is disable) and the server does the work then either returns the page again, or if it sees the intercooler header then it renders just the requested part of the template (in my case the parts that handles the form to re-set it back to normal along with a message of success or why something failed). The view itself is split up into, say, an index.html.eex and an index.html.ic.eex, which is called is depending on whether it is intercooler making the request or if it is the brower itself. The index.html.ic.eex then just does a switch on which element the intercooler request is wanting and then renders the template for just that bit. It is easy to do although Iā€™ve made some helpers (which I need to publish) that simplifies it to just the bare minimum.

Rendering a sub-template is easy, you can see how the stock ā€˜layoutā€™ view does it for example, or a generated resource view. I have render calls in templates all over the place. :slight_smile:

2 Likes

Thanks for the example and explanation @OvermindDL1! Do you have anything on github by any chance? A very basic example would do to get us started :stuck_out_tongue:

That big project is at work so sadly it is not, I keep meaning to write blog posts detailing how to do all this but time is always an issue and blogging does not pay (although it is fun!). ^.^

1 Like