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

StackOverflow https://stackoverflow.com/questions/14707621

  •  06-03-2022
  •  | 
  •  

Question

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

Was it helpful?

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());
    });
});

OTHER TIPS

Now, I'm doing my project with jquery struts2. I can call my javascript method when I click on a tree node, so I would like to share my experience.

Pls, write this in sjt tree tag

onClickTopics="treeClicked"

And then write in script tag

$(function(){
$.subscribe('treeClicked', function (event, data){
        // check if script called on page load
        alert("treeClicked");
        //Get the next item, this is the tree node object is selected, many operations need it
        var item = event.originalEvent.data.rslt.obj;
        //Other code written here
        //For example, we want to select the node id suggest, you can write like this
        alert ('Clicked ID : ' + item.attr ("id"));
});
});

I hope my answer will help you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top