CODEWITHSUNDEEP
javaincludeliferayportletjstree
Dropout
Dropout

Reputation: 13866

Inserting a JavaScript resource into a Liferay Portlet

I would like to use jsTree inside of my Liferay portlet, but everytime the script gets executed I get an error:

TypeError: treeContainer.jstree is not a function @ localhost:8080/web/guest/home:14

I understand that it doesn't have the JS file available for use, so I've tried these two approaches, but niether of them works.

First: Include it directly by adding

<script type="text/javascript" src="jquery.jstree.js"></script>

into the JSP. Although I can see it being "linked" in my IDE, after building and deploying it's unavailable (duh).

Second: Editing it in the liferay-portlet.xml like this:

<portlet>
    <portlet-name>myPortlet</portlet-name>
    <instanceable>false</instanceable>
    <!-- other mappings here -->
    <header-portlet-javascript>my/resource/folder/myPortlet/jquery.jstree.js
    </header-portlet-javascript>
</portlet>

But even if I edit it in like this I get an 404 in the browser console.

Function used in the JSP:

<script type="text/javascript">
$(".tree-search").click(function(){

    treeContainer = $(this).siblings('.tree-container');

    // correct data is taken from ${jsonFake}
    treeContainer.jstree({
        "plugins":["themes","html_data","ui"], "json_data": { data: ${jsonFake}}
    });

    treeContainer.show();
    treeContainer.animate({
        opacity: "1"
    }, 750);

});
</script>

What am I doing wrong, please?

Upvotes: 1

Views: 2393

Answers (2)

Parkash Kumar
Parkash Kumar

Reputation: 4730

This seems like path issue:

Create a folder named js inside docroot and put this file there. Add script src like:

<script type='text/javascript' src='/js/jquery.jstree.js'></script>

Upvotes: 1

Biswajit
Biswajit

Reputation: 2496

add the js file in portal_normal.vm file in your current theme .like

<script type="text/javascript" src="jquery.jstree.js"></script>

Upvotes: 1

Related Questions