Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Use JavaScript in SoyTemplateRender

Tobias Hellmann
Tobias Hellmann August 29, 2013

Hello,

i want to integrate a javascript-file (via the <script scr="...."> </script> tag)

into a soy-template but i have no clue how to do this.

{namespace plugin.profile}

/**
 * @param user StashUser object which is in the context provided by ProfileServlet
 */
{template .profileTab}
<html>
<head>
    <meta name="decorator" content="stash.users.profile">
    <meta name="userSlug" content="{$user.slug}">
    <meta name="activeTab" content="profile-plugin-tab">
    <title>{$user.displayName} / Profile Tab</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script scr=" the path to the javascript-file "></script>
</head>
<body>
	Hello World
        <button type="button" id="clickme">Click Me!</button>
</html>
{/template}
  • My js-file in (scr/main/resources)/js/jscode.js
$(function() {	
        alert('test');
	$("#clickme").click(function() {
	      alert('helloworld');
	});
});
  • My Java-Servlet de/neosit/stash/servlet/HtmlServlet.java :
private SoyTemplateRenderer soyTemplateRenderer;
	
	@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		.
		.
		.
	
    	resp.setContentType("text/html;charset=UTF-8");
    	
    	        .
		.
		.
        
        try {
        	
        	render(resp, "plugin.profile.profileTab", map);
        } catch (Exception e) {
        	
        	log.error("An error occurred in HtmlServlet.render(...) ", e);
        }
    }
    
    private void render(HttpServletResponse resp, String templateName, Map&lt;String, Object&gt; data) throws Exception{

    	String arg1 = "de.neosit.stash.stash-all-commits:profile-soy";
    	
        soyTemplateRenderer.render(resp.getWriter(), arg1,templateName, data);
    }
  • My atlassian-plugin.xml :
&lt;servlet name="Html Servlet" i18n-name-key="html-servlet.name" key="html-servlet" class="de.neosit.stash.servlet.HtmlServlet"&gt;
    	&lt;description key="html-servlet.description"&gt;The Html Servlet Plugin&lt;/description&gt;
    	&lt;url-pattern&gt;/all-commits/*&lt;/url-pattern&gt;
  	&lt;/servlet&gt;
  
  	&lt;web-item key="profile-plugin-tab" name="Profile navigation tab" section="stash.user.profile.secondary.tabs" weight="20"&gt;
  		&lt;label key="profile.plugin.tab"&gt;My Plugin -1&lt;/label&gt;
    	&lt;link&gt;/plugins/servlet/all-commits/index&lt;/link&gt;
    	&lt;tooltip key="profile.plugin.tab.description"&gt;Hooray, we have a tab!&lt;/tooltip&gt;
	&lt;/web-item&gt;
	
	&lt;stash-resource key="profile-soy" name="Profile Tab Soy Templates"&gt;
    	&lt;directory location="/templates/" /&gt;
	&lt;/stash-resource
  • ====================================

Thank you in advance,

Tobias

Watch
Like Be the first to like this
1944 views

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
cofarrell
cofarrell
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
August 30, 2013

Hi Tobias,

You don't need to manually link to your <script> tag via the Soy. When you use the Atlassian decorators, we automagically insert all the required javascript files based on a number of 'contexts'.

In the case above, if you're using the 'stash.users.profile' decorator, that will be using the 'stash.layout.user.profile' context. If you add <context>stash.layout.user.profile</context> to your <stash-resource> in the atlassian-plugin.xml you _should_ find that your scripts are included.

Alternatively you can make your own context by injecting com.atlassian.plugin.webresource.WebResourceManager into your Servlet and then calling this before the soyTemplateRenderer.render() method.

webResourceManager.requireResourcesForContext("plugin.my.context");

Does that help?

Charles

View More Comments
Tobias Hellmann
Tobias Hellmann September 1, 2013

Thank you for your fast answer and it helps a lot :)

I decided to put my javascript-code into the default /js/stash-all-commits.js file and use the '<context>stash.layout.user.profile</context>' tag in my atlassian-plugin.xml :

<stash-resource key="javascript-code" name="JavaScript-Code">
<directory location="/js/" />
<context>stash.layout.user.profile</context>

</stash-resource>

... but an error occurred :(

My JavaScript-file has been loaded but it cant use jQuery-commands because jQuery has been loaded after my stash-all-commits.js file.

the sourcecode of my "plugin-page" localhost:7990/stash/plugins/servlet/all-commits/index


....
<link type="text/css" rel="stylesheet" href="/stash/s/d41d8cd98f00b204e9800998ecf8427e/de_DE-1988229788/be1a6cd/416/3.5.7/_/download/resources/com.atlassian.support.stp:stp-license-status-resources/stp-licenseStatus.css" media="all">
<script type="text/javascript" src="/stash/s/d41d8cd98f00b204e9800998ecf8427e/de_DE-1988229788/be1a6cd/416/1.0-SNAPSHOT/_/download/resources/de.neosit.stash.stash-all-commits:javascript/stash-all-commits.js" ></script>
<script type="text/javascript" src="/stash/s/d41d8cd98f00b204e9800998ecf8427e/de_DE-1988229788/be1a6cd/416/5.2-m5/_/download/resources/com.atlassian.auiplugin:jquery-lib/jquery.js" ></script>
<script type="text/javascript" src="/stash/s/d41d8cd98f00b204e9800998ecf8427e/de_DE-1988229788/be1a6cd/416/5.2-m5/_/download/resources/com.atlassian.auiplugin:jquery-compatibility/jquery-compatibility.js" ></script>
....

How can i fix it?

Thank you in advance,

Tobias

Like
cofarrell
cofarrell
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
September 1, 2013

Hi Tobias,

You need to add a dependency so that our web manager can order the resources correctly. The follow global module contains most of the usual goodies like jQuery and Underscore:

<stash-resource key="..." >

....

<dependency>com.atlassian.stash.stash-web-plugin:global</dependency>

</stash-resource>

Cheers,

Charles

Like
Reply
0 votes
Tobias Hellmann
Tobias Hellmann September 1, 2013

my plugins works now...

thanks charles :D

Reply
Atlassian logo
Answers Developer Questions
TAGS
AUG Leaders

Atlassian Community Events

    See all events