How to use AUI styling elements with dynamic load

In our documentation you might have seen some AUI styling elements used. Some of them are automatically provided by Confluence, others need to be required explicitly. To require a ressource, for example the datepicker, you usually call a function in your Velocity template like this:

CODE

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:aui-date-picker")

This doesn't work when using dynamic load, though, because only the rendered template is sent back to your client. To be able to use dynamic load and AUI elements at the same time, we suggest you use the JavaScript equivalent "WRM":

CODE

<script>
AJS.toInit(function() {
  WRM.require("com.atlassian.auiplugin:aui-date-picker", function() {
    jQuery("#pq_date").datePicker({overrideBrowserDefault:true});
  });
});
</script>

The JavaScript version works both with and without dynamic load. But if you are sure that you are never going to use dynamic load on your query, you might want to stick to the Velocity version, since the JavaScript version adds a little bit of delay before your AUI element can actually be rendered.