Using Liveview for chained selects

Phoenix Forum Questions / Help
,
1

I have an existing CRUD application which has a couple of chained selects. Like selecting an Assignment type, updates the Rates to list only those applicable for that Assingment. I use jquery for that functionality at the moment and I’m considering switching to Liveview. The reason?, I just want to see less javascript in my life :smile:

Watcing Chris’ Twitter Clone video, I notice that an additional live folder is created where all Liveview component stuff goes. Now, with an existing app whithout this live folder, how do I handle something like this where I don’t want to go “all in” with Liveview but just replace specific functionality that I think can benefit from Liveview. In my case, use Liveview for the chanied selects.

2

Maybe I’m misunderstanding your question, but elixir/Phoenix doesn’t impose many constraints on file organization in a way that makes you “go all in” for Liveview. I’ve been adding components incrementally alongside Vue and jquery code just fine, even interoperating.

3

Thanks for responding. I haven’t actually done it yet (time) but I figured out how I should go about it. I make the form with the Liveview functionality that I need, then embed it in this other page with a piece of code like:

Phoenix.View.render(AppWeb.PageView, "page.html", assigns)

borrowed from Collocating Templates

Think that should do it?

4

LiveView has its own helpers for rendering. I am using live_render to “nest” a small liveview component inside a ‘normal’ (.eex) Phoenix template. In one case, I wanted to launch a bootstrap modal with some dynamic content for searching for and inviting users to an account:

    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newTeamModal" aria-hidden="true" id="new-team-modal">
      <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
          <%= live_render(@conn, WhoseturntoWeb.Live.TeamAdmin) %>
        </div>
      </div>
    </div>

And the TeamAdmin LiveView renders its own view with the required data:

  def render(%{team: team, current_team: current_team} = assigns) do
    team = Repo.preload(team, :users)
    WhoseturntoWeb.TeamView.render("manage.html", assigns |> Map.put(:team, team))
  end

I put the LiveView component itself in a ‘live’ folder in the _web folder of my Phoenix app, and the manage.html.leex file right inside the same team templates directory with the eex files.

2 Likes
5

@tfwright exactly what I’m looking for. Thanks.