Thread Layout Changes on Pagination Change?

[JD]

Forum: aeipathy.proboards.com/

Hi!

I have an issue with my thread layouts changing when I select a different page on pagination. I have a custom template in the threads list, and it works lovely on the first page. Then when you select a different page from the pagination menu, it reverts to the default styling.

I have found the following query on here which is the same problem: Link and it was solved by Brian:

Jun 11, 2017 13:39:47 GMT -8 Brian said:

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.

The problem is that I don't understand the answer. Haha. I get the logic and understand why the above works, but I don't think my coding knowledge is advanced enough to work out the implementation.

I was wondering if anyone could help me out with a step by step on how to implement the above answer into my site? Or if anyone has an alternative answer that is simpler to understand, I'll happily take that too.

Many thanks!!

[Brian]

Hi, JD.

Your problem is different than the one described in that thread. The issue you're having is due to your Post List template starting a new table instead of working off of the existing one in the Thread template.

This is the line that makes the pagination work. $[list_class] produces a special class that the page uses to replace the existing posts on the page every time you switch pages.

<tbody class="$[list_class]">

The existence of a <table> tag at the beginning of your Post List template causes your posts to break out of the existing table after the page tries to correct itself because the only new element that can be a child of a <tbody> tag is a <tr> tag. Since your posts no longer exist inside this special <tbody> element the pagination doesn't work.

In the Thread template $[post_list] is where the Post List layout template is inserted. So based on the fact that a <table> and <tbody> are present before this template starts the Post List template should begin with a <tr> element instead of another table.

<table class="list" role="presentation">
    <tbody class="$[list_class]">
        $[post_list]
    </tbody>
</table>

The solution to this issue will be to remove lines 2 (the opening <table> tag), 45 (the closing </table> tag), and 46 (the bunch of <br> tags) from your Post List template.

[JD]

Hi Brian

I'm not sure I explained myself properly... The above actually fixes a problem I didn't know I had yet! Haha! So thank you very much!!

But the original issue is on the thread list template... So, in the board page, where the threads are listed, if I move to another page, the thread list goes all doo-lally :S Any chance this is a simple fix too? :S

[Brian]

The problem is pretty much the same. Everything inside <tbody class="$[list_class]"> gets replaced when you change pages, not just the contents of the $[thread_list] variable. That means that everything in red below no longer exists when changing pages.

<table class="list">
    <tbody class="$[list_class]">
        <tr>
            <td>
                <div class="b_thread"></div>
                {if $[display_thread_list]}$[thread_list]{/if}
            </td>
        </tr>
    </tbody>
</table>

The simplest solution to that is to add the opening and closing <tr> and <td> tags to the beginning and end of your Thread List layout template instead, while leaving that section of your Board template like this:

<table class="list">
    <tbody class="$[list_class]">
        $[thread_list]
    </tbody>
</table>

[JD]

Wonderful!! Thank you for that! Works great. Sorry I'm an idiot lol.