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

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

You have to post your code, otherwise we cannot understand you — Jaiwo99, Feb 05 '13 at 13:12
what you mean css not loaded proper? please try to upload a screenshot! ps: there is `no attr called 'theme' for sjt, there is only the attr 'jstreetheme'` — Jaiwo99, Feb 05 '13 at 13:39
Thank you . That was the real problem indeed . The css of the tree did not load properly because it could not find the jstreetheme attribute. Fixed it .! Thanks a lot :) — phani, Feb 05 '13 at 13:54
@Jaiwo99 -- please help me in one more thing . onClickTopics="treeClicked" doesnt work even when i implemented the method. Any suggestions? ive updated the code . This is the code given in the showcase [link](http://struts.jgeppert.com/struts2-jquery-showcase/index.action#jsp) — phani, Feb 06 '13 at 11:01

Jaiwo99 · Accepted Answer · 2013-02-07T09:31:04.973

0

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

edited Feb 07 '13 at 09:31

answered Feb 06 '13 at 11:24

Jaiwo99

9,687
3
36
53

There is no change even if i put code on load as you suggested. and ive changed the theme attribute .There is no problem with that – phani Feb 06 '13 at 12:08
@phani try add `alert()` to your script, check your script executed or not. – Jaiwo99 Feb 06 '13 at 15:28
i tried to put alerts , but no luck . The work around for that was to implement the listeners in the classic jquery style , but i could not use the onClickTopics attribute . The code i tried was ``$(".jstree ul li").live('click',function(){
alert("click on tree node"); ``});`` – phani Feb 07 '13 at 09:21
@phani no, i mean try to check if `$.subscribe();` called on your page, check my change – Jaiwo99 Feb 07 '13 at 09:31
i can see the alert , but the subscribe doesnt work . I checked the source and i can see that the subscribe script file is loaded . – phani Feb 07 '13 at 09:51
@phani errrrrrrrrr.. which version of struts2 are you using, which version of struts2-jquery-tree-plugin are you using – Jaiwo99 Feb 07 '13 at 09:57
struts2 - 2.3.1 struts2-jquery plugin - 3.4.0 – phani Feb 07 '13 at 10:00
im sorry i didnot include the tree plugin version , it is 3.5.1 – phani Feb 07 '13 at 10:23
@phani I'd like to suggest you to use the same version of this plug, change your version of plugins to `3.5.1` could avoid more problems – Jaiwo99 Feb 07 '13 at 10:29
even that didnt work out . I updated the jar versions to 3.5.1 , both struts2-jquery and also the tree plugin – phani Feb 07 '13 at 10:55

score 0 · Answer 2 · answered Aug 08 '13 at 08:59

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.

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

2 Answers2