Advice on integration between Phoenix EEx Templates and AlpineJS and how to submit a GET request

Questions / Help
,
1

Hi, this is a three parter question.

I have a list of center structs that is supposed to populate a dropdown list in one of my templates

[
  %Center{
    display_name: "Liechtenstein",
    center_id: 5,
    center_type: "Location"
  },
  %Center{
    display_name: "Monte-Carlo",
    center_id: 4,
    center_type: "Location"
  },
....
]
  1. As I am using AlpineJS, apparently it does not like being fed Struct data into its x-data attribute. It has to be a list of arrays like this

centers: [
{ center_id: 0, … },
{ center_id: 1, … },
{ center_id: 2, … }
],

The issue is: the data ALREADY exists inside my session variables to be passed around from page to page. Just that I need to format the data to a JSON string so it can be accepted by AlpineJS. Please critique my code?

x-data = "{ centers: <%= Plug.Conn.get_session(@conn, "centers") |> Jason.encode() |> elem(1) %> }"

Is this a reasonable approach?

I spent quite a bit of time troubleshooting and want to share with everyone that in the iex console, the string produced will ALWAYS have escape characters. It is perfectly fine! You can pipe it into IO.puts() and all will check out perfectly.

  1. My second question is: should i be using alpinejs when phoenix has quite a fair bit of features. For example I want to populate a dropdown div with options:

Phoenix style:

<%= for center <- Plug.Conn.get_session(@conn, "centers") |> Jason.encode() |> elem(1) do %>
    <%= link center.display_name, to: "#", value: '{"center_id": #{center.center_id}, "center_type": #{center.center_type}}', class: "block px-4 py-2 text-gray-500 truncate hover:bg-gray-700 hover:text-gray-50", type: "submit", "x-on:click": '"buttonOrganization1" = #{center.display_name}' %>
<% end %>

AlpineJS style:

  <template x-for="center in centers" :key="center.center_id">
         <li class="pt-2" :id="center.center_id"
         @click="activeCenter = center.center_id, centerSelector = false" x-show="activeCenter!= center.center_id" >                                 >
           <a href="#" class="flex items-center hover:text-green-100 hover:font-medium">
                  <span class="ml-2" x-text="center.display_name"></span>
            </a>
          </li>
   </template>

Im leaning towards alpinejs as it allows me to do much more than Phoenix but im wondering what would be your advice with regards to the considerations?

  1. My last question is killing me all day. How do I actually create this dropdown menu (a div with a list of options that appears below a button when clicked) that triggers a GET request. Most times, using those link helpers in Phoenix supplies the controller with the parameters which then appears in the URL. I dont want the params to appear in the URL after the controller action.

For example if I click the option with Location Id of 3. I want to be directed to the mysite/location page without the location_id appearing in the URL. I did some research and people are recommending it to be a POST action within a form but here I am thinking perhaps it should be a GET? But here I am quite lost and will love to hear from you.

Many thanks.