How to implement jQuery within JIRA plugin development

I’m working on creating a JIRA plugin and running into problems with jQuery integration. From what I understand, jQuery should already be available in the JIRA framework, but I can’t get it to work properly.

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

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

I also tested it without including the dependency section.

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.vm file:

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

No matter what approach I take, I keep getting the error Uncaught ReferenceError: jQuery is not defined. I’m running out of ideas and would appreciate any guidance on the correct way to include jQuery in a JIRA plugin.

This is a resource loading order problem. Don’t create your own jQuery web-resource - just reference JIRA’s existing jQuery resources.

Update your atlassian-plugin.xml like this:

<web-resource key="my-plugin-resources">
    <dependency>com.atlassian.jira.jira-tzdetect-plugin:tzdetect-banner-component</dependency>
    <dependency>jira.webresources:autocomplete</dependency>
    <resource type="download" name="my-script.js" location="/js/my-script.js"/>
</web-resource>

Make sure you’re loading this web-resource in your velocity template with $webResourceManager.requireResource("your.plugin.key:my-plugin-resources") at the top.

Put your jQuery code in a separate JS file instead of inline in the template. That fixes most timing issues. Your inline script is probably running before jQuery loads, which is why you’re getting the undefined error.

This happens all the time with JIRA plugins. Don’t create a separate web-resource for jQuery - just use JIRA’s built-in version by adding the right dependency in your web-resource config. Update your atlassian-plugin.xml to reference JIRA’s core jQuery: jira.webresources:jira-global com.atlassian.jira.jira-header-plugin:jira-header-resources . I’ve had better luck wrapping jQuery code in AJS.toInit() instead of jQuery(document).ready(). JIRA’s AJS framework handles resource loading way better: AJS.toInit(function(){ AJS.$(‘.answers’).hide(); });. Don’t forget to call $webResourceManager.requireResource(“your.plugin.key:your-plugin-resources”) before any JavaScript runs in your velocity template. Resource loading timing matters big time in JIRA plugins.

had the same issue last week. try using AJS.$ instead of jQuery or $ in your script - that’s how jira works with it. also, make sure your web-resource is loading on the correct page, not just existing in the xml.