on-demand AJAX loading of json_data not working, please help

1,498 views
Skip to first unread message

Moishe

unread,
Oct 1, 2010, 6:59:57 PM10/1/10
to jsTree
Hi Folks,

I am struggling to get on demand loading of JSON nodes working. The
first call works, but there are two issues:

1) The HTML generated results in leaf icons, even though I have the
state="closed" attribute on all LI tags
2) The call to my service fires only once, on load of the tree, and
never fires again on any clicks

Here is the code:

Property value:

json_data =
{
ajax:
{
type: "GET",
url: AJAXURL,
async: true,
data: function(n) {
// the result is fed to the AJAX request `data` option
var idVal = n.attr ? n.attr("id").replace("node_", "") : -1;
alert("data function called: " + n); // this is only called one
time
return { "operation": "get_children", "id": idVal };
}
},
progressive_render: true,
correct_state: true,
cache: false,
dataType: "json",
error: this.onError,
success: this.onSuccess,
}

Rendered HTML:
<ul>
<li id="1" class="jstree-leaf" rel="root" state="closed">
<ins class="jstree-icon"> </ins>
<a class="" href="#">
</a>
</li>

Types:

"types" : {
"root":
{
valid_children: ["mid", "leaf"]
},
"mid":
{
valid_children: ["mid", "leaf"]
},
"leaf":
{
valid_children: "none"
}
}



JSON content (returned from initial call to web service):

[{ "data": "Accessories", "attr": { "id": "1", "rel": "root", "state":
"closed"} }, { "data": "Inventory", "attr": { "id": "1", "rel":
"root", "state": "closed"} }]


I am using the latest version of jstree.

Thanks for any help!
-Moishe

vakata

unread,
Oct 2, 2010, 5:32:50 PM10/2/10
to jsTree
Hi,

State should be outside attr (on the same level as "data" and "attr")

Cheers,
Ivan

Moishe Mo

unread,
Oct 2, 2010, 10:41:00 PM10/2/10
to jst...@googlegroups.com
Thanks Ivan. I'll test it out Monday and respond with the results. I appreciate your quick response!

--
You received this message because you are subscribed to the Google Groups "jsTree" group.
To post to this group, send email to jst...@googlegroups.com.
To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jstree?hl=en.


Moishe Mo

unread,
Oct 3, 2010, 4:40:14 PM10/3/10
to jst...@googlegroups.com
Hi Ivan,

I changed the JSON as you suggested and it's now working great! What a great plug-in this is.

One more question, how do I get the progress gif to show up during the AJAX call?


On Sat, Oct 2, 2010 at 5:32 PM, vakata <ivan.b...@gmail.com> wrote:

vakata

unread,
Oct 4, 2010, 3:14:23 AM10/4/10
to jsTree
jstree automatically shows a spinner when a node is loading.
As for a global page gif - just use the jquery global ajax events, to
bind to ajax start and ajax stop, and toggle a progressbar if needed.

Kindest regards,
Ivan

On 3 Окт, 23:40, Moishe Mo <moish...@gmail.com> wrote:
> Hi Ivan,
>
> I changed the JSON as you suggested and it's now working great! What a great
> plug-in this is.
>
> One more question, how do I get the progress gif to show up during the AJAX
> call?
>
> > jstree+un...@googlegroups.com<jstree%2Bunsu...@googlegroups.com>
> > .

Moishe

unread,
Oct 8, 2010, 10:54:15 AM10/8/10
to jsTree
Thanks Ivan. All is well, the tree is working great, and the customer
is happy :)

On Oct 4, 3:14 am, vakata <ivan.bozha...@gmail.com> wrote:
> jstree automatically shows a spinner when a node is loading.
> As for a global page gif - just use the jquery global ajax events, to
> bind to ajax start and ajax stop, and toggle a progressbar if needed.
>
> Kindest regards,
> Ivan
>

> On 3 ïËÔ, 23:40,MoisheMo <moish...@gmail.com> wrote:
>
>
>
> > Hi Ivan,
>
> > I changed the JSON as you suggested and it's now working great! What a great
> > plug-in this is.
>
> > One more question, how do I get the progress gif to show up during the AJAX
> > call?
>
> > On Sat, Oct 2, 2010 at 5:32 PM, vakata <ivan.bozha...@gmail.com> wrote:
> > > Hi,
>
> > > State should be outside attr (on the same level as "data" and "attr")
>
> > > Cheers,
> > > Ivan
>

> > > On 2 ïËÔ, 01:59,Moishe<moish...@gmail.com> wrote:
> > > > Hi Folks,
>
> > > > I am struggling to get on demand loading of JSON nodes working. The
> > > > first call works, but there are two issues:
>
> > > > 1) The HTML generated results in leaf icons, even though I have the
> > > > state="closed" attribute on all LI tags
> > > > 2) The call to my service fires only once, on load of the tree, and
> > > > never fires again on any clicks
>
> > > > Here is the code:
>
> > > > Property value:
>
> > > > json_data =

> > > > š š š š š š š š {
> > > > š š š š š š š š š š š š ajax:
> > > > š š š š š š š š š š š š {
> > > > š š š š š š š š š š š š š š š š type: "GET",
> > > > š š š š š š š š š š š š š š š š url: AJAXURL,
> > > > š š š š š š š š š š š š š š š š async: true,
> > > > š š š š š š š š š š š š š š š š data: function(n) {
> > > > š š š š š š š š š š š š š š š š š š š š // the result is fed to the AJAX
> > > request `data` option
> > > > š š š š š š š š š š š š š š š š š š š š var idVal = n.attr ?


> > > n.attr("id").replace("node_", "") : -1;

> > > > š š š š š š š š š š š š š š š š š š š š alert("data function called: " +


> > > n); // this is only called one
> > > > time

> > > > š š š š š š š š š š š š š š š š š š š š return { "operation":
> > > "get_children", "id": idVal };
> > > > š š š š š š š š š š š š š š š š }
> > > > š š š š š š š š š š š š },
> > > > š š š š š š š š š š š š progressive_render: true,
> > > > š š š š š š š š š š š š correct_state: true,
> > > > š š š š š š š š š š š š cache: false,
> > > > š š š š š š š š š š š š dataType: "json",
> > > > š š š š š š š š š š š š error: this.onError,
> > > > š š š š š š š š š š š š success: this.onSuccess,
> > > > š š š š š š š š}
>
> > > > Rendered HTML:
> > > > <ul>
> > > > š <li id="1" class="jstree-leaf" rel="root" state="closed">
> > > > š <ins class="jstree-icon"> </ins>
> > > > š <a class="" href="#">
> > > > š </a>
> > > > </li>
>
> > > > Types:
>
> > > > "types" : {
> > > > š š š š š š š š š š š š "root":
> > > > š š š š š š š š š š š š {
> > > > š š š š š š š š š š š š š š š š valid_children: ["mid", "leaf"]
> > > > š š š š š š š š š š š š },
> > > > š š š š š š š š š š š š "mid":
> > > > š š š š š š š š š š š š {
> > > > š š š š š š š š š š š š š š š š valid_children: ["mid", "leaf"]
> > > > š š š š š š š š š š š š },
> > > > š š š š š š š š š š š š "leaf":
> > > > š š š š š š š š š š š š {
> > > > š š š š š š š š š š š š š š š š valid_children: "none"
> > > > š š š š š š š š š š š š }
> > > > š š š š š š š š }


>
> > > > JSON content (returned from initial call to web service):
>
> > > > [{ "data": "Accessories", "attr": { "id": "1", "rel": "root", "state":
> > > > "closed"} }, { "data": "Inventory", "attr": { "id": "1", "rel":
> > > > "root", "state": "closed"} }]
>
> > > > I am using the latest version of jstree.
>
> > > > Thanks for any help!
> > > > -Moishe
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > > "jsTree" group.
> > > To post to this group, send email to jst...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > > jstree+un...@googlegroups.com<jstree%2Bunsu...@googlegroups.com>
> > > .
> > > For more options, visit this group at

> > >http://groups.google.com/group/jstree?hl=en.- Hide quoted text -
>
> - Show quoted text -

Reply all
Reply to author
Forward
0 new messages