User:NoseOfCthulhu/Sandbox1

TEST

AJAX table loading User:NoseOfCthulhu/Sandbox1

[link]Click here to reveal the list (it may take a few seconds to load)[/link]
This table requires JavaScript to be enabled and site tooltips to be turned on to be displayed. You can also view the data on another page.

AJAX table loading User:NoseOfCthulhu/Sandbox2

[link]Click here to reveal the list (it may take a few seconds to load)[/link]
This table requires JavaScript to be enabled and site tooltips to be turned on to be displayed. You can also view the data on another page.

AJAX table loading User:NoseOfCthulhu/Sandbox1/3

[link]Click here to reveal the list (it may take a few seconds to load)[/link]
This table requires JavaScript to be enabled and site tooltips to be turned on to be displayed. You can also view the data on another page.

AJAX notes

This section attempts to detail various mechanics of AJAX functionality (aka "Ajax") on Terraria Wiki. The featured content do not follow any specific topic or order, and is merely listing information which is assumed to be of interest.

"Normal" Version	Full Version (All Parameters)
{{ajax |target= |bodyload=[link]Click here to reveal the list (it may take a few seconds to load)[/link] |bodystyle=align="center" }}	{{ajax |mainstyle= |nohead= |head |headstyle= |target= |bodyload=[link]Click here to reveal the list (it may take a few seconds to load)[/link] |bodystyle=align="center" |default= |width= |nojs= }}

ajaxHide Issues

When loading pages with AJAX, certain elements on the loaded pages can normally excluded by embedding them inside <span class="ajaxHide">ELEMENT</span>. This does however not always work, and often the content will be loaded anyway. This is caused by certain interfering elements that don't comply with AJAX. Examples of such elements are:

• Templates:
  • {{unobtainium}}
  • {{Desktop-Console only}}
  • {{Rewrite}}
  • {{Main|Page title}}
  • {{about|1|2|3}}
• Indent colon

In all these cases, the element will be loaded regardless of whether it's embedded in ajaxHide or not. Additionally, interfering elements will similarly reveal non-interfering elements if the former is included in the same ajaxHide as the latter.

Solutions

• Hiding interfering content with <!-- ELEMENT --> will prevent interference. This way, info can still be present on the page in source-form.
•   (x5) can replace a colon indentation; however probably only under certain circumstances to not itself interfere with page formatting.
• Interfering content can be turned non-interfering by placing it inside an invisible table and adding ajaxHide. This will however produce a tiny colored square (with width="100%" a bar) when loaded (see top AJAX load for example).
  • It is not possible to hide this square with additional ajaxHide.
  • Every such table will produce a square/bar. While a single one is hardly notable, multiple ones will form a column.
  • It is possible to use a table to make a whole article "ajaxHide-friendly" and then remove specified parts of it with ajaxHide, but this will similarly affect the loaded page's background color.
  • Being inside a table will alter the appearance of some elements, such as placement. This can bring issues to the target page itself. Table options such as align="center" can presumably solve it.

{| width="100%" |<span class="ajaxHide"> INTERFERING ELEMENT </span> |}

Alignment

The alignment of AJAX-loading content is specified by the |bodystyle= parameter. Typical alignments are align="left", align="right", align="center". This will also affect the alignment of the text within the |bodyload= parameter. Alternate ways of aligning the content are:

