Same page rendering

Hi again! How can I achieve page rendering of two templates in one html.

Consider the image below:

My goal is that after I click submit button, the table below will load. But the values from input fields above will stay. I only want the table to be rendered not the whole page. Pardon me but I cannot get the logic on how I will approach this since I’m still newbie in Elixir.

Have a look at Drab, seems exactly what you need: https://tg.pl/drab

There are two general ways to achieve that. Either use JS on the client side to update only parts of the website – drab is also JS even though it’s controlled from the server – or you can just re-render the whole page filling the form with the selected values, which is what phoenix’s html form helper can do.

2 Likes

Will try to look at Drab. I’m trying to avoid of rendering the whole page again with the selected values since the input Payor Code has pre-selected values upon clicking the search button besides it. And upon choosing the option, the revenue source is filled up based on chosen option from Payor Code. All data source came from APIs. Rendering the whole page means connecting to API and loading again the data.

I greatly appreciate the ideas. It’s getting more fun along the way studying and developing with elixir.

1 Like

Drab or Unpoly here. I’d probably grab unpoly for this as it’s overall significantly less code to write anywhere, you’ll just add a few decorations to your html template and load the script in, this is practically the kind of stuff unpoly is made for.

Drab would be better if you plan to do a lot more, but just simple element replacing between pages is where unpoly rules with a very short amount to write.

1 Like