Javascript code for rendering soy template does not work

[Qing LIANG]

Hello,

I am developing a plugin in Confluence which involves creating several modules like Blueprint, web-item, web-resource, dialog-wizard etc. I intend to create a wizard using dialog-wizard element within the blueprint element. In one page of the wizard, I want to display a list of projects in JIRA as option items in a selectbox and also do some UI customization using AUI API. I started from UI part but found that the code I copied from AUI document didn't work. 

The soy template for that page : 

{namespace Conflence.Blueprints.Delivery.Dialog}
/**
 * delivery blueprint wizard page1
 */
{template .deliverypage1Form}
 	<form action="#" method="post" class="aui">
 	  <fieldset>
 	    <div class="field-group">
 	        <label for="vdeliverydate">{getText('delivery.blueprint.form.label.title.vDeliveryDate')}<span class="aui-icon icon-required"> required</span></label>
 	        <input id="vdeliverydate" class="aui-date-picker" type="date" name="vDeliveryDate">
 	    </div>
 	  </fieldset>
 	</form>
{/template}

part of the atlassian-plugin.xml concerning the issue:

<!-- add our web resources -->
    <web-resource key="confluence-delivery-wiki-resources" name="confluence-delivery-wiki Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.confluence.plugins.confluence-create-content-plugin:resources</dependency>
        <dependency>com.atlassian.auiplugin:aui-date-picker</dependency>
        
        <transformation extension="soy">
					<transformer key="soyTransformer">
						<functions>com.atlassian.confluence.plugins.soy:soy-core-functions
            </functions>
					</transformer>
				</transformation>
				
        <resource type="download" name="confluence-delivery-wiki.css" location="/css/confluence-delivery-wiki.css"/>
        <resource type="download" name="confluence-delivery-wiki.js" location="/js/confluence-delivery-wiki.js"/>
        <resource type="download" name="images/" location="/images"/>
				<resource type="download" name="dialogs.soy.js" location="/soy/dialogs.soy"/>
				<resource type="download" name="dialogs.js" location="/js/dialogs.js"/>
				
				<context>confluence-delivery-wiki</context>
				<context>atl.general</context>
    		<context>atl.admin</context>
    </web-resource>
 
<blueprint key="new-delivery-blueprint" index-key="new-delivery-index">
        <content-template ref="new-delivery"/>
        
        <dialog-wizard key="new-delivery-blueprint-dialog">
            <dialog-page 
                id="deliverypage1Form"
                template-key="Conflence.Blueprints.Delivery.Dialog.deliverypage1Form"
                title-key="delivery.blueprint.selectdeliverydate.title"
                description-header-link-key="delivery.blueprint.selectdeliverydate.wizard.about.heading.link"
                description-header-key="delivery.blueprint.selectdeliverydate.wizard.about.heanding"
                description-content-key="delivery.blueprint.selectdeliverydate.wizard.about.description"
                last="true"/>
        </dialog-wizard>
    </blueprint>
    
    <web-item key="new-delivery-blueprint-item" 
        			section="system.create.dialog/content"
        			i18n-name-key="delivery.blueprint.create.link.title">
		    <resource name="icon" type="download" location="images/pluginIcon.png"/>
		    <param name="blueprintKey" value="new-delivery-blueprint"/>
		</web-item>

Here is the dialogs.js file : 

Confluence.Blueprint.setWizard(
		'com.amundi.atlassian.plugins.confluence-delivery-wiki:new-delivery-blueprint-item', 
		function(wizard) {
			console.log("delivery blueprint wizard callback invoked.");
			}
		);

AJS.$(document).ready(function() {
	AJS.$('#vdeliverydate').datePicker({'overrideBrowserDefault': true});
});

The blueprint 'New delivery' is well presented when I clicked the 'Create ...' button on top of Confluence, and the date picker presented. But it seems that the code '

AJS.$('#vdeliverydate').datePicker({'overrideBrowserDefault': true});

' was not executed as the date picker is rendered in browser default manner. And when I executed that piece of code in the console of the browser, the date picker's look changed as expected. I have tried to take it out of the ready function that that didn't work neither. 

What is the correct way to put the javascript code that controls the render of soy template?

[Robert Krause · Accepted solution]

Hi Quing,

I have never worked with Blueprint wizards, so this is just a guess. First of all you should pick a better namespace, that is easily recognizable as your own. This makes code maintenance and debugging a lot easier in the future. The second thing I notice is, that 

AJS.$('#vdeliverydate').datePicker({'overrideBrowserDefault': true});

is likely executed before the Element #vdeliverydate is present in the DOM. After looking at the documentation, you probably should execute it in a post-render hook. I guess it needs to look something like this.

Confluence.Blueprint.setWizard(
   'com.amundi.atlassian.plugins.confluence-delivery-wiki:new-delivery-blueprint-item',
   function (wizard) {
      console.log("delivery blueprint wizard callback invoked.");
      wizard.on('post-render.deliverypage1Form', function () {
         AJS.$('#vdeliverydate').datePicker({'overrideBrowserDefault': true});
      });
   }
);

Best regards,
Robert 

[Qing LIANG]

Thanks for your reply, you pointed out the right direction. I then read the article https://developer.atlassian.com/confdev/confluence-plugin-guide/confluence-blueprints/javascript-api-for-blueprint-wizards , as you said. Post render is fine, but also need to point out the pageId, like this : 

wizard.on('post-render.deliverypage1Form', function (e, state) {
         AJS.$('#vdeliverydate').datePicker({'overrideBrowserDefault': true});
      });

[Robert Krause]

As I said it was just a guess. Glad I could help, I add the missing piece to my answer.