• The text (on loaded page) can be embedded into an invisible table like above and then aligned with {| align="ALIGNMENT" where ALIGNMENT is left, right, or center. Such a table will however alter the background color of the text on the loading page.
• Content can similarly be embedded in <div style="text-align: ALIGNMENT">CONTENT</div>. This does not cause discoloration and is arguably the best solution.

Notice that both solutions can be used to set different alignment for loaded content and |bodyload= content.

Loaded content

Template inclusion tags

• AJAX can be used to load Templates (an example being the sections on Recipes). This is often a better alternative than having the loading page display the template by normal standard ({{template}}) if the template includes a large amount of content. However, AJAX and templates do not load content in the exact same manner. AJAX will always load content as it appears on its "own" page while the display of templates can be manipulated with template inclusion tags. For example, a template featuring the following formatting:
  
  

{| class="terraria" style="text-align:center"

! width="20px" | Nr || width="100px" | Product

|-

| 1 || <noinclude>NOINCLUDE</noinclude>

|-

| 2 || <includeonly>INCLUDEONLY</includeonly>

|}

...will display the following when loaded as a template on a page:

Nr	Product
1
2	INCLUDEONLY

When loaded through AJAX it will display as:

Nr	Product
1	NOINCLUDE
2

Hence, in this case, AJAX and template-function will load the content in opposite ways.

Other

• AJAX can not load AJAX-loaded content through another page. For example, if page A loads B through AJAX, then C cannot load B by loading A.
  • C can however load B if B is a template page, but only if A loads it as a {{template}}.
• AJAX can not load collapsible tables. Attempting to do this will load table content as if it was a non-collapsible table. Compare User:NoseOfCthulhu/Sandbox1/3#AJAXMIMIC_margin.2Fwidth_styles and the loading of it (on top of this page) for example.
• AJAX can load TOC, but only the TOC on the loaded target pages (it is not possible to have the TOC on the loading page feature a heading on the loaded page).

AJAX-imitating collapsible table

Below is a collapsible table designed to imitate an AJAX template. It can be used for content which arguably doesn't need its own page while retaining an uniform design when in combination with AJAX templates. It can also be used as a test function to get an idea of how something would look in AJAX.

See Template:Collapse top for an improved version of this feature.

A regular AJAX template:

[link]Click here to reveal the list (it may take a few seconds to load)[/link]
This table requires JavaScript to be enabled and site tooltips to be turned on to be displayed. You can also view the data on another page.

A collapsible table imitating an AJAX template:

Wall Appearance Original Wall Required Solution Notes Ebonstone Wall Stone Wall Purple Solution Corrupt Grass Wall Grass Wall Flower Wall Jungle Wall Purple Solution Pearlstone Wall Stone Wall Blue Solution Hallowed Grass Wall Grass Wall Flower Wall Jungle Wall Blue Solution Crimstone Wall Stone Wall Red Solution Crimson Grass Wall Grass Wall Flower Wall Jungle Wall Red Solution Unlike the others, Crimson Grass Wall cannot feature small flowers. Mushroom Wall (natural version) Mud Wall Jungle Wall (natural version) Dark Blue Solution The "natural" version of Mushroom Wall is harder to utilize as its origin walls are both natural. It has little visual difference from the crafted version, however.

Formatting (v3):

{| class="terraria" width="100%"
! height="20px" |
|-
| align="center" | <font color=#F9F9F9><li><div class="mw-collapsible mw-collapsed" data-expandtext="Click here to reveal the list" data-collapsetext="[hide]"><font color=#000000><div align="center">
CONTENT
</div></font></div>
<!-- if inserting a table, omit class="terraria" -->
|}

Notes

• This table is based on a collapsible div, the toggle text being "alignable" with a <li> entry.
• Tables on Terraria Wiki usually use class="terraria". Omitting this further imitates AJAX (an alternative is setting class="plainlinks"). This is recommended as it also closes the gap between the toggle text and content, and brings on proper margins. The purple entry solely reminds of this and can be removed when using the table.
• The orange part aligns toggle text. The green aligns content. Both defaults to left; in these cases they can be removed. Notice that content will inherit toggle alignment. For vertical alignment it seems a valign="" parameter can be used, but this will affect both toggle and content (a green valign parameter has no effect).
• Normal toggle text of this table type features black brackets ( [Click here to reveal the list] ), which is omitted by the above design to further imitate AJAX. Content color is "enabled" by <font color=#00000> + </font>, though these can be removed if the content doesn't rely on it (such as tables).
• For non-plainlinks tables, specifying width="100%" for the content table is recommended as it creates equal left and right margins.
  • See User:NoseOfCthulhu/Sandbox1/3#AJAXMIMIC_margin.2Fwidth_styles for examples.