JS and jQuery in JIRA

[Karel Rozhon]

Hi everyone,

I am totaly newbie in JIRA, so please be indulgent:-). I am trying to write some relatively simple custom field. I think, I have all code which I need written in Java, but now I am tryting to work with the velocity template. There are some questions.

The first one:

This is the basic one, I would like to use some jQuery like this:

this is an extract from my edit.vm:

$webResourceManager.requireResource("cz.firma.rozy:zakaznik")

<input id="test" style="width:500px"
       type="text" placeholder="Sem zadejte ID"
       value=""
        />
<button id="buttonID" >Use ID</button>

and there is my simple zakaznik.js

EDIT:

AJS.$( "#buttonID" ).click(function() {
    AJS.$("#test").hide();
});

finally atlassian-plugin.xml

...

<web-resource key="zakaznik-resources" name="zakaznik Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:jquery</dependency>
    <dependency>com.atlassian.auiplugin:jquery-ui-other</dependency>
    <dependency>com.atlassian.auiplugin:aui-select2</dependency>
    <context>atl.general</context>
    <context>atl.admin</context>
    <resource type="download" name="zakaznik.css" location="/css/zakaznik.css"/>
    <resource type="download" name="zakaznik.js" location="/js/zakaznik.js"/>
    <resource type="download" name="images/" location="/images"/>
    <context>zakaznik</context>
  </web-resource>

...
  <customfield-type name="Pridani zakaznika" i18n-name-key="customer-add.name" key="customer-add" class="cz.firma.rozy.jira.customfields.CustomerCustomField">
    <description key="customer-add.description">Plugin, ktery prida zakaznika z abry</description>
    <resource name="view" type="velocity" location="templates/viewCustomer.vm"/>
    <resource name="edit" type="velocity" location="templates/edit.vm"/>
  </customfield-type>

Plugin is succesfully builded and installed in JIRA ( JIRA v6.2.3) and I can add this field to any screen. Now I am in edit mode and I would like to try if is this all right. Now when I click on this added button, I would like to see, that input is hidden (I know, this functionality is not usefull, I am only trying it). But my problem is that, when I click on my button, nothing is done and editing mode is closed. Please, could you tell me, what I am doing wrong?

The second question is:

I found this page: https://docs.atlassian.com/aui/latest/sandbox/#and in future I would like to use set an example Auiselect2.

https://docs.atlassian.com/aui/5.5.1/docs/auiselect2.html- here is written, that this is only experimental, so which step I should do to use it? In previous examples you can see, that I was trying to added this funcionality, but it simple did not work. attlassian-plugin.xml was the same in edit.vm and zakaznik.js I was used an example mentioned in docs -

edit.vm:

$webResourceManager.requireResource("cz.firma.rozy:zakaznik")

<form class="aui">
    <select id="select2-example" multiple>
        <option value="CONF">Confluence</option>
        <option value="JIRA">JIRA</option>
        <option value="BAM">Bamboo</option>
        <option value="JAG">JIRA Agile</option>
        <option value="CAP">JIRA Capture</option>
        <option value="AUI">AUI</option>
    </select>
</form>

and zakaznik.js

AJS.$(function() {
    AJS.$("#select2-example").auiSelect2();
});

But when I visit the edit mode, no js is done.

Thank you very much for your advises and for your patience.

Karel Rozhon

[John Bishop]

First Question:

I believe your javascript should be:

AJS.$( "#buttonID" ).click(function() {
    AJS.$("#test").hide();
});

Second Question:

Does your web browser show any javascript errors? Perhaps you need to have that javascript inside the jQuery ready function (http://learn.jquery.com/using-jquery-core/document-ready/)

[Karel Rozhon]

Thank you for quick response.

Oh, sorry I was published one of my test javasripts - I was trying if there isn't some need to escape "#". But in fact, this one which you mentioned I was trying too. And result was the same.

Unfortunately, my browser is not showing any errors.

Now, I have tryied document ready function which you mentioned:

AJS.$( document ).ready(function() {
    AJS.$( "#buttonID" ).click(function() {
        AJS.$("#test").hide();
    });
});

But result is the same. Edit mode is closed after I clicked on my button.