I develop a custom plugin for Jira. In a Configuration page I want to display a list of user projects using aui-select2 component.
ajax url: http://localhost:2990/jira/rest/api/2/project
data response:
[
{
"expand": "description,lead,url,projectKeys",
"self": "http://localhost:2990/jira/rest/api/2/project/10001",
"id": "10001",
"key": "LP",
"name": "Test1 Project",
"avatarUrls": {
"48x48": "http://localhost:2990/jira/secure/projectavatar?avatarId=10324",
},
"projectTypeKey": "business"
},
{
"expand": "description,lead,url,projectKeys",
"self": "http://localhost:2990/jira/rest/api/2/project/10000",
"id": "10000",
"key": "WP",
"name": "Test2 Project",
"avatarUrls": {
"48x48": "http://localhost:2990/jira/secure/projectavatar?avatarId=10324",
},
"projectTypeKey": "business"
}
]
I want to display the project name as items for aui-select2 but the problem is that the component display a spinner that load forever without displaying project name.
I use the following soy template:
{namespace JIRA.Templates.IJP}
{template .getProjects}
<form class="aui" id="ijp-project-select-form">
<div class="field-group">
<label for="ijp-project-select">Projects</label>
<div id="ijp-project-select"
name="ijp-project-select"
class="ijp-aui-select"
placeholder="select a project">
</div>
</div>
<div class="buttons-container">
<div class="buttons">
<input class="button submit" type="submit"
id="ijp-project-select-save-button"
value="save"/>
</div>
</div>
</form>
{/template}
I use the following javascript:
var initGetProjects = function(restUrl) {
var templateProjectsSelection = JIRA.Templates.IJP.getProjects();
var auiProjectSelectOptions = {
ajax : {
url : function() {
return restUrl + '/project';
},
dataType : 'json',
delay : 250,
data:{
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id
}
})
};
}
},
formatResult: function (item) { return item.name; },
formatSelection: function (item) { return item.name; },
}
};
/* INIT TEMPLATES AND WIDGETS */
AJS.$('#ijp-config-page-container').append(templateProjectsSelection);
AJS.$('#ijp-project-select').auiSelect2(auiProjectSelectOptions);
/*AJS.$('#ijp-project-select-form').submit(function (e) {
e.preventDefault();
AJS.$(AJS.$('#ijp-project-select').select2('data')).each(function () {
showSuccessFlag(this.id);
});
});*/
};
AJS.toInit(function(){
var baseUrl = AJS.params.baseURL;
var restUrl = baseUrl + '/rest/api/2';
initGetProjects(restUrl);
});
I have this error in console:
Uncaught TypeError: data.call is not a function