Ajax loading

[pmelandeMember]

Here’s the jsFiddle: http://jsfiddle.net/wBCwm/

[Peter StoevKeymaster]

Hi pmelande,

Thanks for the code and for the update.

In order to format code in the forum, you can select the code snippet and click the “Format HTML Code” button – .

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

It is also possible to add the new items with one call of the ‘addTo’ method.

JavaScript:

$(function () {
    var _el = $("#jqxTree");
    _el.jqxTree({ width: '250px' });
    _el.bind('expand', function (event) {
        var _itemLoader = $(event.args.element).find("li:[id^=itemLoader]");
        if (_itemLoader.length < 1) return false;
        // This is where the ajax call would be, in the ajax callback
        // call jqxTree('removeItem', _itemLoader[0]) to remove the node
        var _loopCount = 1;
        var _handle = setInterval(function () {
            if (_loopCount > 0) {
                var items = [{label: 'Item 1'},{label: 'Item 2'},{label: 'Item 3'}];
                _el.jqxTree('addTo', items, event.args.element);
                _loopCount -= 1;
            } else {
                clearInterval(_handle);
                _el.jqxTree('removeItem', _itemLoader[0]);
            }
        }, 100);
    });
});​

HTML:

<div id="jqxTree">
    <ul>
        <li item-expanded="true">
            JqxTree
            <ul>
                <li>
                    Foo
                    <ul>
                        <li id="itemLoader0001">Loading...</li>
                    </ul>
                </li>
                <li>
                    Bar
                    <ul>
                        <li id="itemLoader0002">Loading...</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>​

Thanks again, pmelande!

[pmelandeMember]

Yeah, that would be more like the behavior you would see when using ajax to fetch the records.

http://jsfiddle.net/QLaxB/10/

Nice! Guess you could replace the “Loading…” with a nice animated GIF to get a more lively experience.

[KynaoParticipant]

Thanks you pmelande, that will help all of us to progress on the subject.

[Author]

Posts