Questions & Help>Questions

Send JavaScript variables from client to server

/phoenix#javascript#liveview
dev234

dev234

Send JavaScript variables from client to server

Hi I have the same issue that this person had here, but I do not think the solution is really relevant to what I am looking for and I don’t understand it that well without context. I tried to ask for clarification there, but I was not able to receive a response.

I just simply need a way to pass a variable from the client-side JS to the server-rendered views/templates.

I did look into this, but that honestly just appears to be above and beyond what I need and I’m wondering if there is a simpler way.

I am using Phoenix LiveView with Surface UI. I am new to elixir/phoenix. Thank you for any help.

26 comments
/phoenix#javascript#liveview
6 2135 26

Marked As Solved

trisolaran

trisolaran

Add a js hook, and put the logic in the mounted callback of the hook. From there you get the viewport information and push it to the server. mounted callback is executed on the client after the LV has completed mounting.

Post #26

Also Liked

mpope

mpope

It depends on how complex your use-case is. If you need the Javascript variable to go through any logic on the server, then checkout LiveView Javascript Hooks, which work very well and you can create GenServer-like LiveControllers that react to client events. Most of the boilerplate is already setup in the included LiveView javascript.

However, if you simply want to display the values then the server can render an empty div with a specific id (tag) and the client-side JS can then use getElemementByTagName and set the value setting the innerHTML on the returned element.

1
Post #2
benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#push_event/3

This is the function that exists for pushing a message to JS.

1
Post #5
trisolaran

trisolaran

this should be handle_event("test_event", %{"data" => your_data}, socket)

1
Post #9
benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Can you elaborate about why hooks are a poor fit?

1
Post #16
dev234

dev234

That’s what I figured, thank you again everyone for all of your help

1
Post #27

Where Next?

View thread on forum (has 26 responses!)
phoenix
javascript
liveview
Home Questions & Help>Questions
/phoenix#javascript#liveview
6 2137 26
Last post

Popular in Questions Top

bsollish-terakeet
Questions & Help>Questions

Checking if an enum is empty - Credo vs Compiler
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
#compiler#credo
8 22889 6
New
LegitStack
Questions & Help>Questions

Best way to get Elixir to work with python?
I’m hoping you guys can give me some general advice and perhaps code examples if you’re feeling up to it. I’m very interested in Elixir,...
#python#interoperability
35 13513 9
New
joaquinalcerro
Questions & Help>Questions

What is the best approach for fetching large amount of records from postgresql with ecto
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
#ecto
126 24587 27
New
_russellb
Questions & Help>Questions

Web scraping tools
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
#web-scraping
123 19127 45
New
chensan
Questions & Help>Questions

(Postgrex.Error) ERROR 42804 (datatype_mismatch): column "" cannot be cast automatically to type integer
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
#ecto
29 13294 4
New
rms.mrcs
Questions & Help>Questions

Transform a list into an map with indexes using Enum module
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
35 32607 9
New
Fl4m3Ph03n1x
Questions & Help>Questions

How to test a GenServer?
Background Let’s assume I have a typical GenServer that receives messages as requests, does some operation in a DB and returns responses....
#testing#actor-model
77 13824 19
New
gonzofish
Questions & Help>Questions

Ecto: how to join three tables?
I’m currently trying to understand how to join three tables using Ecto. All the examples I’ve seen use 2, so maybe I’m just missing somet...
/phoenix#ecto
21 13889 7
New
johnnyicon
Questions & Help>Questions

How do I use the Postgres JSONB / Postgrex JSON extension?
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
#ecto
22 17588 9
New
sabri
Questions & Help>Questions

Ecto pool_size?
Can someone explain the settings of pool_size of Ecto in config file? and what is the recommend size? Thanks
#ecto
30 14050 5
New

Other popular topics Top

sorentwo
News>Announcing

Oban - Reliable and Observable Job Processing
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
/oban#ecto#postgres#job-processing
977 41022 311
New
JorisKok
Questions & Help>Questions

How is it possible to get 2 million websocket connections when you have 65536 available ports?
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
/phoenix
20 17308 4
New
KronicDeth
Libraries & Projects>Libraries

IntelliJ Elixir - Elixir plugin for JetBrain's IntelliJ Platform
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
#intellij
289 35421 110
New
Trevoke
Questions & Help>Questions

(EXIT) no process: the process is not alive or there's no process currently associated with the given name, possibly because its application isn't started
I have an umbrella app. Some of the apps inside depend on other apps in the umbrella, unsurprisingly. I'm writing a test for one of t...
#otp#umbrella#testing#exunit#errors
26 21431 11
New
jononomo
Questions & Help>Questions

Where / How does the Mix environment variable get set?
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
#mix
31 22791 9
New
vertexbuffer
Questions & Help>Questions

Deleting item from a list
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
7 24097 4
New
aadeshere1
Questions & Help>Questions

Write while loop equivalent in elixir
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
#while#loop
60 28200 36
New
electic
Questions & Help>Questions

DateTime Format to string?
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
#datetime
19 24687 16
New
lucidguppy
Questions & Help>Questions

How do I read a file and enumerate its lines
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
#how-to-question
20 15454 3
New
jay1
Questions & Help>Questions

Why isn’t mnesia the most preferred database for use in Elixir/Phoenix?
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
/phoenix#mnesia
123 21186 22
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement