AJS.Multiselect not always working

Hi, I’m using an AJS.Multiselect to turn a select list into multi-user select. This is for a custom page under the admin, Add-ons section. My problem is that occassionally the select boxes are not initialized and they just appear as multiline selects rather than the input fields with aoutcomplete.

I have the following inclusion in my atlassian-plugin.xml:

	<web-resource key="saa-admin-resources" name="Admin Web Resources">
		<dependency>com.atlassian.auiplugin:ajs</dependency>
		<resource type="download" name="userPickerUtil.js" location="/includes/jira/field/userPickerUtil.js">
			<param name="source" value="webContextStatic"/>
		</resource>
		<context>atl.admin</context>
	</web-resource>

The select is initialized with:

function sa_initUserPicker(ctx) {
    ctx.find('.nw_userPicker').each(function () {
        var $el = AJS.$(this);
        var x = new AJS.MultiSelect({
            element: this,
            itemAttrDisplayed: "label",
            showDropdownButton: false,
            ajaxOptions:  {
                data: function (query) {
                    return {
                        query: query,
                        exclude: $el.val()
                    }
                },
                url: AJS.params.baseURL + "/rest/api/2/user/picker",
                query: true, // keep going back to the sever for each keystroke
                formatResponse: JIRA.UserPickerUtil.formatResponse
            }
        });
    });
}
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
    if (reason !== JIRA.CONTENT_ADDED_REASON.panelRefreshed) {
    	sa_initUserPicker(context);
    }
});

The HTML looks like:

<select id="issueTab" class="nw_userPicker" name="issueTab" multiple="multiple">
	#foreach($group in $action.getIssueTabAccessGroups())
		#set($name = $action.getUserName($group.accessGroup))
		<option value='$group.accessGroup' title='$name' selected='selected'>$name</option>
	#end
</select>

What am I missing?

Thanks
Paul

It could be that your code is being executed after the NEW_CONTENT_ADDED event is fired. You could refactor a little bit and use jQuery’s onready handling behaviour to guarantee it will be called at least once after the page has loaded:


function sa_initOneUserPicker(element) {
    var $el = AJS.$(element);
    var x = new AJS.MultiSelect({
        element: element,
        itemAttrDisplayed: "label",
        showDropdownButton: false,
        ajaxOptions:  {
            data: function (query) {
                return {
                    query: query,
                    exclude: $el.val()
                }
            },
            url: AJS.params.baseURL + "/rest/api/2/user/picker",
            query: true, // keep going back to the sever for each keystroke
            formatResponse: JIRA.UserPickerUtil.formatResponse
        }
    });
}

function sa_initAllUserPickers(ctx) {
    ctx.find('.nw_userPicker').each(function() {
        sa_initOneUserPicker(this);
    });
}

AJS.$(function initialiseOnDocumentReady() {
    console.debug('initialising on dom ready');
    sa_initAllUserPickers(AJS.$(document));
});

JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
    if (reason !== JIRA.CONTENT_ADDED_REASON.panelRefreshed) {
        console.debug('initialising on jira new content added event');
    	sa_initAllUserPickers(context);
    }
});

Hi @daz, thanks for that. At this stage it looks it could be a rendering problem on the page which is stopping the javascript being defined and run. I’m waiting on the customer to let me know if it worked. If it doesn’t I’ll try your suggestion.

Thanks
Paul

The problem wasn’t the javascript, it was an error while looking up a users display name