I am trying to use JIRA multi select component in my VM and i am facing issues with that. Using Inspect Element browser option I copied the HTML code and pasted on my VM. When i execute the plugin, it is not found functioning but it seems CSS was applied. Do I need to add any resources in the plugin descriptor file?
Appreciate your help.
<div class="field-group aui-field-componentspicker frother-control-renderer"><label for="components">Component/s</label> <div class="multi-select" id="components-multi-select" data-query=""> <textarea autocomplete="off" id="components-textarea" class="aui-field" wrap="off" style="padding-top: 4px; padding-left: 2px; width: 485px; "> </textarea> <div class="ajs-layer-placeholder"><div class="ajs-layer box-shadow limited" style="display: none; width: 506px; position: absolute; left: 162.98333740234375px; top: 371.33331298828125px; "> <div class="aui-list" id="components-suggestions" tabindex="-1" style="white-space: nowrap; width: auto; display: block; "> <ul class="aui-last"> <li class="aui-list-item aui-list-item-li-documentation"><a class="aui-list-item-link" href="#" title="Documentation" style="text-overflow: ellipsis; overflow: hidden; ">Documentation</a></li> <li class="aui-list-item aui-list-item-li-functional"><a class="aui-list-item-link" href="#" title="Functional" style="text-overflow: ellipsis; overflow: hidden; ">Functional</a></li> <li class="aui-list-item aui-list-item-li-mytestcomponent"><a class="aui-list-item-link" href="#" title="MyTestComponent" style="text-overflow: ellipsis; overflow: hidden; ">MyTestComponent</a></li> <li class="aui-list-item aui-list-item-li-requirement active"><a class="aui-list-item-link" href="#" title="Requirement" style="text-overflow: ellipsis; overflow: hidden; ">Requirement</a></li> <li class="aui-list-item aui-list-item-li-soap"><a class="aui-list-item-link" href="#" title="SOAP" style="text-overflow: ellipsis; overflow: hidden; ">SOAP</a></li> <li class="aui-list-item aui-list-item-li-testing"><a class="aui-list-item-link" href="#" title="Testing" style="text-overflow: ellipsis; overflow: hidden; ">Testing</a></li> <li class="aui-list-item aui-list-item-li-ui"><a class="aui-list-item-link" href="#" title="UI" style="text-overflow: ellipsis; overflow: hidden; ">UI</a></li> </ul> </div> </div> </div> <span class="icon noloading drop-menu"><span>More</span></span> <div class="representation"><ul class="items"> </ul> </div> </div> <select class="select hidden" id="components" multiple="multiple" name="components" size="5" data-remove-null-options="true" style="display: none; "> <option title="Documentation " value="12210"> Documentation </option> <option title="Functional " value="12457"> Functional </option> <option title="MyTestComponent " value="14402"> MyTestComponent </option> <option title="Requirement " value="11299"> Requirement </option> <option title="SOAP " value="10559"> SOAP </option> <option title="Testing " value="12940"> Testing </option> <option title="UI " value="11251"> UI </option> </select> <div class="description">Start typing to get a list of possible matches or press down to select.</div> </div>
Community moderators have prevented the ability to post new answers.
Are you binding any javascript to one of those DOM elements? This might be related: Can I have multi-select custom field behave like components/versions fields
Hi Dennis, There is no javascript included. I am trying to include a multiselect component in my vm file and so i copied this piece of code from the UI of Create Issue page and pasted on my vm. I checked the components-edit.vm file existing in location atlassian-jira-4.4.5-standalone\atlassian-jira\WEB-INF\classes\templates\jira\issue\field\components-edit.vm file and tried exactly the same way but it was not worked. so I copied the this piece of code from the view source and pasted on my vm for testing. this way also it does not worked. Can you please suggest a way to include a multiselect component in our vm? I am afraid i did not understand the post you suggested.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Dennis, Any update please??
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Spatruni, this won't work as you're currently only providing the HTML and the styling via CSS, but none of the interactivity that javascript brings. Which is the reason why you should use javascript AJS.MultiSelect on your multiselect -- this will perform the autocomplete when typing. If you do not have the time/skill to make this happen, I'm more than happy to find you an Atlassian 3rd party expert that is able to help you solve this problem :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Denis,
thanks for your reply. I have one question. Is it not possible to use inbuilt JS code for this component? i am actually developing a jira plugin and so i can apply the existing JS rt?
Srinivas
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You can use JIRA's built-in javascript functions, but you have to call the AJS.MultiSelect for the html element to make it work, as described here: https://answers.atlassian.com/questions/43534/can-i-have-multi-select-custom-field-behave-like-components-versions-fields?page=1#43549
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Denis, Excellent, It is working. I just added multiple=multiple to my select and added this java script, got something change in the UI. If you observe the below image, the functioning of component is not correct. Can you also suggest
component?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Denis, how can i get the handle of the selected objects if the multiselect component in javascript?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Denis, Could you please let me know how can get the selected options from this componenets?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Denis, I want to use JIRA inbuilt Date picker component. So i copied the code from duedate-edit.vm file and pasted on my vm file and modified the ids.
<input class="text medium-field" id="testdate" name="testdate" type="text" /> <a href="#" id="testdate-trigger" title="Select Date"> <span class="aui-icon icon-date">Select Date</span> </a>
I added the javascript required for building the datepicker component also.
Calendar.setup({
firstDay : 1,
inputField :
'testdate'
,
button :
'testdate-trigger'
,
align :
'Br'
,
singleClick :
true
,
showsTime :
true
,
useISO8601WeekNumbers :
false
,
ifFormat :
'%d.%m.%Y %H:%M'
});
When i execute i am getting the following exception on my console.
"Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined"
Could you please suggest how i can provide the 'DEF_DATE_FORMAT' value to my component?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I have also Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined problem. I have tried to include following lines but it dit not help. Could you find a solution to this problem?
$webResourceManager.requireResource("jira.webresources:calendar") $WebResourceManager.requireResource("jira.webresources:calendar-en");
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.