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

[Hy Nguyen]

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%20%...

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] · Accepted solution]

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.

[Hy Nguyen]

Thank you your reply. I try the NEW_CONTENT_ADDED event by this code:

AJS.$(function() {
  JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
    var $context = AJS.$(context);
  }
}

 The result is the page stuck in the loading phase:

[Hy Nguyen]

Hi @Jobin, your answer is correct, it works for me. The problem in my last comment was happen becaused of putting the code in document.ready, when it shouldn't be there.