How to implement jQuery functionality in JIRA plugin development

Other Questions Jira
1

I’m working on creating a JIRA plugin and running into problems with getting jQuery to work properly. I believe jQuery should already be available in the JIRA framework, but I can’t seem to access it correctly.

I’ve attempted adding this configuration to my atlassian-plugin.xml:

<web-resource key="jqueryLib" name="jqueryLibrary">
    <dependency>jira.webresources:jira-global</dependency>
    <resource type="download" name="jquery-lib.js" location="/js/jquery-lib.js" />
</web-resource>

I also tested it without including the dependency line. Additionally, I tried adding #requireResource("jira.webresources:jira-global") to my velocity template but that didn’t help either.

Here’s the JavaScript code I’m using in my template file:

<script type="text/javascript">
    jQuery(function($) {
        $('.answers').fadeOut();
    });
</script>

No matter what approach I take, I keep getting the error Uncaught ReferenceError: jQuery is not defined. I’m really stuck and not sure what else to try. Has anyone dealt with this before?

2

Had the same issue building my first JIRA plugin last year. It’s usually a web resource context/timing problem. Don’t use global jQuery - use AJS namespace instead (JIRA’s wrapper). Add <context>atl.general</context> to your web-resource definition in atlassian-plugin.xml. For the JavaScript, use AJS.toInit(function() { AJS.$('.answers').fadeOut(); }); instead of standard jQuery ready. This worked for me across different JIRA versions. JIRA’s resource loading doesn’t play nice with standard jQuery, so you’ve got to work with their system.

3

u can also check the web resource loading, open dev tools to see if jQuery is loaded. wrapping ur code like AJS.$(function() { AJS.$(‘.answers’).fadeOut(); }); might help too. just my 2 cents.

4

This is a super common issue with JIRA plugins. Don’t try loading jQuery separately - just use JIRA’s built-in resources instead. Drop your custom jQuery resource definition from atlassian-plugin.xml completely and update your web-resource like this:

<web-resource key="my-plugin-resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <context>jira.view.issue</context>
</web-resource>

In your velocity template, include the web resource with $webResourceManager.requireResource("your.plugin.key:my-plugin-resources"). Stick to JIRA’s namespace only in your JavaScript - don’t mix jQuery and AJS calls. I’ve seen timing issues when the DOM isn’t ready yet, so wrap everything in AJS.toInit to get the right initialization order.