Board order changing when adding custom Javascript

[ayeates]

Hello,

Some friends and I have created a forum for an online football league (link) that we run, with help from another board member we have managed to get the tables we want appearing correctly. However, as soon as I add some probably poorly written Javascript (Attached) to create a Knockout tournament structure (Games reducing from 16 > 8 > 4 > 2 > 1 > Winner) the category & board order changes oddly.

The set board order prior to adding the code is:
(Bold is the category, Italic are the boards and ** Is javascripted tables from league republic)


CFL News
 News, Holidays, Suggestions, Waiting Lists & Kits
Squads
Club Squads & Free Agents
Leagues
**Table for Premier league**
Premier League
**Table for Championship**
Championship
League 1
Cups
Champions League
Europa League
CFL Cup
Super Cup
Euro Super Cup
Rules
Rules & Prize Money
Transfers
Transfers, Loans, Releasing & Auctions
Scorers
Top Scorers
Awards
Awards
History
Previous Winners

The categories and boards then appear in this order, which seem to have moved each of the Categories up one and included a category call legend: 

(I have attached photos of this too.)

CFL News
Squads
News, Holidays, Suggestions, Waiting Lists & Kits
Leagues
Club Squads & Free Agents
Cups
**Table for Premer League**
Premier League
**Table for Championship**
Championship
League 1
Rules
Champions League
Europa League
**Javascripted Knockout CFL Cup** - Where I'd like it to appear
CFL Cup
Super Cup
Euro Super Cup
Transfers
Rules & Prize Money
Scorers
Transfers, Loans, Releasing & Auctions
Awards
Top Scorers
History
Awards
Legend - Not in Category/board list in the admin area
Previous Winners

Any assistance on why this changes would be great.

Kind regards,

Andrew

Attachments:

Cupthreadcoding.txt (60.67 KB)

[Craig]

It looks like you are missing a closing </tbody> and </table> tag from your template. Could you post the Board List template

[ayeates]

Hi Craig,

Thank you for responding, I have attached the full board listing code in a notepad document.

Kind regards,

Andrew

Attachments:

Boardlistcode.txt (63.99 KB)

[Kitty Katt]

Hello.

I am not a coder, but I did notice this:

{if $[board.id] == 19}
<tr>
<td colspan="5">


<div style="position: relative; top: 0px; left: 0px; width: 1000px; height: 30px;">



<div style="position: absolute; left: 0px; top: 0px;">
<h4 class="competition-round-title">Round 1</h4>
</div>

You have opened a table row tag and a table data tag, but I saw no closing tags. After opening the table data, it looks like all those <divs> below it are supposed to be crammed into one table cell?

Again, I am not a coder, so my observation may be incorrect.

[Kami]

This thread is a duplicate of one already being addressed here:

support.proboards.com/thread/625869/adding-coding-moving-board-names

[Craig]

It looks like the problem may be with a limitation on space. The template is not saving anything past a certain point.

It would seem to me then, there you may need to find a different method of doing what you want to achieve, for example, having just the <div ...> containers there, and then use the headers/footers to store the bulk of the content and have a javascript code to move the content to the <div ...> as the page loads.

Otherwise, you can try and strip down any inefficiencies in the code you have, to try and reduce the character count. But you may run in to the same problem at a later date, so i would suggest going the headers and footers route.

[ayeates]

Craig Thank you for taking a look, that's such a shame I will need to look into something or just type the teams in without the structure.

Andrew

[Craig]

I am not sure if you wanted them specifically on the main page with the boards, but you do have the option of the custom pages, where you could place the tables and draw. Otherwise, the header/footer solution could work for you.

A quick run would be:

1. In the template, put a placeholder for the table/draw. So, for example:

{if $[board.id] == 12}
<div id="board-12-info-holder"></div>
{/if}

2. In the main header:

<div id="board-12-info-data">

blah blah blah structure blah blah blah

</div>

3. The code to move the content to it's placeholder:

<script type="text/javascript">

$(document).ready(function() {
     $('#board-12-info-holder').append($('#board-12-info-data'));
});

</script>

Put that at the bottom of the board list template.

So running through the three bits, if you just change the ID number of the board. So, you see you have board-12-info-holder for example, and you want to have the content show above board 19, then change the 12 to 19, throughout all the 3 bits of code.

If you need more details, then just shout

[ayeates]

Jun 21, 2017 6:45:11 GMT -8 Craig said:

I am not sure if you wanted them specifically on the main page with the boards, but you do have the option of the custom pages, where you could place the tables and draw. Otherwise, the header/footer solution could work for you.

A quick run would be:

1. In the template, put a placeholder for the table/draw. So, for example:

{if $[board.id] == 12}
<div id="board-12-info-holder"></div>
{/if}

2. In the main header:

<div id="board-12-info-data">

blah blah blah structure blah blah blah

</div>

3. The code to move the content to it's placeholder:

<script type="text/javascript">

$(document).ready(function() {
     $('#board-12-info-holder').append($('#board-12-info-data'));
});

</script>

Put that at the bottom of the board list template.

So running through the three bits, if you just change the ID number of the board. So, you see you have board-12-info-holder for example, and you want to have the content show above board 19, then change the 12 to 19, throughout all the 3 bits of code.

If you need more details, then just shout

Hi Craig,

Thanks for this! I will give it a go in the future for now I've just simplified the code and the cups are appearing well.

Just wish I could sort out the awful tables!

Andrew 

[Craig]

What's the problem with the tables?