Jira小配件 - 在配置屏幕上重新加载AJAX

Question

找不到解决方案，无论在哪里，我真的希望这是可能的。

我正在写一个Jira小工具，我有一个配置屏幕有2个字段。一个是quickfind项目选择器;你键入并找到项目，然后单击你想要的项目。

第二个字段是组件。您可以选择要过滤的项目组件。但是，每个项目的组件都不相同，因此组件字段会在“config”部分的“args”部分的小工具中指定的AJAX调用中填充。

唯一的问题是，这个AJAX只在第一次加载小工具时被调用;即：在选择项目之前，结果总是“选择一个项目”。

我需要一种方法来重新运行此AJAX调用所选项目被更改的事件。

这可能吗？还是有其他解决方案？我已经尝试过计时器来检查更改，但也存在一些问题;主要是我无法访问/更改“组件”下拉框字段。该小工具只会拒绝加载。

感谢， 卡尔

更新：下面是小工具的JavaScript。正如你所看到的，我添加了一个refreshComponents（）javascript方法，它可以检索给定项目ID的组件，但是我没有办法将它附加到适当的事件。此外，我似乎无法直接修改网页上的任何部件使用jQuery的喜欢或普通JS

 <script type="text/javascript"> 

       var gadget = this; 
       google.load('visualization', '1.0', {'packages':['corechart']}); 

       var oldProject = "initiated"; 
       var globalGadget; 
       function timedComponentUpdate() 
       { 
        //alert(globalGadget.getPref("projectId")); 
        //setTimeout("timedComponentUpdate()",3000); 
       } 

       function refreshComponents(idString) 
       { 
        //refetch components 
        var url = "__ATLASSIAN_BASE_URL__/rest/severity-gadget/1.0/severity-issues/getComponents.json"; 
        url += "?projectId=" + idString; 
        alert(url); 

        var xmlhttp; 
        if (window.XMLHttpRequest) 
         xmlhttp=new XMLHttpRequest(); 
        else 
        { 
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xmlhttp.onreadystatechange=function() 
         { 
          if (xmlhttp.readyState==4) 
          { 
           //document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
           alert(xmlhttp.responseText); 
          } 
         } 

        xmlhttp.open("GET",url,true); 
        xmlhttp.send(); 
       } 

       function drawChart(args, bugtype, comp) { 
        //setup for whether were getting opened or closed 
        var axisTitle; 
        var compTitle; 
        var chart; 

        if(bugtype == "Bug") 
         axisTitle = "Bug"; 
        else 
         axisTitle = "Issue"; 

        if(comp == "All") 
         compTitle = ""; 
        else 
         compTitle = " - Component: " + comp; 

        var wVar = gadgets.window.getViewportDimensions().width-20; 
        var hVar = wVar/3; 
        var hVar = hVar*2; 

        // Create the data table. 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Issues'); 
        data.addColumn('number', 'Trivial'); 
        data.addColumn('number', 'Minor'); 
        data.addColumn('number', 'Major'); 
        data.addColumn('number', 'Critical'); 
        data.addColumn('number', 'Blocker'); 

        AJS.$(args.weeks).each(function() { 
         data.addRow(["Week "+this.number, 
          parseInt(this.issues[0]), 
          parseInt(this.issues[1]), 
          parseInt(this.issues[2]), 
          parseInt(this.issues[3]), 
          parseInt(this.issues[4]) 
         ]); 
        }); 

        var options = {'title':'Weekly '+axisTitle+' Backlog' + compTitle, 
          'width':wVar, 
          'height':hVar, 
          axisFontSize:4, 
          isStacked:true, 
          fontName: '"Arial"' 
        }; 

        chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
       } 

       var gadget = AJS.Gadget(
        { 
         baseUrl: "__ATLASSIAN_BASE_URL__", 
         useOauth: "/rest/gadget/1.0/currentUser", 
         config: { 
          descriptor: function(args) 
          { 
           document.getElementById("chart_div").innerHTML = ""; 

           var gadget = this; 
           var projectPicker = AJS.gadget.fields.projectOrFilterPicker(gadget, "projectId", args.projectOptions); 

           //bh 
           oldProject = this.getPref("projectId"); 
           //refreshComponents(this.getPref("projectId")); 

           return { 
            theme : function() 
            { 
             if (gadgets.window.getViewportDimensions().width < 450) 
             { 
              return "gdt top-label"; 
             } 
             else 
             { 
              return "gdt"; 
             } 
            }(), 
            fields: [ 
             AJS.gadget.fields.nowConfigured(), 
             projectPicker, 
             AJS.gadget.fields.days(gadget, "weeksPrevious"), 
             { 
              userpref: "issueType", 
              label: "Issue Type:", 
              description:"Choose which issue type you would like", 
              type: "select", 
              selected: this.getPref("issueType"), 
              options:[ 
               { 
                label:"Any", 
                value:"Any" 
               }, 
               { 
                label:"Bug", 
                value:"Bug" 
               } 
              ] 
             }, 
             { 
              userpref: "component", 
              label: "Component:", 
              description:"Choose which issue type you would like", 
              type: "select", 
              selected: this.getPref("component"), 
              options:args.components 
             } 
            ] 
           }; 
          }, 
          args: function() 
          { 
           return [ 
           { 
            key: "components", 
            ajaxOptions: function() { 
             var ajaxProject = this.getPref("projectId"); 
             if(ajaxProject == "") 
              ajaxProject = "null"; 

             return { 
              url: "/rest/severity-gadget/1.0/severity-issues/getComponents.json", 
              data: 
              { 
               projectId : ajaxProject 
              } 
             } 
            } 

           } 

           ]; 
          }() 
         }, 
         view: { 
          onResizeReload: true, 
          onResizeAdjustHeight: true, 
          template: function(args) { 
           var gadget = this; 

           gadget.getView().empty(); 

           drawChart(args.issueData, this.getPref("issueType"), this.getPref("component")); 

           gadget.resize(); 
          }, 
          args: [{ 
           key: "issueData", 
           ajaxOptions: function() { 
            return { 
             url: "/rest/severity-gadget/1.0/severity-issues.json", 
             data: { 
              projectId : gadgets.util.unescapeString(this.getPref("projectId")), 
              weeksPrevious: this.getPref("weeksPrevious"), 
              issueType: this.getPref("issueType"), 
              component: this.getPref("component"), 
              backlog: true 
             } 
            }; 
           } 
          }] 
         } 
        } 
       ); 
     </script> 

Answer 1

我认为你需要把你的部件区为Callback Builder。

里面的回调函数，你需要做的几件事情：通过Ajax请求

1. 检索选项呈现下拉
2. 附加一个事件处理程序以刷新列表时，发生特定事件

您的新组件字段可能看起来像这样...我认为您已经有jQuery可用于简洁。

{ 
    userpref: "component", 
    label: "Component", 
    id: "component_field_id" 
    description: "Choose which issue type you would like", 
    type: "callbackBuilder", 
    callback: function(parentDiv){ 

     function renderOptions(options){ 
      // Remove elements from the parentDiv and replace them 
      // with new elements based on the options param 
      // You can use gadget.getPref('component') to ensure you 
      // mark the right option as selected 
     } 

     function getOptions(){ 
      $.ajax({ 
       url: "__ATLASSIAN_BASE_URL__/rest/severity-gadget/1.0/severity-issues/getComponents.json", 
       data: { 
        // You might be able to get hold of the selected value 
        // from the gadget object instead of like this 
        projectId: $("#filter_projectOrFilterId_id").val() 
       } 
      }).done(renderOptions); 
     } 

     // Retrieve and render options on gadget load 
     getOptions(); 

     // Retrieve and render options on an event 
     $(parentDiv).on("update-options", getOptions); 
    } 
} 

此外，您需要在项目选择字段值更改时触发事件。在您的JS代码别的地方（而不是小工具定义中），你需要把这样的代码，但是你需要确认的项目/过滤器选择CSS选择：

$(document).on("change", "#filter_projectOrFilterId_id", function(){ 
    $("#component_field_id").trigger("update-options"); 
}); 

我已经没有测试过，但这就是我试图达到你所要求的。