Problem with a JS script

[Valentin Plisson]

Hello Atlassian community,

I am contacting you because I have a problem with a JS script. Indeed, the goal of my "mission" was to develop a JS script in order to meet a certain specification.

When the "Notification" column is equal to "yes" I have to make the table row glow.
What's my problem: The script works 1 time, and when I change cues or pages, the script doesn't run anymore. So it runs ONCE on the first page.

However, I have tried these two events:
AJS.$(document).ready(function () {...................}); (this one works only once) --> Screenshot_VOIP.png
$('.issue-table').on('DOMSubtreeModified', function(){.....................}); (this one does an infinite loop and ends up blocking the interface(Screenshot "DOMSubtreeModified.png")

Note that the script was developed as a plugin, but the behavior is exactly the same on Native Queues.

 <script type='text/javascript'>
AJS.$(document).ready(function () { 
if (window.location.href.indexOf("[URL]") >= 0) {
setTimeout(function () {
$("tbody > tr").each(function (key, value) {
id = $(this).find('.issuekey > a').text();
$(this).closest('tr').attr('data-issuekey', id);
row = AJS.$("[data-issuekey=" + id + "]>")
selector_sla =AJS.$("[data-issuekey=" + id + "]>.customfield_10302")
IssueKey = AJS.$("[data-issuekey=" + id + "]>.issuekey");
Priority = AJS.$("[data-issuekey=" + id + "]>.priority").children().attr('title');
selector_gtr = AJS.$("[data-issuekey=" + id + "]>.customfield_10301")
selector_notif = AJS.$("[data-issuekey=" + id + "]>.customfield_11104")
row = IssueKey.parent() 
if (selector_notif.children().text() === "Yes") {
row.css("background-color", "rgb(255, 175, 175)")
$(this).closest('tr').attr('data-notif', "Yes");
}
})
setInterval(function () {
$("[data-notif='Yes']").fadeOut(100).fadeIn(100);
}, 1000);
}, 2000);
}
$('.issue-table').on('DOMSubtreeModified', function(){
if (window.location.href.indexOf("[URL]") >= 0) {
setTimeout(function () {
$("tbody > tr").each(function (key, value) {
id = $(this).find('.issuekey > a').text();
$(this).closest('tr').attr('data-issuekey', id);
row = AJS.$("[data-issuekey=" + id + "]>")
selector_sla =AJS.$("[data-issuekey=" + id + "]>.customfield_10302")
IssueKey = AJS.$("[data-issuekey=" + id + "]>.issuekey");
Priority = AJS.$("[data-issuekey=" + id + "]>.priority").children().attr('title');
selector_gtr = AJS.$("[data-issuekey=" + id + "]>.customfield_10301")
selector_notif = AJS.$("[data-issuekey=" + id + "]>.customfield_11104")
row = IssueKey.parent()
if (selector_notif.children().text() === "Yes") {

row.css("background-color", "rgb(255, 175, 175)")
$(this).closest('tr').attr('data-notif', "Yes");
}
}) 
setInterval(function () {
$("[data-notif='Yes']").fadeOut(100).fadeIn(100);
}, 1000); 
}, 2000);
}
})
}); 
</script>

I remain at your disposal for any other questions

Sincerely,
Valentin

[PD Sheehan · Accepted solution]

Try to call your script both in AJS.$(document).ready() function but also in  AJS.$(document).ajaxComplete().
The first one runs when you first access the page, the second will run each time more data is fetched from the server.

[Valentin Plisson]

Hi Peter-Dave,

Thank you very much for your solution, everything is working fine !!!!

Sincerely
Valentin