JIRA Plugin - Issue Tab Panel with Ajax Support

Jira Development Jira Server
, , ,
1

Dear Developer,

I’m about to add a Issue Tab Panel and I want it to be loaded with AJAX. My Issue-Tabpanel modul looks like this:

<issue-tabpanel key="email-issue-tabpanel" name="Email Issue Tab Panel"
		class="de.scag.jira.plugin.mailhandler.tabpanel.EmailTabPanelAction">
		<description>A sample Issue Tab Panel</description>
		<label>Helpdesk</label>
		<resource type="velocity" name="view"
			location="template/tabpanel/email-issue-tab.vm" />
		<order>100</order>
		<sortable>true</sortable>
		<supports-ajax-load>true</supports-ajax-load>
	</issue-tabpanel>

My Web-Resource Modul:

	<web-resource key="email-issue-tab-resources" name="Helpdesk Tab Resources">
		<context>jira.view.issue</context>
		<dependency>jira.webresources:viewissue</dependency>
		<resource type="download" name="email-issue-tab.css"
			location="css/email-issue-tab.css" />
		<resource type="download" name="email-issue-tab.js" location="js/email-issue-tab.js" />
	</web-resource>

And my Velocity for the Panel:

<div id="email-issue-tab-panel">
<div class="aui-group aui-group-split">
	<div class="aui-item">
		<h1>Helpdesk Emails</h1>
	</div>
	<div class="aui-item">
		<button id="new-email-button" class="aui-button aui-button-primary">Email
			versenden</button>
	</div>
</div>


#foreach($email in $emails) #set($emailId = $email.getID())
#set($emailExpanderId = $email.getID() + "-expander")
#set($emailExpanderIconId = $email.getID() + "-expander-icon")
#set($emailExpandableContentId = $email.getID() + "-expandable")
#set($emailNeuLozengeId = $email.getID() + "-neu-lozenge")
<table id=${email.getID()} class="aui email-table">
	<thead>
		<tr>
			<th id=${emailExpanderId}
				class="aui-lozenge aui-lozenge-subtle aui-lozenge-complete">
				<div class="aui-group aui-group-split">
					<div class="aui-item">$action.getEmailExpanderHeader(${emailId})</div>
					<div class="aui-item" style="width: 100px;">
						#if(!$email.getReaded()) <span id="${emailNeuLozengeId}"
							class="aui-lozenge aui-lozenge-complete">Neu</span> #end <span
							id=${emailExpanderIconId}
							class="aui-icon aui-icon-small aui-iconfont-collapsed"></span>
					</div>
				</div>
			</th>
		</tr>
	</thead>
	<tbody id=${emailExpandableContentId} class="expandable">
		<tr>
			<td><label>Author: </label>$email.sender</td>
		</tr>
		<tr>
			<td><label>Betreff: </label>$email.subject</td>
		</tr>
		<tr>
			<td><label>CC: </label></td>
		</tr>
		<tr>
			<td><label>BCC: </label></td>
		</tr>
		<tr>
			<td><label>Anhang: </label></td>
		</tr>
		<tr>
			#set($emailWithHtml = $action.getEmailBody(${emailId}))
			<td><label>Inhalt:</label><br>$emailWithHtml</td>
		</tr>
		<tr>
			<td>
				<label>Zuletzt gelesen: </label>
				<label>$action.getEmailLastReader(${emailId})</label>
			</td>
		</tr>
	</tbody>
</table>
#end
<section role="dialog" id="new-email-dialog"
	class="aui-layer aui-dialog2 aui-dialog2-large" aria-hidden="true">
	<!-- Dialog header -->
	<header class="aui-dialog2-header">
		<!-- The dialog's title -->
		<h2 class="aui-dialog2-header-main">Neue Email verfassen</h2>
		<!-- 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">
		<form id="new-email-form" class="aui">
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.subject")</label>
				</div>
				<div class="aui-item">
					<input id="subject" name="subject" type="text"
						class="text long-field">
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.cc")</label>
				</div>
				<div class="aui-item">
					<input id="cc" name="cc">
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.bcc")</label>
				</div>
				<div class="aui-item">
					<input id="bcc" name="bcc">
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>Email-Template:</label>
				</div>
				<div class="aui-item">
					<select id="template-select2" style="width: 550px;"
						placeholder="Wählen Sie ein Template aus">
						<option value="" selected>- Kein Template verwenden -</option>
						#set($templateNameList = $emailTemplates.keySet())
						#foreach($templateName in $templateNameList) #set($templateContent
						= $emailTemplates.get(${templateName}))
						<option value="${templateContent}">$templateName</option> #end

					</select>
				</div>
			</div>
			<div class="aui-group">
				<div id="email-content-edit" class="aui-item">
					<label>Inhalt:</label> $editVmWithHtml
				</div>
			</div>
			<input hidden="true" id="recipient" name="recipient"
				value="${helpdeskAddress}"> <input hidden="true" id="otrs"
				name="otrs" value="${otrs}"> <input id="emailContent"
				name="emailContent" hidden="true">
				<input hidden="true" id="emailSender" name="emailSender">
		</form>
		<div id="new-email-check" hidden="true">
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.helpdesk.address")</label>
					<label>$helpdeskAddress</label>
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.subject")</label>
					<label id="subjectCheck"></label>
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.cc")</label> <label
						id="ccCheck"></label>
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>$i18n.getText("email.tab.dialog.form.label.bcc")</label> <label
						id="bccCheck"></label>
				</div>
			</div>
			<div class="aui-group">
				<div class="aui-item">
					<label>Inhalt:</label>
					<div id="new-email-check-content"></div>
				</div>
			</div>

		</div>
	</div>
	<!-- Dialog footer -->
	<footer class="aui-dialog2-footer">
		<!-- Actions to render on the right of the footer -->
		<div class="aui-dialog2-footer-actions">
			<div id="dialog-next-button" class="aui-button aui-button-primary">Weiter</div>
			<div id="dialog-send-button" class="aui-button aui-button-primary"
				hidden="true">Senden</div>
			<div hidden="true" id="dialog-back-button" class="aui-button">Zurück</div>
			<button id="dialog-close-button" class="aui-button aui-button-link">Schließen</button>
		</div>
	</footer>
</section>
</div>

In my JS-File I have a console.log() at the top to check if my JS was really loaded

So…when I navigate to an Issue, I can see in the console that my log appears 6 times and not only 1 time like I was expecting…So everytime when I click an Element on my Panel a JS-Function should be called, but in fact it will be called 6 times successively which is not what I want to. Can anyone please help me with this?

So long…

2

What’s in your JS file? Could it be that you need to surround your stuff with the onTabReady call?

JIRA.ViewIssueTabs.onTabReady(function() {
    your stuff goes here...
})

See Loading Issue Tab Panels with AJAX.

3

My JS File

JIRA.ViewIssueTabs.onTabReady(function() {
        console.log("Email Tab JS loaded!");
        ....
})

When I navigate to a Issue where the tab is active on loading I can see in my Developer tools that “Email Tab JS loaded” was called 6 times

bug.PNG948×81 4.57 KB

But when I click for instance on the Comment Tab and then again to my custom tab I can see that “Email Tab JS loaded!” is called only 1 time and everything works fine…

4

I know it’s lame, but as a workaround, can’t you somehow “remember” (in a boolean) that it was already called and ignore the 2nd, …, 6th calls?

1 Like
5

The JS is loaded now only 1 time…but when I change for instance to the comment tab and then again to my new tab, the JS File will not be loaded and I have to reload the page…