AUI inline dialog in Liferay JSP page

Question

I'm trying to display an inline dialog (that is, aui-inline-dialog, not aui-dialog) in my Liferay 6.1 portal. However I can not get the examples on https://developer.atlassian.com/display/AUI/Inline+Dialog to work.

I tried this:

<a href="#" id="inlineDialog"> Inline Dialog </a>
<script type="text/javascript">
AUI().ready('aui-inline-dialog', 'aui-overlay-manager', function(A) {
    A.InlineDialog(A.one("#inlineDialog"), "myDialog", function(content, trigger, showPopup) {showPopup();}, {onHover: true});
});
</script>

but it just says that InlineDialog is not a function.

What am I missing? (Or is there a better way to display tooltips with more than just textual content?)

Answer 1

Just found the problem: aui-inline-dialog is not included in Liferay.

My solution:

• Download the latest Atlassian FlatPack (like the one on this page: https://developer.atlassian.com/display/AUI/AUI+4.2+Release+Notes)
• Add aui.js and aui-dependencies.js to docroot/js/
• Add <header-portlet-javascript>/js/aui-dependencies.js</header-portlet-javascript> and <header-portlet-javascript>/js/aui.js</header-portlet-javascript> to your liferay-portlet.xml file
• Add aui.css to docroot/css/
• Add <header-portlet-css>/css/aui.css</header-portlet-css> to your liferay-portlet.xml file

Result: You should now be able to use AUI like in the FlatPack examples, e.g.

    <a href="#" id="popupLink">Hover Link</a>

    <script type="text/javascript">
    AJS.InlineDialog(AJS.$("#popupLink"), 1, 
            function(content, trigger, showPopup) {
                content.css({"padding":"16px"}).html('<a href="http://example.com">Appended content.</a>');
                showPopup();
                return false;
            }, {
                onHover:true
            }
        );
    </script>