Javascript JIRA扩展无法在悬停时工作

Javascript JIRA Extension not working on hover

本文关键字:悬停 工作 JIRA 扩展 Javascript      更新时间:2023-12-03

我开发了一些Javascript示例,它创建了一个JIRA工具提示(使用Tipsy AUI指南-https://docs.atlassian.com/aui/5.4.0/docs/tooltips.html)当您将鼠标悬停在问题链接上时,Ticket状态、Summary、Assignee和fixVersion的详细信息。主要用于问题搜索页面,防止连续右键点击->在新选项卡中打开->检查。。。这变得非常乏味,但也可以用于大多数其他问题链接。

这意味着在悬停链接时工作,但它并不总是按计划进行。当我第一次将鼠标悬停在"任何问题"链接上时,它会生成一个"未定义"的工具提示。当我第二次将鼠标悬停在"任何问题"链接上时,它会按预期生成准确的工具提示。把它复制到你的控制台上,我相信你会看到同样的行为。

我不是Javascript大师,所以可能是我不知道的Javascript机制,所以如果有人知道为什么会发生这种情况,请告诉我!

我还将它打包到了一个JIRA插件中,并看到了相同的结果。

AJS.toInit(function () {
var url,
issue_id,
offset,
x,
y,
jira_data,
html,
fixVersions,
assignee,
domain = document.location;
// build url whatever it might be
url = domain.protocol +'//'+ domain.hostname
if (domain.port !== "") {
    url += ':'+domain.port
}
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").tooltip({
    title: function () {
        // GETS THE ISSUE ID FROM THE HREF ELEMENT
        issue_id = (AJS.$(this).attr("href")).slice((AJS.$(this).attr("href")).lastIndexOf("/"), (AJS.$(this).attr("href")).length);
        // QUERIES JIRA API - ALREADY AUTHENTICATED WITH SESSION
        jira_data = AJS.$.getJSON(url+'/rest/api/2/issue' + issue_id, function (json) {
        })
            // AJAX COMPLETE FUNCTION
            jira_data.done(function (jira_data) {
            // CHECK FOR FixVersoin and Multiple FixVersions
            fixVersions = ""
            if (jira_data['fields']['fixVersions'] === undefined) {
                fixVersions = "None";
            } else {
            AJS.$.each(jira_data['fields']['fixVersions'], function(index, value) {
                fixVersions += value['name'] + " ";
            });};
            // CHECK FOR UNASSIGNED
            if (jira_data['fields']['assignee'] === undefined) {
                assignee = "Unassigned";
            } else {
                assignee = jira_data['fields']['assignee']['displayName'];
            };            
            // BUILD STRING OUTPUT
            html = "<span style='text-align:left'>";
            html += "<strong>Status: </strong>" + jira_data['fields']['status']['name'] + "</br>"
            html +="<strong>Assignee: </strong>" + assignee + "</br>";
            html += "<strong>Fix Version:  </strong>" +fixVersions+ "</br>";
            html += "<strong>Summary: </strong>" + jira_data['fields']['summary'];
            html += "</span>"
        });
        return html;
    }, live: true, gravity: AJS.$.fn.tipsy.autoWE, html:true, delayIn: 400, delayOut: 50});

        // REMOVE TITLE TAG TO PREVENT OBSTURCTION
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").removeAttr('title');    
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").parent().removeAttr('title');
});

我重构了你的代码,它运行正常。诀窍是在ajax回调函数中填充工具提示。

AJS.toInit(function () {
var url,
issue_id,
offset,
x,
y,
jira_data,
html,
fixVersions,
assignee,
domain = document.location;
// build url whatever it might be
url = domain.protocol +'//'+ domain.hostname
if (domain.port !== "") {
    url += ':'+domain.port
}
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").hover(function () {
         console.log('Entro')
        // GETS THE ISSUE ID FROM THE HREF ELEMENT
        issue_id = (AJS.$(this).attr("href")).slice((AJS.$(this).attr("href")).lastIndexOf("/"), (AJS.$(this).attr("href")).length);
        // QUERIES JIRA API - ALREADY AUTHENTICATED WITH SESSION
        jira_data = AJS.$.getJSON(url+'/rest/api/2/issue' + issue_id, function (json) {
        })
            // AJAX COMPLETE FUNCTION
            jira_data.done(function (jira_data) {
            // CHECK FOR UNASSIGNED
            if (jira_data['fields']['assignee'] === undefined) {
                assignee = "Unassigned";
            } else {
                assignee = jira_data['fields']['assignee']['displayName'];
            };            
            // BUILD STRING OUTPUT
            html = "<span style='text-align:left'>";
            html += "<strong>Summary: </strong>" + jira_data['fields']['summary'] + "</br>";
            html += "<strong>Status: </strong>" + jira_data['fields']['status']['name'] + "</br>";
            html +="<strong>Asignado: </strong>" + assignee + "</br>";
            html += "</span>";
            AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").removeAttr('title');    
			AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").parent().removeAttr('title');
            AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").tooltip({title:function () {
        return html;
    },live: true, gravity: AJS.$.fn.tipsy.autoWE, html:true, delayIn: 400, delayOut: 50});
        });
});
});

问题(或者至少是"a"问题)是,在收到鼠标悬停事件之前,您不会将工具提示附加到链接。附加工具提示后,工具提示库将开始查找鼠标悬停事件。如果在添加工具提示时已经将鼠标悬停在元素上,则尚不清楚它的效果如何,这让我认为它与问题有关在任何情况下,您都不希望每次用户将鼠标悬停在链接上时都重新初始化工具提示处理程序。

您需要使用现场类型的活动与醉。在这种情况下,你不附加自己的鼠标悬停处理程序,而是让工具提示库来处理它

再次阅读你的问题,以及你在下面的评论,表明你想要一种不同于我最初建议的方法。由于Tipsy似乎没有原生AJAX支持,您需要回到更接近您最初编写的内容。

目标是为每个链接附加一个实时处理程序,并查看该链接是否已被注释为提示。如果没有,则需要执行AJAX调用来获取数据。AJAX调用返回后,您才希望附加醉醺醺的工具提示。

这假设tipsy在您已经将鼠标悬停在某个元素上并添加工具提示,然后使其立即呈现工具提示时能够正确处理这种情况。从你最初的帖子来看,这听起来像是因为你得到了"未定义"。

换句话说,类似这样的东西:

AJS.$(document).on("mouseover", ".issue-link, td.issuelinks > ...etc...")(function(e) {
    var $el = AJS.$(e.currentTarget);
    // Attach an attribute so that we only do this once per element:
    if ($el.attr('data-has-tipsy') === 'yes') {
         return; // already handled
    }
    $el.attr('data-has-tipsy', 'yes');
    // Now call your code to get the issue data here.
    // issue_id = ...
    // jira_data = ...
    jira_data.done(function (jira_data) {
        // calculate html here
        var html = 'Hello, Bob';
        // Finally, attach the tooltip within the done function!
        $el.tooltip({title: html, gravity: 'n', html: true, ...});
    }
}