jsTree Library not working within liferay

[fernando tapia, geändert vor 7 Jahren.]

Hi. i'm using jsTree to manage interactive trees in my portlet, but is giving me an error at runtime. The error is as follows:

Uncaught TypeError: $(...).jstree is not a function

According to google Chrome and Mozilla Firefox, the jsTree.js file is loading correctly, but i can't use the functions.

However, i'm able to use this same jsTree plugin in another project the same way i'm trying to do with liferay, and there works fine.

Here is my jsp code:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@ page import="com.liferay.portal.kernel.util.Validator"%>
<%@ page import="javax.portlet.PortletPreferences"%>

<portlet:defineobjects />

<link rel="stylesheet" href="<%=request.getContextPath()%>/dist/themes/default/style.min.css">
<script src="<%=request.getContextPath()%>/js/jquery-3.1.0.js"></script>
<script src="<%=request.getContextPath()%>/dist/jstree.min.js"></script>
&lt;%-- <script src="<%=request.getContextPath()%>/dist/test.js"></script> --%&gt;


<portlet:actionurl name="upload" var="uploadFileURL"></portlet:actionurl>
 
<aui:form action="<%= uploadFileURL %>" enctype="multipart/form-data" method="post">
 
	<aui:input type="file" name="fileupload" />
	
	<aui:button name="Save" value="Save" type="submit" />
 
</aui:form>

<div id="jstree_demo_div">
	
</div>
 
 <script type="text/javascript">
 $(function () { var div = $("#jstree_demo_div"); alert(div.attr('id')); 
 $("#jstree_demo_div").jstree({
	  "core" : {
	    "animation" : 0,
	    "check_callback" : true,
	    "themes" : { "stripes" : true },
	    'data' : {
	      'url' : function (node) {
	        return node.id === '#' ?
	          'ajax_demo_roots.json' : 'ajax_demo_children.json';
	      },
	      'data' : function (node) {
	        return { 'id' : node.id };
	      }
	    }
	  },
	  "types" : {
	    "#" : {
	      "max_children" : 1,
	      "max_depth" : 4,
	      "valid_children" : ["root"]
	    },
	    "root" : {
	      "icon" : "/static/3.3.2/assets/images/tree_icon.png",
	      "valid_children" : ["default"]
	    },
	    "default" : {
	      "valid_children" : ["default","file"]
	    },
	    "file" : {
	      "icon" : "glyphicon glyphicon-file",
	      "valid_children" : []
	    }
	  },
	  "plugins" : [
	    "contextmenu", "dnd", "search",
	    "state", "types", "wholerow"
	  ]
	});
 });

 </script>

[David H Nebinger, geändert vor 7 Jahren.]

You should never pull in JS or CSS resources this way. This is not a web page environment.

Declare your JS and CSS resources in the liferay-portlet.xml file or the properties annotation for the portlet (if using LR7).

Also the $() syntax should be avoided as it may conflict with other JS libraries. Instead use the jQuery() syntax to ensure there is no conflict.






Come meet me at the LSNA!

[fernando tapia, geändert vor 7 Jahren.]

Hi David, thanks for your reply.

I did the changes you suggested and still not working, is showing the same error.

[David H Nebinger, geändert vor 7 Jahren.]

What version of Liferay are you using?

If you've changed from the $() syntax to the jQuery() syntax, then the issue could lie within the jsTree implementation. When you pull in modules like this it's important that they, too, are built using the jQuery() syntax. I haven't used jsTree so I don't know which way it goes, so I can't say whether it uses one or the other.

Personally I've always tried to keep frameworks at the theme level, loads them at page render level rather than during portlet html fragment aggregation.

When you see the error, I'm guessing it's in the javascript console, can you tell where the error is originating? In the jsTree source, your js or in the JSP script?





Come meet me at the LSNA!