Search code examples
struts2struts2-jquery-plugin

CSS doesnt load properly when struts 2 jquery tree plugin is used


I'm using struts2 jquery tree plugin to show a tree in a div . The problem is that either the CSS of the tree or the CSS of my JSP page doesn't load properly.

I tried to change the order in which the scripts load and now I can see that all my CSS on the JSP is as required but the tree is not loaded with proper CSS .

As of now I've set the jqueryui="true" in the<sj:head>.

<sj:head jqueryui="true"  />    
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>       
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/myscript.js" ></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="themes/Test.css" />
<link rel="stylesheet" href="themes/Custom.css" />
<link rel="stylesheet" href="css/styles.css" />
<script>

$.subscribe('treeClicked', function(event, data) {
      var item = event.originalEvent.data.rslt.obj;
      alert('Clicked ID : ' + item.attr("id") + ' - Text ' + item.text());
});
</script>
<body>
     <s:url var="treeDataUrl" action="GetData"/>
                            <sjt:tree 
                                    id="jsonTree" 
                                    href="%{treeDataUrl}"
                                    onClickTopics="treeClicked" 
                                    jstreetheme="default"
                            />
</body>

Note: I need to include all the CSS files ive mentioned in the code. They are necessary for my UI


Solution

  • I collect your problems:
    1. The attribute of jquery-ui-theme should be jstreetheme, NOT theme
    2. your script would not be called on page load! change it to:

    $(function(){
        alert("ECHO..."); // check if script called on page load
        $.subscribe('treeClicked', function(event, data) {
            var item = event.originalEvent.data.rslt.obj;
            alert('Clicked ID : ' + item.attr("id") + ' - Text ' + item.text());
        });
    });