The script addspreview andchangesAjax buttons which are:

• faster than standard buttons,
• use less traffic,
• retain the text cursor position and undo (Ctrl-Z) history.

Preview button updatescontent andedit summary previews and then executes globalcollapsing scripts.

Shift-clicking the button will update the previews of interwikis, categories and templates as well.

You still need regular non-Ajax preview if you insert<syntaxhighlight lang="xxx"> or<categorytree>.

• "Preview" displaysreferences when editing a section (by adding <references /> to the end of the text).
• "Preview" highlights syntax when editing .js and .css files.
• When editing an old version shift-click on "changes" will compare your text to that old version.

Add this toyour common.js (or to yourskin js page)

importScript('User:Js/ajaxPreview.js');// [[user:js/ajaxPreview]]

By default the new buttons do this:

• appear on the right from the toolbar:BIAb........................ previewchanges
• capturep andvaccesskeys from the standard buttons.
• get names from the standard buttons (using last word).

This can be changed with the following parameters added to the same JS file as above.

Position:

varajaxPreviewPos='left';//buttons on the left

varajaxPreviewPos='bottom';//buttons on the bottom, replacing standard

The "old" standard buttons are then moved to the right and marked with ">":Save pageShow preview>Show changes>

Accesskeys:

varajaxPreviewKey='o';//"preview" button accesskeyvarajaxDiffKey='b';//"changes" button accesskey

Use empty string'' to disable accesskey.

Button text:

varajaxPreviewButton='Ω';//"preview" button textvarajaxDiffButton='Δ';//"changes" button text

Scrolling:

varajaxPreviewScrollTop=true;//scroll to the top of preview/changes area after each update

Full update:

varajaxPreviewFull=true;//always update interwikis, categories and templates as well

You can make the script call any custom userscripts by defining the globalajaxPreviewExec() function. For example, if you useNavPopups and want popups to appear in the Ajax-updated preview, use the following code:

// code to execute after each preview updatewindow.ajaxPreviewExec=function(previewArea){if(window.setupTooltips){setupTooltips(previewArea);previewArea.ranSetupTooltipsAlready=false;}}

And if you want tables to be sortable and collapsible elements to work as usual in the Ajax-updated preview, use the following code:

// code to execute after each preview updatewindow.ajaxPreviewExec=function(previewArea){mw.loader.using(['jquery.tablesorter','jquery.makeCollapsible'],function(){$('table.sortable').tablesorter();$('#wikiPreview .collapsible').makeCollapsible();});}

• User:Cacycle/wikEd has similar functionality with "preview" and "changes" buttons.
• User:Anomie/ajaxpreview.js adds only "preview" button but will display all references when editing a section (even defined in other sections).
• Option "Show preview without reloading the page" inpreferences does AJAX preview/changes (using standard buttons at the bottom) but it requests the whole HTML page from the server (no traffic savings there).

• Wikipedia scripts