How to Use JavaScript in a Phoenix LiveView - Revision history

Admin at 21:56, 21 June 2023

2023-06-21T21:56:26Z

← Older revision		Revision as of 21:56, 21 June 2023
Line 83:		Line 83:
	def mount(_params, _session, socket) do		def mount(_params, _session, socket) do
	{:ok, assign(socket, developer: "None")}		{:ok, assign(socket, developer: "None")}
			end

			def handle_event("get_localstorage", %{"developer" => developer}, socket) do
			{:noreply, assign(socket, developer: developer)}
	end		end

2023-06-14T15:56:08Z

← Older revision		Revision as of 15:56, 14 June 2023
Line 127:		Line 127:
	<source>		<source>

	<form phx-submit="create-status" phx-hook="FormLocalStorageHook" id="~~some_id_23cb927rc97~~" >		<form phx-submit="create-status" phx-hook="FormLocalStorageHook" id={"local_storage_hoook-#{testbed.id}"} >
	<input value={@developer} name="developer" type="text" />		<input value={@developer} name="developer" type="text" />
	</form>		</form>

	</source>		</source>

2023-06-14T15:30:19Z

← Older revision		Revision as of 15:30, 14 June 2023
Line 75:		Line 75:
	==Local Storage Example==		==Local Storage Example==

	~~{{In_progress}}~~		The code below creates an object in local storage that has a single key titled developer and a value assigned to developer. The value of developer is set when a user types into the form. When a user revisits the form, the previous data they entered prepopulates the field.


	<source>		<source>

2023-06-14T15:29:00Z

← Older revision		Revision as of 15:29, 14 June 2023
Line 97:		Line 97:
	},		},
	hooks: {		hooks: {
	~~Box~~: {		FormLocalStorageHook : {
	mounted() {		mounted() {

Line 128:		Line 128:
	<source>		<source>

	<form phx-submit="create-status" phx-hook="~~Box~~" id="some_id_23cb927rc97" >		<form phx-submit="create-status" phx-hook="FormLocalStorageHook" id="some_id_23cb927rc97" >
	<input value={@developer} name="developer" type="text" />		<input value={@developer} name="developer" type="text" />
	</form>		</form>

	</source>		</source>

2023-06-14T15:10:58Z

← Older revision		Revision as of 15:10, 14 June 2023
Line 91:		Line 91:

	<source>		<source>

	let liveSocket = new LiveSocket("/live", Socket, {		let liveSocket = new LiveSocket("/live", Socket, {

Line 105:		Line 104:
	})		})

	}		this.pushEvent("get_localstorage", {
	},


	~~Restore: {~~
	~~mounted() {~~

	this.pushEvent("get_localstorage", {
	developer: localStorage.getItem("developer"),		developer: localStorage.getItem("developer"),
	})		})


			}
			},


	}
	}

	}		}
	})		})


	</source>		</source>
Line 134:		Line 128:
	<source>		<source>

	<form ~~class="mt-4"~~ phx-submit="create-status" phx-hook="Box" >		<form phx-submit="create-status" phx-hook="Box" id="some_id_23cb927rc97" >
	<input ~~phx-hook="Restore"~~ value={@developer} name="developer" ~~id={"item-crap-#{testbed.id}"}~~ type="text" />		<input value={@developer} name="developer" type="text" />
	</form>		</form>

	</source>		</source>

2023-06-14T15:04:53Z

2023-06-14T03:13:59Z

@@ Line 12: / Line 12: @@
@@ Line 84: / Line 76: @@
 {{In_progress}}
 <source>
@@ Line 120: / Line 125: @@
 <source>

2023-06-14T03:12:51Z

← Older revision		Revision as of 03:12, 14 June 2023
Line 10:		Line 10:

	[[How_to_Create_a_Basic_Elixir_Phoenix_LiveView_Application\|The first step is to create a LiveView]]. In the render method of the LiveView, you create a DOM element that has an assigned phx-hook property.		[[How_to_Create_a_Basic_Elixir_Phoenix_LiveView_Application\|The first step is to create a LiveView]]. In the render method of the LiveView, you create a DOM element that has an assigned phx-hook property.




			<source>
			def mount(_params, _session, socket) do
			{:ok, assign(socket, developer: "None")}
			end

			</source>


	<source>		<source>

2023-06-13T21:37:34Z

← Older revision		Revision as of 21:37, 13 June 2023
Line 78:		Line 78:
	let liveSocket = new LiveSocket("/live", Socket, {		let liveSocket = new LiveSocket("/live", Socket, {

	params: {_csrf_token: csrfToken},		params: {
	hooks:{		_csrf_token: csrfToken
	Box:{		},
	mounted(){		hooks: {
	this.el.developer.addEventListener("input",(event)=>{		Box: {
	localStorage.setItem("developer", event.target.value)		mounted() {
	})
			this.el.developer.addEventListener("input", (event) => {
			localStorage.setItem("developer", event.target.value)
			})

			}
			},


			Restore: {
			mounted() {

			this.pushEvent("get_localstorage", {
			developer: localStorage.getItem("developer"),
			})



	}		}
	}		}

	}		}
	})		})


	</source>		</source>

			<source>
			def handle_event("get_localstorage", %{"developer" => developer}, socket) do
			{:noreply, assign(socket, developer: developer)}
			end
			</source>

	<source>		<source>

	<form class="mt-4" phx-submit="create-status" phx-hook="Box" >		<form class="mt-4" phx-submit="create-status" phx-hook="Box" >
	<input ~~value~~="hi" name="developer" type="text" />		<input phx-hook="Restore" value={@developer} name="developer" id={"item-crap-#{testbed.id}"} type="text" />
	</form>		</form>

	</source>		</source>

2023-06-12T21:13:56Z

@@ Line 90: / Line 90: @@
+	}
 })
 </source>