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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>haha, okay! at least i can retain some sanity.</p>
<p>Except now I realise I should be using the Commander subscribe. As this makes more sense.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99127" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/423">Post #422</a>
	                </div>
	            </div>
              <div id="likers-container-99127" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99127"
                     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 #422"></div>
  </section>
</div>
    <div class="postbit" id="99218" data-post-id="99218">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry, me again. So I have decided that the broadcast_poke/4 wont work for me. Having to set all the assigns just wont work in my case, as I need to know things like the currently logged in Staff user, which changes data in the view. <a class="mention" href="/u/overminddl1" rel="nofollow">@OvermindDL1</a> is there a way you know around this? can you explain the Shared Commanders model a bit more?</p>
<p><a class="mention" href="/u/grych" rel="nofollow">@grych</a> I looked into the Drab.Elements as you suggested, and I can see that the  Element broadcast_html might work. Although I have to broadcast a list of data, each will have a link on it which currently is built using the Phoenix link helpers and routing paths. Just seems a little messy.<br>
Am I possibly not using Drab in the best use case here? Or am I thinking about this data in the wrong way?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99218" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/424">Post #423</a>
	                </div>
	            </div>
              <div id="likers-container-99218" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99218"
                     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 #423"></div>
  </section>
</div>
    <div class="postbit" id="99243" data-post-id="99243">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I believe the best thing you can do is to split you application into smaller templates. Then you may re-render them at the server side and send changed html to the browser, with <code>broadcast_html</code>.</p>
<p>Actually, there is an example for this on <a href="https://tg.pl/drab#waiter" rel="noopener nofollow ugc">Drab demo page</a> - it is not for broadcasting, but shows the idea of using small partials.</p>
<p>First, render the partial</p>
<pre><code>buttons = render_to_string("waiter_example.html", [])
</code></pre>
<p>then, send it to the browser</p>
<pre><code>insert_html socket, "#waiter_example_div", :beforeend, buttons
</code></pre>
<p>and at the end, remove them from the browser</p>
<pre><code>set_prop socket, "#waiter_example_div", innerHTML: nil
</code></pre>
<p>(the last line should be replaced with <code>set_html/3</code>, when I wrote the example it did not exist yet).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99243" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/425">Post #424</a>
	                </div>
	            </div>
              <div id="likers-container-99243" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99243"
                     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 #424"></div>
  </section>
</div>
    <div class="postbit" id="99248" data-post-id="99248">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Re: shared commanders</p>
<p>It is always a good idea to split your application to chunks, which you can reuse in the future. Shared Commander can help you with this! Shared commanders are the pieces of frontend+backend code. <a href="https://tg.pl/drab#components" rel="noopener nofollow ugc">This is a good example</a>:</p>
<pre><code>&lt;p drab-commander="DrabPoc.Timer2Commander" drab-argument="{seconds: 10}"&gt;
  &lt;button class="btn btn-primary" drab-click="countdown"&gt;
    Count down from 10
  &lt;/button&gt;
  &lt;br&gt;&lt;span class="output"&gt;SPAN .output&lt;/span&gt;
&lt;/p&gt;
</code></pre>
<p>server side:</p>
<pre><code>defhandler countdown(socket, sender, options) do
  for i &lt;- 1..options["seconds"] do
    set_prop socket, this_commander(sender) &lt;&gt; " .output", innerText: options["seconds"] - i
    Process.sleep(1000)
  end
end 
</code></pre>
<p>What is the most important here, is to understand <code>this_commander/1</code> function. It gives you an unique selector of the node you are calling the <code>countdown</code> function from. This is how you may put many of those in the same page.</p>
<p>But your case is probably even easier, as you don’t want to react on the events from the Shared Commander, but just broadcast the updated data for all the servers. Consider you have a book partial:</p>
<pre><code>&lt;tr&gt;&lt;td&gt;
  &lt;span class="book-name" id="book_&lt;%= @book_id %&gt;"&gt;&lt;%= @book_name %&gt;&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
