Jira Gadget - перезагрузка AJAX на экране конфигурации

Question

Невозможно найти решение этого в любом месте, и я действительно надеюсь, что это возможно.

Я пишу гаджет Джиры, и у меня есть экран конфигурации с 2 полями. Один из них - сборщик проектов quickfind; вы печатаете и находите проекты, и вы нажимаете тот, который вы хотите.

Второе поле - это Компонент. Вы можете выбрать компонент проекта, который вы хотите фильтровать. Однако для каждого проекта разные компоненты, поэтому поле Component заполняется вызовом AJAX, указанным в гаджете в разделе «args» части «config».

Проблема только в том, что этот AJAX вызывается только при первом запуске гаджета; т.е.: до выбора проекта, поэтому результатом всегда является «Выбрать проект».

Мне нужен способ повторить этот вызов AJAX в случае изменения выбранного проекта.

Возможно ли это? Или есть альтернативное решение? Я пробовал таймеры для проверки изменений, но там было несколько проблем; в основном, что я не мог получить доступ/изменить поле Dropbox. Гаджет просто откажется от загрузки.

Спасибо, Карл

Update: Ниже Javascript для гаджета. Как вы можете видеть, я добавил метод refreshComponents() javascript, который может извлекать компоненты с идентификатором проекта, но у меня нет способа привязать это к соответствующему событию. Кроме того, я не могу напрямую изменять какие-либо компоненты на странице с подобными 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.

Внутри функции обратного вызова вам нужно сделать несколько вещей:

1. извлечь параметры с помощью запроса AJAX
2. оказывать ниспадающее меню
3. присоединить обработчик событий, чтобы обновить список, когда происходит конкретное событие

Ваше новое поле компонента может выглядеть примерно так ... Я предположил, что у вас есть 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"); 
}); 

Я не проверял это, но вот как я пытался добиться того, о чем вы просите.