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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thats exactly what I did:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">window.onload = () =&gt; {
  const navView = document.getElementsByTagName('nav')[0].parentElement.id

  window.addEventListener('hashchange', function () {
    livesocket.views[navView].channel.push('event', {
      event: 'hashroute',
      type: null,
      value: window.location.hash.substring(1)
    })
  })
}
</code></pre>
<p>And you’re right, on the server side of things it felt convoluted at first, but not so much after reading <code>phoenix_live_view.js</code>. I figured it’d be ok for now until the func is added to liveview. It is a workaround afterall.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124634" 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/doing-js-events-in-liveview/21614/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-124634" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124634"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="124635" data-post-id="124635">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hilko" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hilko
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Awesome, thanks. That might be a bit cleaner than my approach.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124635" data-batch-url="/posts/batch_likers">
                        1
                      </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/doing-js-events-in-liveview/21614/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-124635" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124635"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="124666" data-post-id="124666">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Using Chrome Developer tools on</p>
<p><a href="http://palegoldenrod-grown-ibis.gigalixirapp.com/bear_game" class="onebox" target="_blank" rel="noopener nofollow ugc">http://palegoldenrod-grown-ibis.gigalixirapp.com/bear_game</a></p>
<p>it is actually using this code path</p>
<p><a href="https://github.com/patrick-steele-idem/morphdom/blob/master/src/util.js#L22" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/patrick-steele-idem/morphdom/blob/master/src/util.js#L22</a></p>
<p>and scripts will execute with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment" rel="noopener nofollow ugc"><code>Range.createContextualFragment</code></a>.</p>
<p>Try this in the console of a fresh tab:</p>
<pre data-code-wrap="javascript"><code class="lang-javascript">let range = document.createRange()
let fragment = range.createContextualFragment(`&lt;script&gt;alert(1)&lt;/script&gt;`)
document.documentElement.appendChild(fragment)
</code></pre>
<hr>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://bugzilla.mozilla.org/show_bug.cgi?id=599588">
  <header class="source">
      <img src="https://forum.elixirforum.com/uploads/default/original/2X/f/f72d1811eacaf1619f65152c1fec1748001966df.ico" class="site-icon" alt="" data-dominant-color="668140" width="16" height="16">

      <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=599588" target="_blank" rel="noopener nofollow ugc">bugzilla.mozilla.org</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=599588" target="_blank" rel="noopener nofollow ugc">599588 - Scripts created using createContextualFragment should be executable</a></h3>

  <p>RESOLVED (hsivonen) in Core - DOM: Core &amp; HTML. Last updated 2013-12-27.</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://bugs.webkit.org/show_bug.cgi?id=12234">
  <header class="source">
      <img src="https://bugs.webkit.org/images/favicon.ico" class="site-icon" alt="" width="64" height="64">

      <a href="https://bugs.webkit.org/show_bug.cgi?id=12234" target="_blank" rel="noopener nofollow ugc">WebKit Bugzilla</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://bugs.webkit.org/show_bug.cgi?id=12234" target="_blank" rel="noopener nofollow ugc">12234 – Using createContextualFragment to insert a</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124666" 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/doing-js-events-in-liveview/21614/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-124666" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124666"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="124711" data-post-id="124711">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yep, this is working.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;%= if @open, do: raw("&lt;script&gt;alert('lolz')&lt;/script&gt;"), else: raw("") %&gt;
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124711" data-batch-url="/posts/batch_likers">
                        1
                      </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/doing-js-events-in-liveview/21614/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-124711" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124711"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="124715" data-post-id="124715">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yo, I ended up having to do this to apply changes on the DOM if it’s any use to you.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">navView.channel.push('event', {
  event: 'hashroute',
  type: null,
  value: window.location.hash.substring(1)
}, 20000).receive("ok", diff =&gt; {
  navView.update(diff)
})
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124715" data-batch-url="/posts/batch_likers">
                        0
                      </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/doing-js-events-in-liveview/21614/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-124715" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124715"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="124867" data-post-id="124867">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Could you maybe outline what you are doing now (liveview controller and template) I lost track.. but I think it’s what I need</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124867" data-batch-url="/posts/batch_likers">
                        0
                      </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/doing-js-events-in-liveview/21614/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-124867" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124867"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="124871" data-post-id="124871">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The function at the bottom is what I use to send info from the client / javascript to the live view actor:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">window.LiveSocket = new LiveSocket("/live")
window.LiveSocket.connect()

window.onload = () =&gt; {
  window.LiveSocket.pushLiveEvent('nav', 'hashchange', window.location.hash.substring(1))
}

window.addEventListener('hashchange', function () {
  window.LiveSocket.pushLiveEvent('nav', 'hashchange', window.location.hash.substring(1))
})

window.LiveSocket.pushLiveEvent = function (query, event, value) {
  const view = window.LiveSocket.views[document.querySelector(query).parentElement.id]

  view.channel.push('event', {
    event: event,
    type: null,
    value: value
  }, 20000).receive("ok", diff =&gt; { view.update(diff) })
}
</code></pre>
<p>And in the actor:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def handle_event("hashchange", route, socket) do
  ...
end
</code></pre>
<p>I haven’t needed to send info from actor to client yet, so I have nothing on that. The live view client joins all the actor channels on <code>connect()</code> so I’m not sure how I would add callbacks to them without forking/modifying the source.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124871" data-batch-url="/posts/batch_likers">
                        3
                      </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/doing-js-events-in-liveview/21614/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-124871" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124871"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="125173" data-post-id="125173">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="suazi" data-post="9" data-topic="21614">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/suazi/48/12064_2.png" class="avatar"> suazi:</div>
<blockquote>
<p>which uses innerHTML. Browsers don’t load script tags inserted with innerHTML.</p>
</blockquote>
</aside>
<p>Yoy, <code>innerHTML</code>?  Isn’t that pretty inefficient?  o.O<br>
Even Drab only sends what specifically needs to change in the DOM tree without sending anything like an HTML string after initial load…  o.O</p>
<p>Plus wouldn’t that reset things to an initial state when they already have other state, like a textfield?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="125173" data-batch-url="/posts/batch_likers">
                        0
                      </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/doing-js-events-in-liveview/21614/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-125173" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="125173"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="151338" data-post-id="151338">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Does this work with the last version of LiveView ? I’ve receive the diff, but although the URL changes, nothing is rendered on the page.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="151338" data-batch-url="/posts/batch_likers">
                        0
                      </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/doing-js-events-in-liveview/21614/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-151338" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="151338"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
    <div class="postbit" id="151362" data-post-id="151362">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Use this instead <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-js-interop-and-client-controlled-dom" class="inline-onebox" rel="noopener nofollow ugc">Phoenix.LiveView — Phoenix LiveView v1.2.5</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="151362" data-batch-url="/posts/batch_likers">
                        0
                      </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/doing-js-events-in-liveview/21614/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-151362" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="151362"
                     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>