</code></pre>
<p>and render it as a list:</p>
<pre><code>&lt;%= for {book_id, book_name} &lt;- @books do %&gt;
  &lt;%= render("book.html", book_id: book_id, book_name: book_name %&gt;
&lt;% end %&gt;
</code></pre>
<p>now, when you want to refresh the specific book name, just use it’s id!</p>
<pre><code>book_name = read_from_database(book_id)
broadcast_html same_topic("books"), "#book_#{book_id}", book_name
</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="99248" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/426">Post #425</a>
	                </div>
	            </div>
              <div id="likers-container-99248" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99248"
                     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 #425"></div>
  </section>
</div>
    <div class="postbit" id="99253" data-post-id="99253">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks so much! I had a quick go at this and it definitely work out alot cleaner!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99253" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/427">Post #426</a>
	                </div>
	            </div>
              <div id="likers-container-99253" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99253"
                     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 #426"></div>
  </section>
</div>
    <div class="postbit" id="99266" data-post-id="99266">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Do you have any issues with Tests?</p>
<p>During tests my broadcast is happening. The tests pass okay, which they should since I am only unit testing. But at the end of the test I get a termination error from my GenServer process that i am running.</p>
<p>The error is occurs after all tests pass, during the call my Drab broadcast function, which is doing this:</p>
<pre><code>conn = %Plug.Conn{private: %{:phoenix_endpoint =&gt; BonusWeb.Endpoint}}
      auction = Phoenix.View.render_to_string(BonusWeb.Staff.OfferView, "_auction.html", [active_offers: offers, conn: conn ])
      Drab.Element.broadcast_html(Drab.Core.same_topic("brandname"), "#auction", auction)
</code></pre>
<p>The error basically says that im passing in Nil for the active_offers assigns.</p>
<p>Im figuring it has something to do with the DB timing of tests maybe? Have you seen this before?</p>
<p>Error:</p>
<pre><code>21:31:48.592 [error] GenServer :auction terminating
** (MatchError) no match of right hand side value: nil
    (bonus) lib/bonus/submissions/submissions.ex:229: Bonus.Submissions.current_winning_bid/1
    (bonus) lib/bonus_web/views/shared_helpers.ex:32: BonusWeb.SharedHelpers.winning_bid/1
    (bonus) lib/bonus_web/templates/staff/offer/_auction.html.eex:18: anonymous fn/3 in BonusWeb.Staff.OfferView."_auction.html"/1
</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="99266" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/428">Post #427</a>
	                </div>
	            </div>
              <div id="likers-container-99266" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99266"
                     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 #427"></div>
  </section>
</div>
    <div class="postbit" id="99272" data-post-id="99272">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>There are a lot of problems on tests, as most of them must be done with the chromedriver, and sometimes it just fails, but I’ve never seen anything like this.</p>
<p>Can you check what active_offers has before you render_to_string? If it is really nil, you shall check wherever this value comes from. From the test database which is empty?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99272" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/429">Post #428</a>
	                </div>
	            </div>
              <div id="likers-container-99272" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99272"
                     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 #428"></div>
  </section>
</div>
    <div class="postbit" id="99466" data-post-id="99466">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I can inspect the result of render_to_string and it has the correct data in it.</p>
<p>Its weird. When I run a single test it passes. but when I run multiple tests (more than 1) it fails.<br>
Does that mean anything to you? Im not really sure how the test environments are setup and pulled down. But somehow its breaking when running this code and multiple test:</p>
<pre><code>  conn = %Plug.Conn{private: %{:phoenix_endpoint =&gt; BonusWeb.Endpoint}}
  auction = Phoenix.View.render_to_string(BonusWeb.Staff.OfferView, "_auction.html", [active_offers: offers, conn: conn ])
</code></pre>
<p>the render_to_string works on the first test, but then returns empty on every subsequent test. i am so confused.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99466" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/430">Post #429</a>
	                </div>
	            </div>
              <div id="likers-container-99466" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99466"
                     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 #429"></div>
  </section>
</div>
    <div class="postbit" id="99468" data-post-id="99468">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>After further investigation i have narrowed it down to this.<br>
Sorry it doesnt seem to be Drab related, but ddint seem to be getting this issue before I added Drab. Which just seems odd.</p>
<p>But, when running more than 1 test, this code return nil<br>
<code>%{bids: bid} = get_offer(offer.id) |&gt; Repo.preload([bids: order_bids_query])</code></p>
<p>If I change it to this it works:<br>
<code>%{bids: bid} = offer |&gt; Repo.preload([bids: order_bids_query])</code></p>
<p>Seems that the call to get_offer fails when multiple tests run. which seems crazy, cause its pretty standard:<br>
<code>Repo.get(Offer, id) |&gt; Repo.preload(:brands)</code></p>
<p>It seems that the database call must return nil, when it should return a result. then this is breaking the render_to_string call i imagine.</p>
<p>not sure best way to solve this. maybe i should be going to regular elixir chat support? <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"><br>
thanks</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99468" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/431">Post #430</a>
	                </div>
	            </div>
              <div id="likers-container-99468" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99468"
                     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 #430"></div>
  </section>
</div>
    <div class="postbit" id="99518" data-post-id="99518">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I would suggest asking here on the forum with “ecto” tag, as I assume this is Ecto related question. Sorry, I won’t help, as I’ve never used it before.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="99518" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/432">Post #431</a>
	                </div>
	            </div>
              <div id="likers-container-99518" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="99518"
                     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 #431"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/3277/load_more?page=44">Load more posts (58 remaining)</a>
</div></template></turbo-stream>