jQWidgets Forums

Forum Replies Created

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

March 11, 2013 at 6:57 pm in reply to: jqxTree Load on Demand with Ajax: re-open issue jqxTree Load on Demand with Ajax: re-open issue #16724

yehezqiel

Member

Thx for your response Dimitar..
I use code that you provided in documentation with a little modified by me.
But I don’t modified source code in jqxtree.js.
In firebug, there is an error there..

Here is my code. I want to show a tree with 3 level.. Level 2 will be loaded by ajax when I expand or check node in level 1. And level 3 will be loaded when I expand or check node in level 2.. But level 3 has already loaded when I expand or check node in level 1.
I’ve try code which is posted by you Dimitar, but doesn’t work for me.

Here is the JSP file.

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="../includes/css/jqxTree/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../includes/js/jqxTree/gettheme.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxcore.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxbuttons.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxpanel.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxtree.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxexpander.js"></script>
        <script type="text/javascript" src="../includes/js/jqxTree/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../js/common.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();                                               
              
                var tree = $('#jqxTree');
                $('#jqxTree').jqxTree({ 
                    checkboxes: true                                     
                }); 
                               
                
                var source = [{ 
                        label: "All Category", 
                        expanded: true, 
                        value:"0", 
                        id:"parent",
                        level:"0",
                        checked:true,
                        items: ${level1}                       
                    }];
                
                tree.jqxTree({ source: source, theme: theme, width: 600 });
               
               
                tree.on('expand', function (event) {
                    if (tree.jqxTree('getItem', event.args.element).value == 0)
                        return;
                
                    var $element = $(event.args.element);
                    var loader = false;
                    var loaderItem = null;
                    var children = $element.find('li');
                    $.each(children, function () {
                        var item = tree.jqxTree('getItem', this);
                        
                        if (item.label == 'Loading...') {
                            loaderItem = item;
                            loader = true;
                            return false
                        };
                    });
                    
                    if (loader) {
                        $.ajax({
                            url: loaderItem.value,
                            success: function (data, status, xhr) {
                                var items = jQuery.parseJSON(data);
                                tree.jqxTree('addTo', items, $element[0]);
                                tree.jqxTree('removeItem', loaderItem.element);
                            }
                        });
                    }
                });
                                      
     
                $('#jqxTree').on('checkChange', function (event) 
                {
                    var args = event.args;          
                    var checked = args.checked;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);                   
                 
                    if(checked)
                    {
                        $("#jqxTree").jqxTree('expandItem', $("#"+item.id)[0]);  
                    }
                    else
                    {                                                              
                        if(item.level==0)
                        {
                            $('#jqxTree').jqxTree('collapseAll');
                            $('#jqxTree').jqxTree('uncheckAll');
                        }   
                        else if(item.level==1)
                        {
                            $("#jqxTree").jqxTree('collapseItem', $("#"+item.id)[0]);                               
                            var children = $(args.element).find("li");                            
                            $.each(children, function () {                            
                                $("#jqxTree").jqxTree('uncheckItem', $("#"+this.id)[0]);  
                            });
                        }
                        else
                        {
                            $("#jqxTree").jqxTree('collapseItem', $("#"+item.id)[0]);  
                        }
                    }                                       
                }); 
                  
                  $(window).load()
                  {                                    
                    if(${fromServer})
                    {
                        $("#jqxTree").jqxTree('expandItem', $("#cat1")[0]);                         
                    }
                  }
            
            });
   
            
            function submitForm()
            {
                var F = MM_findObj("form");
                var items = $('#jqxTree').jqxTree('getCheckedItems');
                var checkedItems = new Array();
                $.each(items, function () {                   
                    checkedItems[checkedItems.length] = this.value;
                });
                
                var result="";
                for(var i=0; i<checkedItems.length; i++)
                {
                    result+=checkedItems[i];
                    if(i!=checkedItems.length-1)
                        result+=",";
                }
                F.categorySelected.value=result;
                  
                F.submit();
            }
        </script>
    </head>
    <body class='default'>
        <div id="jqxTree">
        </div>
        
        <br/><br/>
        <form:form  method="post" name="form" id="form">
            <input type="hidden" name="categorySelected" id="categorySelected" />
            <input type="submit" value="submit" onclick="submitForm()" />
            <br/><br/>
        </form:form>
            
            
    </body>
   
</html>

And here is code in sever (I use java)

@RequestMapping(value = "/productCategory", method = RequestMethod.GET)
    public void getTest(Model model, HttpServletRequest request,
            HttpSession session) {
        String level1 = " ["
                + " { label: \"First\", value:\"1\", id:\"cat1\", level:\"1\", items: [{ value: \"getDataCategory?id=1\", label: 'Loading...'}] },"
                + " { label: \"Second\", value:\"2\",level:\"1\", id:\"cat2\", items: [{ value: \"getDataCategory?id=2\", label: 'Loading...'}] }"
                + " ] ";
        model.addAttribute("level1", level1);
        model.addAttribute("fromServer", false);
    }
