Refresh Jira Gadget AJAX while Viewing Configuration Screen

Question

Refresh Jira Gadget AJAX while Viewing Configuration Screen

Having trouble finding a solution to this specific issue and I'm really hoping for a resolution.

I am currently working on developing a Jira gadget where I have a configuration screen with two fields. The first one is a quickfind project picker that allows you to type and find projects, then click on the desired one.

The second field is for Components. Here, you can select the component of the project you want to filter by. However, as components vary for each project, the Component field is populated through an AJAX call specified in the gadget's "args" section within the "config" part.

The only setback is that this AJAX call is triggered only upon the initial loading of the gadget, before a project is selected. Therefore, the result always shows "Select A Project".

I am looking for a way to rerun this AJAX call when the selected project is changed.

Is this scenario achievable? Or are there alternative solutions available? I have attempted using timers to detect changes, but encountered issues, particularly regarding accessing/altering the Component dropdown field which resulted in the gadget failing to load.

Update: Below you'll find the Javascript code for the gadget. As visible, I have implemented a refreshComponents() method in Javascript, capable of retrieving the Components based on a project ID. However, I'm struggling to associate this with the correct event. Also, I seem unable to directly modify any components on the page using jQuery or standard JS.

<div id="chart_div" style="overflow: auto;"></div>

        <script type="text/javascript">
        
                // JavaScript code goes here
                
        </script>

javascript ajax jira jira-plugin

Answer 1

Answer №1

If you want to dynamicize your component field, consider turning it into a Callback Builder.

Within the callback function, make sure to execute these steps:

Retrieve options using an AJAX call
Render the dropdown menu
Add an event listener to update the list when required

Your updated component field could resemble the following code snippet, assuming jQuery usage for simplicity.

{
    userpref: "component",
    label: "Component",
    id: "component_field_id"
    description: "Choose your preferred issue type",
    type: "callbackBuilder",
    callback: function(parentDiv){

        function renderOptions(options){
            // Replace elements in parentDiv based on options param
            // Utilize gadget.getPref('component') to mark the correct option as selected
        }

        function getOptions(){
            $.ajax({
                 url: "__ATLASSIAN_BASE_URL__/rest/severity-gadget/1.0/severity-issues/getComponents.json",
                 data: {
                     projectId: $("#filter_projectOrFilterId_id").val() 
                 }
            }).done(renderOptions);
        }

        // Fetch and display options upon gadget load
        getOptions();

        // Fetch and display options upon triggering an event
        $(parentDiv).on("update-options", getOptions);
    }
}

In addition, ensure to trigger an event when the project selection field value changes. Outside of the gadget definition in your JS code, include similar scripting (and confirm the CSS selector for the project/filter selector):

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

This approach could help achieve your desired functionality, although testing may be necessary.

Answer 2

If you want to dynamicize your component field, consider turning it into a Callback Builder.

Within the callback function, make sure to execute these steps:

Retrieve options using an AJAX call
Render the dropdown menu
Add an event listener to update the list when required

Your updated component field could resemble the following code snippet, assuming jQuery usage for simplicity.

{
    userpref: "component",
    label: "Component",
    id: "component_field_id"
    description: "Choose your preferred issue type",
    type: "callbackBuilder",
    callback: function(parentDiv){

        function renderOptions(options){
            // Replace elements in parentDiv based on options param
            // Utilize gadget.getPref('component') to mark the correct option as selected
        }

        function getOptions(){
            $.ajax({
                 url: "__ATLASSIAN_BASE_URL__/rest/severity-gadget/1.0/severity-issues/getComponents.json",
                 data: {
                     projectId: $("#filter_projectOrFilterId_id").val() 
                 }
            }).done(renderOptions);
        }

        // Fetch and display options upon gadget load
        getOptions();

        // Fetch and display options upon triggering an event
        $(parentDiv).on("update-options", getOptions);
    }
}

In addition, ensure to trigger an event when the project selection field value changes. Outside of the gadget definition in your JS code, include similar scripting (and confirm the CSS selector for the project/filter selector):

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

This approach could help achieve your desired functionality, although testing may be necessary.

Refresh Jira Gadget AJAX while Viewing Configuration Screen

Answer №1

Similar questions

What is the best way to generate a fresh set of data from a search parameter?

Stop the animation when the mouse is moved

Node.js express version 4.13.3 is experiencing an issue where the serveStatic method is not properly serving mp3 or

Issue with ThemeManager in Material UI & React: Constructor is not valid

Error: Attempted to export 'e', however it was not defined in the module (located at vite.js?v=d59cec13:236:3) - occurring in the three.js/vite combination

Obtain unique identifiers for the purpose of sorting the items

Tips for adjusting the button color in Material UI by utilizing the ":active" pseudo-class

Is there a way to access the filtered or organized rows in the Quasar Q-Table?

JavaScript JQuery alert popup fails to display

The jqGrid is not showing the AJAX JSON data as expected

What is the way to access the "bio" property of a "User" object using JavaScript?

Several jQuery ajax requests seem to be failing due to errors in previous calls

Storing the blob received from an AJAX call into Azure Blob Storage may result in a corrupted image

Using JSONP with $.ajax triggers security alert in IE8

Leverage the power of personalized SCSS styles in combination with Bootstrap-Vue, Webpack, and

The autocomplete feature triggers the closure of the bootstrap dropdown when selecting

What is the best way to execute multiple controller functions for a single route?

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

The non-disappearing nature of -webkit-appearance

"Encountered an issue with ng-annotate during processing