The Atlassian Community can help you and your team get more value out of Atlassian products and practices.
Javascript refactoring
Here is our JavaScript code so far:
<script>
$(function () {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {
if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {
$("#reporter").change( function(e) {
if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
$("#customfield_10301").val("manager1");
} else {
$("#customfield_10301").val("manager2");
}
});
if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
$("#customfield_10301").val("manager1");
} else {
$("#customfield_10301").val("manager2");
}
$("#customfield_10301").focus(function() {
this.blur();
});
$("input#summary").val("mapping");
$("input#summary").parent().css("display", "None");
}
});
if ($("#customfield_10301-val").text()) {
if (JIRA.Users.LoggedInUser.userName() != $.trim($("#customfield_10301-val").text())) {
$('#action_id_21').addClass('hidden');
}
}
});
</script>
How does it look like? This code is very difficult to understand. Let's try to refactor it:
<script>
function setApproverFieldByReporter() {
if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
$("#customfield_10301").val("manager1");
} else {
$("#customfield_10301").val("manager2");
}
};
function disableAporoverField() {
$("#customfield_10301").focus(function() {
this.blur();
});
};
function hideSummaryField() {
$("input#summary").val("mapping");
$("input#summary").parent().css("display", "None");
}
function hideReadyForWorkButtonConditionally() {
if ($("#customfield_10301-val").text()) {
if (JIRA.Users.LoggedInUser.userName() != $.trim($("#customfield_10301-val").text())) {
$('#action_id_21').addClass('hidden');
}
}
}
$(function () {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {
if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {
$("#reporter").change( function(e) {
setApproverFieldByReporter();
});
setApproverFieldByReporter();
disableAporoverField();
hideSummaryField();
}
});
hideReadyForWorkButtonConditionally();
});
</script>
I moved most logic to functions and now at least we can read the flow of our program like this:
$(function () {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {
if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {
$("#reporter").change( function(e) {
setApproverFieldByReporter();
});
setApproverFieldByReporter();
disableAporoverField();
hideSummaryField();
}
});
hideReadyForWorkButtonConditionally();
We still have akward logic with bind Jira event, bind the onchange event. I will leave the refactoring of these things to you.
But event now there are only four pieces of logic in our JavaScript and our code is already difficult to read.
Alexey Matveev _Appfire_
Community LeaderCTO
AppsDelivered
Philippines
1,564 accepted answers
Connect with like-minded Atlassian users at free events near you!
Find an eventConnect with like-minded Atlassian users at free events near you!
Unfortunately there are no Community Events near you at the moment.
Host an eventYou're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events
2 comments