Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Dialog2 not displaying

Jonathan Kernan
Jonathan Kernan January 27, 2015

Hi there,

I'm just trying out the Dialog2 on JIRA(v6.3.12). I checked using AJS.version and it appears it's using version AUI v5.6.7. The  Dialog2 component exist for this version but is experimental. I have this velocity template with the sample code from https://docs.atlassian.com/aui/5.6.7/docs/dialog2.html 

When open the page, an error comes up in the js console 

"Uncaught TypeError: Cannot read property 'hasAttribute' of undefined"

What could I be doing wrong which prevents the dialog2 from showing up?

 

<html>
	<head>
		<title>Test Dialog Page</title>
		<meta name="decorator" content="atl.general"/>
		$webResourceManager.requireResource("com.atlassian.auiplugin:dialog2")
		<script>
		// Shows the dialog when the "Show dialog" button is clicked
AJS.$("#dialog-show-button").click(function() {
    AJS.dialog2("#demo-dialog").show();
});
// Hides the dialog
AJS.$("#dialog-close-button").click(function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").hide();
});
// Show event - this is triggered when the dialog is shown
AJS.dialog2("#demo-dialog").on("show", function() {
    console.log("demo-dialog was shown");
});
// Hide event - this is triggered when the dialog is hidden
AJS.dialog2("#demo-dialog").on("hide", function() {
    console.log("demo-dialog was hidden");
});
// Global show event - this is triggered when any dialog is show
AJS.dialog2.on("show", function() {
    console.log("a dialog was shown");
});
// Global hide event - this is triggered when any dialog is hidden
AJS.dialog2.on("hide", function() {
    console.log("a dialog was hidden");
});
		</script>
	</head> 
	<body>
		<section id="content" role="main">
			<div class="aui-page-panel">
				<div class="aui-page-panel-inner">
					<section class="aui-page-panel-content">
						<button id="dialog-show-button" class="aui-button">Show dialog</button>
						<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
							<!-- Dialog header -->
							<header class="aui-dialog2-header">
								<!-- The dialog's title -->
								<h1 class="aui-dialog2-header-main">Hello World</h1>
								<!-- Actions to render to the left of the title -->
								<div class="aui-dialog2-header-actions">
									<button id="demo-header-action" class="aui-button">Header Action</button>
								</div>
								<!-- Actions to render on the right of the header -->
								<div class="aui-dialog2-header-secondary">
									<input id="demo-search" type="text" name="search">
       	 						</div>
								<!-- Close icon -->
								<a class="aui-dialog2-header-close">
									<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
								</a>
    						</header>
							<!-- Main dialog content -->
							<div class="aui-dialog2-content">
								<p>Hello World</p>
							</div>
							<!-- Dialog footer -->
							<footer class="aui-dialog2-footer">
                            <!-- Actions to render on the right of the footer -->
                            <div class="aui-dialog2-footer-actions">
								<button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
							</div>
							<!-- Hint text is rendered on the left of the footer -->
							<div class="aui-dialog2-footer-hint">this is a hint</div>
							</footer>
						</section>
					</section>
				</div>
			</div>
		</section>
	</body>
</html>
Watch
Like Be the first to like this
2205 views

1 answer

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Andreas Ebert
Andreas Ebert
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
January 27, 2015

Your JavaScript code executes before the DOM is fully loaded. You can prevent that by wrapping it in AJS.toInit(), like so:

AJS.toInit(function($) { // inside this block "$" is a shorthand for "AJS.$"
    <!-- INSERT THE JS CODES HERE -->
});

 

Also take a look a the wiki article How to Use JavaScript in Confluence. It's about Confluence, but the JavaScript works the same in JIRA.

View More Comments
Travis DePuy
Travis DePuy August 19, 2016

Just to save someone some headache this:

inside this block "$" is a shorthand for "AJS.$"

 

Does NOT mean replace all AJS.$ with $s. I finally got this to work in my velocity template inside a web-panel with the following:

$webResourceManager.requireResource("com.atlassian.auiplugin:dialog2")
<script>
// Shows the dialog when the "Show dialog" button is clicked
AJS.toInit(function(){
 
 AJS.$("#dialog-show-button").click(function() {
 AJS.dialog2("#engage-dialog").show();
 console.log( 'Show button was clicked...' );
 });
 
 // Hides the dialog
 AJS.$("#dialog-close-button").click(function(e) {
 e.preventDefault();
 AJS.dialog2("#engage-dialog").hide();
 });
 
 // Show event - this is triggered when the dialog is shown
 AJS.dialog2("#engage-dialog").on("show", function() {
 console.log("engage-dialog was shown");
 });
 
 // Hide event - this is triggered when the dialog is hidden
 AJS.dialog2("#engage-dialog").on("hide", function() {
 console.log("engage-dialog was hidden");
 });
 
 // Global show event - this is triggered when any dialog is show
 AJS.dialog2.on("show", function() {
 console.log("a dialog was shown");
 });
 
 // Global hide event - this is triggered when any dialog is hidden
 AJS.dialog2.on("hide", function() {
 console.log("a dialog was hidden");
 });
 
});
 
</script>
 
<!-- <a class="aui-button" href="/jira/secure/EngageAction!input.jspa">Engage</a> <br /> -->

<!-- Create a trigger which will be used by the JavaScript -->
<button id="dialog-show-button" class="aui-button">Engage dialog</button> <br />
<span style="font-weight: bold; color: purple;">Text should go here. A variable: "$myVariable"</span>

<!-- Render the dialog -->
<section role="dialog" id="engage-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
 <!-- Dialog header -->
 <header class="aui-dialog2-header">
 <!-- The dialog's title -->
 <h2 class="aui-dialog2-header-main">Always use sentence case</h2>
 <a class="aui-dialog2-header-close">
 <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
 </a>
 </header>
 <!-- Main dialog content -->
 <div class="aui-dialog2-content">
 <p>Hello World</p>
 </div>
 <!-- Dialog footer -->
 <footer class="aui-dialog2-footer">
 <!-- Actions to render on the right of the footer -->
 <div class="aui-dialog2-footer-actions">
 <button id="dialog-submit-button" class="aui-button aui-button-primary">OK</button>
 <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
 </div>
 <!-- Hint text is rendered on the left of the footer -->
 </footer>
</section>
 
 

 

 
Like
Reply
Atlassian logo
Answers Developer Questions
TAGS
AUG Leaders

Atlassian Community Events

    See all events