<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="386221" data-post-id="386221">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="rhcarvalho" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/120/32243_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  rhcarvalho
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="xxdavid" data-post="8" data-topic="74809">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/xxdavid/48/38739_2.png" class="avatar"> xxdavid:</div>
<blockquote>
<p><a class="mention" href="/u/rhcarvalho" rel="nofollow">@rhcarvalho</a> and <a class="mention" href="/u/josevalim" rel="nofollow">@josevalim</a>, you both have mentioned sending a JS command from the server. What do you mean by that? Sending an event (using <code>push_event</code>) and executing a JS command on some element (using <code>execJS</code>) in a hook that listens for the event?</p>
</blockquote>
</aside>
<p>Yes, hook or a global listener. See:</p>
<ul>
<li><a href="https://hexdocs.pm/phoenix_live_view/1.1.28/js-interop.html#handling-server-pushed-events" rel="noopener nofollow ugc">Handling server-pushed events</a> (global)</li>
<li><a href="https://hexdocs.pm/phoenix_live_view/1.1.28/js-interop.html#client-server-communication" rel="noopener nofollow ugc">Client-server communication</a> (hook)</li>
</ul>
<p>There’s also an unreleased improvement in <code>main</code> related to this use case, as discussed in <a href="https://forum.elixirforum.com/t/make-js-t-a-public-data-structure-or-json-serializable/53870" class="inline-onebox" rel="nofollow">Make `JS.t()` a public data structure, or json serializable</a> and implemented in <a href="https://github.com/phoenixframework/phoenix_live_view/pull/4060" class="inline-onebox" rel="noopener nofollow ugc">Support pushing JS commands via events by rhcarvalho · Pull Request #4060 · phoenixframework/phoenix_live_view · GitHub</a> .</p>
<p>The relevant piece of documentation in <code>main</code>:</p>
<p><a href="https://github.com/phoenixframework/phoenix_live_view/blob/52c9d3b6a65dcc78ec7c5ca3762b7ddc2d4bdd55/lib/phoenix_live_view/js.ex#L269-L329" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/phoenixframework/phoenix_live_view/blob/52c9d3b6a65dcc78ec7c5ca3762b7ddc2d4bdd55/lib/phoenix_live_view/js.ex#L269-L329</a></p>
<p>The good news is that with the latest LV release (v1.1.28), i.e. without the improvement above, you can still follow the “common case” documented above, and pre-encode your command(s) as a data attribute in some element.</p>
<p>Note that you don’t have to restrict you JavaScript event handler to execute LV’s “JS Commands”, you can run any JavaScript code you want.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="386221" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/pessimistic-scenarios-in-optimistic-updates-with-liveview/74809/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-386221" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="386221"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>