Trouble integrating jQuery in Jira plugin development

Other Questions Jira
1

I’m stuck trying to use jQuery in my Jira plugin. I thought it was part of the framework and I just needed to include it. But nothing’s working.

I tried adding this to my atlassian-plugin.xml:

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

I also tried without the dependency. In my Velocity template, I added #requireResource(\"jira.webresources:jira-global\"). Still no luck.

Here’s the JS in my template file:

<script>
  customJQ(function($) {
    $('.hidden-elements').fadeOut();
  });
</script>

But I keep getting Uncaught ReferenceError: customJQ is not defined.

I’m out of ideas. Any help would be great!

2

hey sophialee92, i’ve had that issue before! try using AJS.$ instead of customJQ. jira uses the atlassian javascript library (AJS) which includes jquery. so ur code should look like:

AJS.$(function($) {
$(‘.hidden-elements’).fadeOut();
});

hope that helps!

3

I’ve encountered similar issues when developing Jira plugins. Here’s a solution that worked for me:

First, ensure you’re using the correct resource in your Velocity template:

#requireResource(“com.atlassian.auiplugin:ajs”)

Then, modify your JavaScript to use AJS.$ instead of customJQ:

AJS.$(function($) {
$(‘.hidden-elements’).fadeOut();
});

This approach leverages Jira’s built-in Atlassian JavaScript library (AJS), which includes jQuery functionality. You don’t need to include jQuery separately.

If you’re still facing issues, check your atlassian-plugin.xml for any conflicts or incorrect configurations. Also, make sure your web-resource key is properly referenced in your plugin modules.

4

I’ve been through this rodeo before with Jira plugin development. Here’s what worked for me:

Instead of trying to include jQuery separately, leverage the built-in AJS library. It’s already loaded and provides jQuery functionality.

In your Velocity template, ensure you’re requiring the correct resource:

#requireResource(“com.atlassian.auiplugin:ajs”)

Then in your JavaScript, use AJS.$ as your jQuery wrapper:

AJS.$(function($) {
$(‘.hidden-elements’).fadeOut();
});

This approach should resolve your ‘customJQ is not defined’ error and get your plugin working as expected. If you’re still having issues, double-check your atlassian-plugin.xml for any conflicts or misconfigurations.