Element is not ready when using AJS.$(document).ready

Hy Nguyen_on7p5j

Hi,
I'm trying to write a Jira addon with velocity.

I have a web-panel named "mother-panel" in atlassian-plugin.xml, it would be rendered as a div with id as "mother-panel".
The template which will display that panel is mother.vm

I use this code to access that div in mother.vm:

AJS.$(document).ready(function () {
var div = $("#mother-panel");
//The div is available from now on
...
};

That code run perfectly when I visit the issue detail page, for example:
http://localhost:2990/jira/browse/GOLA-10
The div is avaiable for the selector to get, then I can manupulate it as my mind.

The problem shows up when I tried to vist the search page, something like:

http://localhost:2990/jira/browse/GOLA-25?jql=project %...

Now the code snipped above doesn't work anymore, on the "document ready" event, I get NullPointerException in the first line that access to "mother-panel".
It means that the div is not there when the document ready event fired, but some how it would be rendered later as I can see it in the UI as well.
I guest that the issue detail component, which contains the "mother-panel" was lazy load later by AJAX.

My question is: Is there some way that I can access to "mother-panel" right after the moment it been rendered? Thank you.

Jobin Kuruvilla [Adaptavist]

Check out the "JIRA.Events.NEW_CONTENT_ADDED" event. Also see https://developer.atlassian.com/server/jira/platform/extending-inline-edit-for-jira-plugins/ more events available on the JIRA page loads.