Best practice use data in javascript (thus passing data)

[kokolegorille]

Hello and welcome,

@akramic

I’m wondering what the best practice is for passing data from javascript to the template.

It is a little bit more complicate to pass js data to the server, because http is not bidirectional.

@akramic

In my project I’m using the browser API to user location data which I need to pass back to the server.

Are You sure You cannot do all client side? recently I had to display datetime in the browser timezone. It was simpler to add some class to datetime container (“utc_to_local”) and make the change client side only.

But if You want to make it server side, I think the easiest solution would be to pass the locale, like new?locale=whatever. Because new is a get request.

@akramic

At this point the user does not have a session and is anonymous

You could use a plug to set a session_id.

Want to know count of current users reading “EACH” post

This is a plug to ensure a session has an id… defmodule KokoWeb.Plugs.EnsureSessionId do @moduledoc """ Add a session_id to conn and session """ import Plug.Conn def init(opts), do: opts def call(conn, _opts) do case get_session(conn, :session_id) do nil -> session_id = Ecto.UUID.generate() conn |> put_session(:session_id, session_id) |> assign(:session_id, session_id) session_id -> conn |> assign(:session_id, sessi…

This way, You could pass data to the server with this session_id, and retrieve this data server side

@akramic

It appears that Live View has Hooks which allows this inter-operability but changing my page to Live View would not really be appropriate.

It’s not even needed, and it is nice to see how it is done in liveview, which use websocket under the hood. You can set params to the socket, and retrieve them in liveview.

let liveSocket = new LiveSocket("/live", Socket, {
  params: {
    _csrf_token: csrfToken,
    locale: Intl.NumberFormat().resolvedOptions().locale,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    timezone_offset: -(new Date().getTimezoneOffset() / 60),
  }
});

# In liveview mount

    if connected?(socket) do
      Logger.info("SOCKET PARAMS: #{inspect get_connect_params(socket)}")
    end

# And the result

  [info] SOCKET PARAMS: %{
    "_csrf_token" => "...",
    "_mounts" => 0,
    "_track_static" => ["..."],
    "locale" => "fr",
    "timezone" => "Europe/Zurich",
    "timezone_offset" => 2
  }

So You could use websocket, but it does not seems You need this, You just want to localize your login form. => new?locale=whatever and retrieve the locale server side.

Use an id to the new link, and add locale params to the path of this link with js.