@RequestMapping(value = "/getDataCategory", method = RequestMethod.GET)
    public void getDataCategory(Model model, HttpServletRequest request,
            HttpSession session) {
        String id = request.getParameter("id");
        String fromServer = request.getParameter("fromServer");
        String result = "";
        if (fromServer == null) {
            fromServer = "";
        }
        if (fromServer.equals("true")) {
            if (id.equals("1")) {
                result = " [{\"label\": \"Women\", \"value\":\"3\", \"level\":\"2\", \"id\":\"cat3\" },"
                        + "{\"label\": \"Men\", \"value\":\"4\", \"level\":\"2\", \"id\":\"cat4\", \"checked\":\"true\"  },"
                        + "{\"label\": \"Girls\", \"value\":\"5\", \"level\":\"2\", \"id\":\"cat5\"  },"
                        + "{\"label\": \"Boys\", \"value\":\"6\", \"level\":\"2\", \"id\":\"cat6\"  }]";
            }
        } else {                       
            if (id.equals("1")) {
                result = " [{\"label\": \"Women\", \"value\":\"3\", \"level\":\"2\", \"id\":\"cat3\" },"
                        + "{\"label\": \"Men\", \"value\":\"4\", \"level\":\"2\", \"id\":\"cat4\", \"items\": [{ \"value\": \"getDataCategory?id=2\", \"label\": \"Loading...\"}] },"
                        + "{\"label\": \"Girls\", \"value\":\"5\", \"level\":\"2\", \"id\":\"cat5\"  },"
                        + "{\"label\": \"Boys\", \"value\":\"6\", \"level\":\"2\", \"id\":\"cat6\"  }]";                
            } else if (id.equals("2")) {
                result = " [{\"label\": \"One\", \"value\":\"7\", \"level\":\"2\", \"id\":\"cat7\"  },"
                        + "{\"label\": \"Two\", \"value\":\"8\", \"level\":\"2\", \"id\":\"cat8\"  },"
                        + "{\"label\": \"Three\", \"value\":\"9\", \"level\":\"2\", \"id\":\"cat9\"  },"
                        + "{\"label\": \"Four\", \"value\":\"10\", \"level\":\"2\", \"id\":\"cat10\"  }]";
            }
        }
        request.setAttribute("data", result);
    }
 @RequestMapping(value = "/productCategory", method = RequestMethod.POST)
    public void postDataCategory(Model model, HttpServletRequest request,
            HttpSession session) {
        String allCategorySelected = request.getParameter("categorySelected");        
        String level1 = " ["
                + " { label: \"Men\", value:\"1\", id:\"cat1\", level:\"1\",checked:true, items: [{ value: \"getDataCategory?id=1&fromServer=true\", label: 'Loading...'}] },"
                + " { label: \"Women\", value:\"2\",level:\"1\", id:\"cat2\", items: [{ value: \"getDataCategory?id=2\", label: 'Loading...'}] }"
                + " ] ";
        model.addAttribute("level1", level1);
        model.addAttribute("fromServer", true);
    }

Thank’s

March 11, 2013 at 4:43 am in reply to: jqxTree Load on Demand with Ajax: re-open issue jqxTree Load on Demand with Ajax: re-open issue #16619

yehezqiel

Member

I got an error in _refreshMapping when calling function _refreshMapping:function(f,q){
TypeError: o is undefined.

in that function, i see var o has been initialized with var o=h[k.id];
but when I show the value of h[k.id], the value has a undefined value..

March 10, 2013 at 4:02 pm in reply to: jqxTree Load on Demand with Ajax: re-open issue jqxTree Load on Demand with Ajax: re-open issue #16598

yehezqiel

Member

can somebody help me please… i’m so confused…

March 9, 2013 at 2:33 am in reply to: jqxTree Load on Demand with Ajax: re-open issue jqxTree Load on Demand with Ajax: re-open issue #16567

yehezqiel

Member

Hi Peter and Rene.. I also want to load child with ajax for level 2 node.. I’ve try code above but children in level 2 already expanded when I expand level 1 node..

I’ve also got error like this in firebug :

I can not post image here…
The error is like this :
TypeError: o is undefined on jqxtree.js (line 7)

Is jqxtree.js must be modified too ?
thx..

March 9, 2013 at 1:04 am in reply to: How to get all child nodes by it’s parent How to get all child nodes by it’s parent #16566

yehezqiel

Member

Solved… I’m using $(window).load() to expand choosen node after tree has been created

March 8, 2013 at 10:26 am in reply to: How to get all child nodes by it’s parent How to get all child nodes by it’s parent #16534

yehezqiel

Member

I have a questions again.. could you help me again, please :D. Should I create a new topic or post in here ?

I have a checkboxtree. When I check some item, or expand some node and then I submit the form into server. I want to display the same tree as before I submit the form.

I’m using JSP+Java, so in server i create a string with checked:true, expanded: true.. The tree was successfully checked, but not with expanded.. it was expand, but there is no ajax load.. just show “Loading”..

Could you show me to expand some node after the jqxTree is created and initialized.

thx…

March 8, 2013 at 9:18 am in reply to: How to get all child nodes by it’s parent How to get all child nodes by it’s parent #16533

yehezqiel

Member

Thank you so much Dimitar… GBU

March 8, 2013 at 8:31 am in reply to: How to get all child nodes by it’s parent How to get all child nodes by it’s parent #16530

yehezqiel

Member

Thank’s Dimitar.. it works..

Can I ask again ?

In Api Reference, Initialize events was : “The initialized event is triggered when the jqxTree is created and initialized.”

I put an alert method in initalized code, but when the tree was appear in browser, there is no alert appear.. Is initialize is an event that was first run ?

thx before..

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)