User:NoseOfCthulhu/Sandbox1

AJAX table loading User:NoseOfCthulhu/Sandbox1

AJAX table loading User:NoseOfCthulhu/Sandbox2

AJAX table loading User:NoseOfCthulhu/Sandbox1/3

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.

Issues
When loading pages with AJAX, certain elements on the loaded pages can normally excluded by embedding them inside. 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:
 * 
 * 
 * 
 * 
 * 
 * Indent colon

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


 * Solutions:
 * Hiding interfering content with  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 . This will however produce a tiny colored square (with   a bar) when loaded (see top AJAX load for example).
 * It is not possible to hide this square with additional.
 * 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 " -friendly" and then remove specified parts of it with, 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  can presumably solve it.

Alignment
The alignment of AJAX-loading content is specified by the  parameter. Typical alignments are,  ,. This will also affect the alignment of the text within the  parameter. Alternate ways of aligning the content are:

Notice that both solutions can be used to set different alignment for loaded content and  content.
 * The text (on loaded page) can be embedded into an invisible table like above and then aligned with  where ALIGNMENT is ,  , or  . Such a table will however alter the background color of the text on the loading page.
 * Content can similarly be embedded in CONTENT . This does not cause discoloration and is arguably the best solution.

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 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:
















 * ...will display the following when loaded as a template on a page:
 * {| class="terraria" style="text-align:center"

! width="20px" | Nr || width="100px" | Product
 * 1 ||
 * 2 || INCLUDEONLY
 * }
 * When loaded through AJAX it will display as:
 * {| class="terraria" style="text-align:center"
 * When loaded through AJAX it will display as:
 * {| class="terraria" style="text-align:center"

! width="20px" | Nr || width="100px" | Product
 * 1 || NOINCLUDE
 * 2 ||
 * }
 * Hence, in this case, AJAX and template-function will load the content in opposite ways.
 * }
 * 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.
 * 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 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:

A collapsible table imitating an AJAX template:

Formatting (v3):


 * Notes
 * This table is based on a collapsible div, the toggle text being "alignable" with a  entry.
 * Tables on Terraria Wiki usually use . Omitting this further imitates AJAX (an alternative is setting  ). 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 ; in these cases they can be removed. Notice that content will inherit toggle alignment. For vertical alignment it seems a   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  + , though these can be removed if the content doesn't rely on it (such as tables).
 * For non-plainlinks tables, specifying  for the content table is recommended as it creates equal left and right margins.
 * See User:NoseOfCthulhu/Sandbox1/3 for examples.