I am trying to write this simple Javascript logic to disable multiselect field if user chose specific options from another select field. This is a JIRA dialog2, so I am using their JQuery namespace (eg: AJS).
Problem is when I open the dialog and select the specific values from the select field the handler for the change event of the select field runs properly and the other multiselect field is disabled. However, the snippet is not called/doesn't run if the dialog got closed by either pressing escape button or clicking outside it, as opposed to closing it by clicking the 'close' button. I am not a js expert and would appreciate any help in this.
(function($) {
$(function() {
AJS.dialog2.on("show", function(e) {
var targetId = e.target.id;
var spinning = false;
if (targetId == "sr-dialog") {
//start of the part that fails
//noticing that the change event for the searchtypeselect field is fired only when the dialog shows up first time and re shows again only if the dialog got closed by the 'close' button. If dialog escaped it doesn't fire anymore.
var $searchTypeSelect = AJS.$("#select-searchtype");
var $fieldMultiSelect = AJS.$("#field-multiselect");
$searchTypeSelect.change(function(e) {
if ($searchTypeSelect.val() == 'D' || searchTypeSelect.val() == 'S') {
$fieldMultiSelect.removeAttr('disabled');
} else {
$fieldMultiSelect.attr('disabled', 'disabled').val('');
}
}).trigger('change');
// end of the part that fails
AJS.$(e.target).find("#submit-spinner-trigger").click(function(e) {
var number = AJS.$("input[type=radio]:checked", "#topSearchForm").val();
var searchType = AJS.$("#select-searchtype option:selected", "#topSearchForm").val();
var fields = [];
AJS.$("#field-multiselect :selected", "#topSearchForm").each(function(i, selected) {
fields[i] = $(selected).val();
});
var since = AJS.$("#select-since option:selected", "#topSearchForm").val();
if (!spinning) {
AJS.$('.button-spinner').spin();
spinning = true;
}
});
}
});
});
})(AJS.$);
