CSS, jquery into velocity template.

[dhaval soni]

I want to add jquery in css into velcoity templates and i follow below syntax:

<link href='../cal/printer.css' rel='stylesheet' media='print' />

<script src='../jquery/jquery-1.9.1.min.js'></script>

<script>

..

</script"

Does it work correct in velocity template..

[moxin · Accepted solution]

try putting both css and js in templates folder.

about the second one no it would not impact as same syntax

[dhaval soni]

i have directly put all files under templates folder.

and again executed atlas-run command. still no effect.

i have just kept alert('msg'), prompt('msg') under "$(document).ready(function() { alert ..}

to test but not work..

[moxin]

how are you calling VM file? the script you are trying to run will not be called directly unless the VM file is called.

[dhaval soni]

my file is reside in project directory then,

what to keep "type="download"

how it refers, resource/templates/file.vm ?

will it be applicable to all templates in in project.

[dhaval soni]

Ya, i have added webwork and linked to that template .

i able to see my alert message just above "$(document).ready(function() { alert ..} inside <script> tag.

but not work under $(document)..

kept all files at same place where VM template file is resides.

[moxin]

if you want to directly run a JS file or insert CSS you can do it like this

<web-resource key="1-resource" name="1 Web Resource">
		<dependency>jira.webresources:global-static</dependency>
		<dependency>com.atlassian.auiplugin:ajs</dependency>
		<dependency>jira.webresources:jira-global</dependency>
		<dependency>jira.web.resources:ajs</dependency>
		<dependency>jira.web.resources:jquery</dependency>
		<dependency>confluence.web.resources:ajs</dependency>
		<dependency>confluence.web.resources:jquery</dependency>
        
        <description>JavaScript</description>
        
        <resource type="download" name="1.css" location="/css/1.css"/>
        <resource type="download" name="1.js" location="/js/1.js"/>
        <resource type="download" name="images/" location="/images"/>

        <context>dashboard</context>
        <context>jira.dashboard</context>
		<context>atl.dashboard</context>
		<context>atl.general</context>
        <context>atl.admin</context>
        <context>atl.userprofile</context>
        <context>atl.popup</context>
    </web-resource>

[moxin]

try this:
AJS.$(document).ready(function() { alert('hello World!'); });

[dhaval soni]

Thanks Moxin.

it's work. so, instead of $ have to use AJS.$.

i have removed including script file then also it works. so, looks like JQUERY is already included by JIRA.

but, CSS, not work.. looking there.

Thanks.

[dhaval soni]

we can also use - "jQuery" instead of AJS.$.

example: jQuery(document).ready(function() { jQuery('#dv').html() });

[moxin]

yes it would work just fine.

http://click.apache.org/docs/click-api/org/apache/click/util/PageImports.html

[dhaval soni]

It's not working. looks like, refer wrong location.

File locations is as follow:

Resource/Templates/ tplfile.vm

Resource/cal/printer.css

Resource/jquery/file.js

please suggest me , what should be the location while include the file in .vm.

../cal/printer.css , not working.

cal/printer.css , not working.

[dhaval soni]

jquery object "$(document)" and also velocity variables access with $

it could impact as same syntax ...?

[dhaval soni]

Hi Moxin,

I have added my js files and css files as below but it did not work.

Can you correct me , what is wrong here..

my files are locat at below location:

src/main/Resource/templates/js files

src/main/Resource/templates/cs files

code:

<web-resource name="Admin Web Resources" key="resources">

<dependency>com.atlassian.auiplugin:ajs</dependency>

<resource type="download" name="admin.js" location="admin.js"/>

<!-- added below js files -->

<resource type="download" name="jquery-1.9.1.min.js" location="templates/jquery-1.9.1.min.js" />

<resource type="download" name="jquery-ui-1.10.2.custom.min.js" location="templates/jquery-ui-1.10.2.custom.min.js" />

<!-- end js files -->

</web-resource>

<!-- css files -->

<web-resource key="example-resources" name="Web Resources for Content in Editor">

<resource name="fullcalendar.css" type="download" location="templates/fullcalendar.css"/>

<resource name="fullcalendar.print.css" type="download" location="templates/fullcalendar.print.css"/>

<context>editor-content</context>

</web-resource>

[moxin]

Where do you want to use VM cause there are context on which JS is going to work.
https://developer.atlassian.com/display/JIRADEV/Web+Resource+Plugin+Module#WebResourcePluginModule-WebResourceContextsinJIRA

[moxin]

you don't have to add jQuery use the builtin jQuery Atlassian provide.
all you have to do is use AJS.$........
Google AJS and AUI

http://www.j-tricks.com/1/post/2012/02/some-ajs-tricks.html

[dhaval soni]

I am not adding JQUERY. it is done.

I have some other JS files and CSS files which needs to include to achieve some feature.

for that , i need to include those files into velcoity template.

so, i follow the syntax as last comment.. so, please share me, how it could be included.

[dhaval soni]

Actually,

i have added one webwork page at this location "system.top.navigation.bar"

on that particular link's screen, i need to use those script.

[moxin]

try adding these:

<context>atl.general</context>
<context>atl.popup</context>

Use alert() to check if JS is working.

[dhaval soni]

Excellent Moxin. Thanks for your help. it works for me.

For location, i need to refer as follow -

"cal/ [JS file]" instead of "Resource/cal/[JS File]"

(my files under "src/main/resource/cal/[JS file]"

<web-resource name="Resources" key="resourcesfullCalendar">

<resource name="cal.min.js" type="download"location="cal/cal.min.js">

</resource>

<resource name="cal.css" type="download" location="cal/cal.css">

</resource>

</web-resource>