changing the page changes the thread layout?

[tules]

Forum URL: (private)

I have a couple boards like this where the thread list is different from the rest of the forum. When I go to the next page, move a thread, etc, the layout changes to the default one. I previously had a similar problem, but that was with JS, this is proboards' own code. How do i keep it from changing?    

[Craig]

Hi

Going from one page to another, the only thing i notice different is the grey box on the left hand side of each thread, is not on the other pages. Is that all that is wrong there?

The html for it is in the source, but it looks like something is removing it as the page is loading. Have you made any changes that coincide with this issue appearing? If you temporarily disable all plugins, does it still happen?

[tules]

{foreach $[thread]}
{if $[route.params.board_id] == "14" || $[route.params.board_id] == "15" || $[route.params.board_id] == "16" || $[route.params.board_id] == "17" || $[route.params.board_id] == "18" || $[route.params.board_id] == "19"}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td style="padding:0px;">
<table style="width: 100%;margin-top:-1px;margin-bottom: 6px;">
<tr>
<td><div style="position: relative;z-index: 5;top: -32px;left: 80px;">$[thread.checkbox]</div></td>
<td style="padding:5px; background-color: #e03c3c;width: 70px;border: 1px solid #e03c3c;" vAlign="middle">
<div class="appthread-icon">
{if $[thread.id] == "21"}$[thread.last_post.created_by.avatar_small]{else}<a href="$[thread.created_by.href]">$[thread.created_by.avatar_small]</a>{/if}
</div>
</td>
{if $[thread.is_announcement]}{else}
<td class="appthread-sig" style="width: 232px;" style="text-align: center; display: table-cell; vertical-align: middle;">
{if $[thread.created_by.signature]} <div class="appthread-sig2">
$[thread.created_by.signature]
</div>{/if}
</td>{/if}
<td class="appthread-name">

{if $[thread.is_locked]}<i class="fa fa-lock" aria-hidden="true"></i>{/if}
{if $[thread.is_falling]}<i class="fa fa-anchor" aria-hidden="true"></i>{/if}
{if $[thread.is_bookmarked]}<i class="fa fa-star" aria-hidden="true"></i>{/if}
{if $[thread.is_sticky]}<i class="fa fa-thumb-tack" aria-hidden="true"></i>{/if}
{if $[thread.is_poll]}<i class="fa fa-bar-chart" aria-hidden="true"></i>{/if}
{if $[thread.is_announcement]}<i class="fa fa-exclamation" aria-hidden="true" style="color: #e03c3c;"></i>{/if}
{if $[thread.is_announcement]}<span class="announcement-th">$[thread]</span>{else}$[thread]{/if}
<div class="appthread-name2">
{if $[thread.is_announcement]}last post by $[thread.last_post.created_by]{/if} $[thread.created_on] — $[thread.replies_count] <i class="fa fa-commenting-o" aria-hidden="true" title="replies"></i> $[thread.views] <i class="fa fa-eye" aria-hidden="true" title="views"></i>
</div>
</td>
</tr>
</table>
</td>
</tr>





{else}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td style="padding:0px;">
<table style="width: 100%;margin-top:-1px;margin-bottom: 6px;">
<tr>
<td><div style="position: relative;z-index: 5;top: -32px;left: 80px;">$[thread.checkbox]</div></td>
<td style="padding:5px; background-color: #e03c3c;width: 70px;border: 1px solid #e03c3c;" vAlign="middle">
<div class="appthread-icon">
<a href="$[thread.last_post.created_by.href]">$[thread.last_post.created_by.avatar_small]</a>
</div>
</td>
<td class="appthread-name">

{if $[thread.is_locked]}<i class="fa fa-lock" aria-hidden="true"></i>{/if}
{if $[thread.is_falling]}<i class="fa fa-anchor" aria-hidden="true"></i>{/if}
{if $[thread.is_bookmarked]}<i class="fa fa-star" aria-hidden="true"></i>{/if}
{if $[thread.is_sticky]}<i class="fa fa-thumb-tack" aria-hidden="true"></i>{/if}
{if $[thread.is_poll]}<i class="fa fa-bar-chart" aria-hidden="true"></i>{/if}
{if $[thread.is_announcement]}<i class="fa fa-exclamation" aria-hidden="true" style="color: #e03c3c;"></i>{/if}
{if $[thread.is_announcement]}<span class="announcement-th">$[thread]</span>{else}$[thread]{/if}
<div class="appthread-name2">
created by $[thread.created_by] on $[thread.created_on] — $[thread.replies_count] <i class="fa fa-commenting-o" aria-hidden="true" title="replies"></i> $[thread.views] <i class="fa fa-eye" aria-hidden="true" title="views"></i>
</div>
</td>
</tr>
</table>
</td>
</tr>
{/if}
{/foreach}
{if !$[thread]}
<tr class="last">
<td class="last center" colspan="7">No threads were found.</td>
</tr>
{/if}

this is my code for the thread list. i used params to specify a different template on certain pages. i'm not sure why they dont work after something is done to the page

[Brian]

Hi, tules.

$[route.params.board_id] is only defined on the initial page load. When you switch pages in the thread list its value is undefined (this is intentional).

Due to this you wouldn't be able to load alternate thread list HTML based on this variable alone. For things like this I would recommend combining the HTML of both layouts, then hiding and showing elements using CSS. This can be done by using $[route.params.board_id] to assign a class to an element in the Board template, then hiding or showing based on the presence of that class.

[tules]

Wouldn't I run into the same problem when I do that because I'd still be using $[route.params.board_id] ?

[Brian]

The problem you're experiencing is exclusive to list templates since the contents of $[route.params.board_id] change due to the list HTML being loaded again on the same page when using pagination in the thread list.

The Board template only loads once per page, so its contents are permanent. The only HTML that would get reloaded when viewing a board is that which is produced by the $[thread_list] variable (which produces the contents of the Thread List template).

[tules]

That worked! Thank you!