[jQuery] JQuery treeview plugin and async fetches for more tree-data
I'm trying to create a collapsing/expanding animated treeview in
Javascript. I found the JQuery treeview plugin, and it's working
great. However, I have one key need that I can seem to figure out
with the samples provided:
Basically I need the "advanced async feature" they provide (http://
jquery.bassistance.de/treeview/demo/async.html). As the user clicks
on each "main node" in the tree, I need to make an AJAX-call to pull
in the sub-tree links. My problem is that I need to do some post-
processing in JS of the JSON data that comes back from the server in
order to keep the tree-view plugin happy (and I don't control the
API's on the server for the data-source)
When I make my call to the API to retrieve it top-level tree, the JSON
data comes back like this:
navcallback({"response":{"statusCode":200,"data":{"genrelist":{"genre":
[{"id":1,"haschildren":true,"name":"Alternative","parentid":0},{"id":
24,"haschildren":true,"name":"Blues","parentid":0},{"id":
32,"haschildren":true,"name":"Classical","parentid":0},{"id":
44,"haschildren":true,"name":"Country","parentid":0},{"id":
212,"haschildren":true,"name":"Decades","parentid":0},{"id":
54,"haschildren":true,"name":"Easy Listening","parentid":0},{"id":
61,"haschildren":true,"name":"Electronic","parentid":0},{"id":
82,"haschildren":true,"name":"Folk","parentid":0},{"id":
122,"haschildren":true,"name":"Inspirational","parentid":0},{"id":
134,"haschildren":true,"name":"International","parentid":0},{"id":
163,"haschildren":true,"name":"Jazz","parentid":0},{"id":
177,"haschildren":true,"name":"Latin","parentid":0},{"id":
195,"haschildren":true,"name":"Metal","parentid":0},{"id":
295,"haschildren":false,"name":"Misc","parentid":0},{"id":
206,"haschildren":true,"name":"New Age","parentid":0},{"id":
220,"haschildren":true,"name":"Pop","parentid":0},{"id":
232,"haschildren":true,"name":"R&B/Urban","parentid":0},{"id":
110,"haschildren":true,"name":"Rap","parentid":0},{"id":
242,"haschildren":true,"name":"Reggae","parentid":0},{"id":
250,"haschildren":true,"name":"Rock","parentid":0},{"id":
265,"haschildren":true,"name":"Seasonal/Holiday","parentid":0},{"id":
276,"haschildren":true,"name":"Soundtracks","parentid":0},{"id":
282,"haschildren":true,"name":"Talk","parentid":0},{"id":
89,"haschildren":true,"name":"Themes","parentid":
0}]}},"statusText":"Ok"}});
All is well, but I need to do some JS processing on it as it comes
back, so I run it through a script like this:
function navcallback(d) {
var response='[';
for (i=0;i<=d.response.data.genrelist.genre.length - 1;i++) {
response += '{"text": "'+d.response.data.genrelist.genre[i].name
+'","id": "'+d.response.data.genrelist.genre[i].id+'","hasChildren":
true},';
}
response = response.slice(0, -1);
response += ']';
}
Which then gets the data in the format that jQuery treeview expects
it:
[{"text": "Alternative","id": "1","hasChildren": true},{"text":
"Blues","id": "24","hasChildren": true},{"text": "Classical","id":
"32","hasChildren": true},{"text": "Country","id": "44","hasChildren":
true},{"text": "Decades","id": "212","hasChildren": true},{"text":
"Easy Listening","id": "54","hasChildren": true},{"text":
"Electronic","id": "61","hasChildren": true},{"text": "Folk","id":
"82","hasChildren": true},{"text": "Inspirational","id":
"122","hasChildren": true},{"text": "International","id":
"134","hasChildren": true},{"text": "Jazz","id": "163","hasChildren":
true},{"text": "Latin","id": "177","hasChildren": true},{"text":
"Metal","id": "195","hasChildren": true},{"text": "Misc","id":
"295","hasChildren": true},{"text": "New Age","id":
"206","hasChildren": true},{"text": "Pop","id": "220","hasChildren":
true},{"text": "R&B/Urban","id": "232","hasChildren": true},{"text":
"Rap","id": "110","hasChildren": true},{"text": "Reggae","id":
"242","hasChildren": true},{"text": "Rock","id": "250","hasChildren":
true},{"text": "Seasonal/Holiday","id": "265","hasChildren": true},
{"text": "Soundtracks","id": "276","hasChildren": true},{"text":
"Talk","id": "282","hasChildren": true},{"text": "Themes","id":
"89","hasChildren": true}]
However, I can't for the life of me figure out how to get this
integrated with the JQuery treeview's async.js code (below). All
would be fine if I didn't need to do this post-processing, but I need
to.
Gotcha's that I'm dealing with:
1) The API data is coming from a cross-domain server, so I think I
probably need to use the $.getScript call to retrieve the JSONp data.
2) I can't figure out how to get my navback handler integrated into
the "load" function of treeview. If I insert my "response-
reformatting code" inside the getJSON function, all kinds of bad
things start happening. I suspect it has to do with the "this"
objects and parent and other things which are quite complex in this
plugin.
function load(settings, root, child, container) {
$.getJSON(settings.url, {root: root}, function(response) {
func
[jQuery] Jquery Treeview JSON Issue
Greetings:
I am trying to get a proof of concept going for using Jquery Treeview
Async to build a dynamic tree with JSP. I looked at the documentation
on the Treeview website but I am unable to get this to work.
My "host" page calls another jsp as follows:
$(document).ready(function(){
$("#asynctree").treeview({
url: "page_parts/pageGuidTreeViewSource.jsp"
})
});
On this same "host" page I have this simple structure:
The page I am calling has a tag that is producing some sample JSON.
What happens is the data is returned but it simply stays in it's
"native" JSON format like this:
{"outer":"foo","inner":
{"innerProp1":"val1","innerProp2":"val2","inner2":
{"inner2Prop1":"in2p1","inner2Prop2":"in2p2"}}}
So to sum up the page is called but the tree is never built.
I am trying to follow the examples on the treeview website so this may
be an example of me not fully understanding what I need to do.
Any help would be appreciated.
Sincerely,
SParky
[jQuery] Jquery Treeview - trigger a collapse programatically
I'm using Treeview and I need to be able to tell it to collapse via Javascript (as in, from another function outside of the Treeview code). I have searced everywhere for a how-to and can't figure it out. I'm hoping someone can suggest a way of doing it.
[jQuery] Jquery treeview jquery accordion
When i used jquery treeview plugin inside accordion plugin treeview styles not working? Best Regards
[jQuery] JQuery Treeview Navigation frames
I am new to JQuery and Treeview and I am in trying to assess if the treeview could be a lightweight and efficient replacement for our current 3rd party tree control. Can the Treeview node hyperlink load the url in a different frame ? Alternatively, is it possible to catch the Node On Click event and do some business logic to figure out the exact url and then open the url in a separate frame or an AJAX Tab control ?
[jQuery] jquery treeview vertical lines missing
I am trying to use treeview and have a tester page http://sitemaster-internet.co.uk/treeview/tester2.php the html for the directory view is generated dynamically with php building the unordered list from directories on the server, the html passes validation and 'looks' ok, but when the page renders the vertical lines are missing from the treeview. By way of a test I copied the html for my ul and pasted it into the original demo file that came with treeview and got the same result, so it has to be something wrong with my code (as always :-)) The supplied demo works fine. I have stared at this for hours so . . . any suggestions welcome
[jQuery] jQuery [treeview] Question
Hi,
I'm a jQuery beginner.
My browser is Firefox 3.5.1
I'm using Treeview 1.4
Revision Id: jquery.treeview.js
4684 2008-02-07 19:08:06Z
joern.zaefferer
I have two questions:
1.Whenever I click on either of my two Treeview control
labels "Collapse" or "Expand" (see below) the respective label
visibly gets the focus (dotted border). I want to remove
(blur) this border, but I don't know what I need to change
in the treeview.js code to get this effect.
How can I do this?
Relevant portion of my code:
$(document).ready(function(){
$("#tree").treeview({
control: "#treecontrol",
collapsed: true,
animated: "fast"
});
});
Collapse All
|
Expand All
...
2.I would like to add easing, specifically "easeOutBounce"
from George Smith's easing plugin. How can I do this?
Any help would be most appreciated.
elm.mar...@gmail.com
[jQuery] JQuery Treeview - Display sub nodes when mouse over menu
Hello, I'd like to display the children nodes when the mouse over the parent node. What is the best way to achieve that? Any help is appreciated. Thank you for your time.
[jQuery] JQuery Treeview - Page reload
Hello,
I'm using JQuery Treeview as follow:
$("#navigation").treeview({
animated: "fast",
persist: "location",
collapsed: true,
unique: true
});
Upon page reload, all the nodes expand and then only the selected node
remain expanded which is the desired behavior. However, I'd like to
prevent all the nodes from expanding upon refresh as it creates a
flicker. Has anyone else experience this behaviour? How can I turn it
off?
Thank you for your time...
[jQuery] JQuery Treeview Expand selected node
I am using JQuery TreeView and have a question. my example tree look like this +Animals +Birds +Humans I wats to expand a specific node. for example Birds. how do i do that ?
[jQuery] JQuery Treeview
Hi, I'm using the JQuery treeview but I'm running into some weird behavior. The tree expands by itself sometimes and it cannot be collapsed. It happens every time I'm displaying a slide show for instance. When I clear the cookies it goes away. Any idea on how I can't prevent the whole tree from expanding? Thanks for your help
[jQuery] JQuery TreeView Plugin Problem: Text Alignment in IE
Hello, I am currently using the treeview plug in at http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ Is is a nice work, and I am really pleased with it. I, however, have a problem of text alignment with the tree lines when I combined the treeview with the tabview in the jquery-ui library. There is no problem with other browsers (tested with Chrome, Firefox, Opera). The output is worst than what you will see in this online sample http://www.devshed.com/c/a/JavaScript/Opened-and-Closed-Branches-on-a-TreeView-jQuery-Hierarchical-Navigation-System/3/ which is not the way the main demo appears: http://jquery.bassistance.de/treeview/demo/ Please help. Best regards, Paul.
[jQuery] jquery treeview menu problem
Hi, i'm using jquery treeview ( http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ ) menu in my website and i have a little problem: when i open a page from the menu tree, menu expands completely and items alignes to the left side for a while, the time that page is charghing. I don't know why, can u help me? thank you
[jQuery] jquery treeview menu
Hi, i'm using jquery treeview menu in my website, but when i open a page from the menu, for a while, it expands completely and it alignes to the left side. can u help me? thank you
[jQuery] jQuery treeview click to open
Hello! when page first time loads, i want to open, for example first level of items...is any possibility to do "click" on treeview item (if i know li id or something...)
[jQuery] Jquery Treeview bug in Tapestry5
Hi, I'm using Tapestry5.018 (using Prototype and Scriptaculous for front end). I love Jquery and try using TreeView plugin for processing tree. Everything is ok so far but a bug with remove function in jquery.treeview.edit.js. With existence of prototype.js , remove a node in tree will remove a tree. Without prototype.js, remove function works ok. I guess there is a conflict between prototype and jquery but can't find the solution. I'd appreciate your help. Note: prototype.js is automatically generated. It always exists. I explicitly called jquery.noConlict(). Thanks and regards, Van
[jQuery] [jQuery][Treeview] How can I create ROOT node for the tree
Hi all, Anyone knows how to create ROOT node for the tree, sth like below ROOT <--- I want to create this Node - Home - Campany Thanks for reading and looking your all help :) bowlkhin
[jQuery] jquery treeview reload problems / firefox
Hello, i have got a problem with my jquery treeview menu and firefox 3.0.3 I built a static menu that contains 60 folders at the root level. At the second level there are 10 folders that have 1 - 15 child nodes The menu looks like SECTION |-Table | |-Add Table | |-Table1 | |-Table2 | |-Procedure | |-Add Proc | |-Proc1 | |-Proc2 If i load the page the first time, the menu is rendered in about 1.5 seconds and everything works fine but if reload the menu it takes up to 20 seconds till the menu shows. Firefox's seems to use 100% of my cpu as well as the need for memory increases. If i load the same page using opera everything works perfect. Any ideas what the problem with firefox might be. Regards Kurt
[jQuery] [jQuery][TreeView][Help] is there any way to implement an icon at the right side of each node ?
Hi all,
I’m looking for your help in implementing an icon at the right side of each
node, in jQuery TreeView.
Why do I want to do that, simply I just want to have an icon, such as Delete
icon, so that I can click on that icon to delete a node, or do sth like
edit, or … an icon to show the current status (Lock, Unlock, etc) of a node
:-)
Thanks for reading, and looking for your reply :-)
bowlkhin
_
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of ken
Sent: 13 Tháng Mười Một 2008 2:00 SA
To: jquery-en@googlegroups.com
Subject: [jQuery] pseudo-forms, .data(), oh my
I have been out of the jQuery loop recently, and have little exposure with
the new data functions in jQuery.
My situation is, I am refactoring an application (using jQuery, of course)
which currently makes heavy use of what I can only describe as pseudo-forms;
essentially, a page might contain many 'forms', although form tags are
rarely used. Instead, the current JS form methods build a query string that
is sent via XHR as a GET request. This is partly due to the fact that we use
many HTML elements that normally aren't form elements (div's, p's, etc, for
various reasons not under my control that I won't go into here), but also
because the form elements are not physically close in the HTML structure and
so grouping becomes a problem.
A basic [mock] scenario: a login 'form', with user/password elements and a
'submit' button. When submit is clicked, it gets the text() of the user and
password elements, contructs a query string from them, and then passes this
to an XHR call.
I am seeking thoughts as to whether -- and if so, how -- the jQuery data
functionality could aid me. I do not need to store any "extra" information
in the elements (expandos are not the issue here), so I'm not sure if the
data functionality would aid me or not.
Is there some paradigm whereby I can group non-form elements together, so
that I can easily convert the items into a GET (or POST at times), and on
the return trip, easily update said related items? I know that I could
inject CSS classes for each specific form elements, so that I could use
$('.form1') to interact with all the elements of "form1", but this method
seems suboptimal. What I was thinking, is created a middle tier that would
exist as the data model for the form, and would contain basic methods for
submitting/updating/etc. the form. This middle tier would the glue that
would tie the data model to the 'form' elements, with the actual HTML
elements doing nothing other than displaying what the model dictates, with
the model being the de facto source of truth in relation to the data.
Is there anything like this already? If not, do you think that the data
functionality be a good or bad fit for me? Am I taking the complete wrong
approach?
Thanks in advance,
ken
[jQuery] [jQuery][TreeView] does it support drag and drop ?
Hi all, I wonder jQuery TreeView support drag and drop, anyone knows ? Thanks for reading and looking for any reply ;) bowlkhin
[jQuery] jQuery Treeview 1.4 by Joern Zaefferer
I am using this menu for a clients website, and I am having some problems with functionality. I may be reading it wrong, but in the documentation under "persist: 'location' " it states "looks within all tree nodes with link anchors that match the document's current URL (location.href), and if found, expands that node (including its parent nodes). " I am under the impression that when I create a URL for a menu item, when clicked it will expand the sub-menu's under that menu item, as well as directing you to the appropriate URL. This is where I am having the problem, it does not expand that menu item to expose the sub menu's when the menu item is a URL When you create the menu item as href="#" it works fine, but obviously doesn't take you to the appropriate URL page. If the URL is href="something.html" or href="something.php" it doesn't work. It starts to expand the menu, then closes right up. To see an example of what I am speaking of, please go to the foloowing website. There click on services, then Engineering. Engineering will take you to a new page but the sub menu's won't show until you click one of the links on the engineering page itself. http://radtke.cgsart.com/v7.0/index.php I thought this might have been a problem related to Persist: "location" but when I removed that from the .js, the problem still existed. Thanks!
[jQuery] jQuery Treeview + CheckBox
It is possible to use a CheckBox in a Treeview? Es posible usar un CheckBox en un Treeview? Don Quijote de Nicaragua. Elder Soto.
[jQuery] jQuery Treeview Plugin FireFox Problems [treeview]
Hi all, First a caveat: I'm new to jQuery and JavaScript. I'm having trouble with the jQuery Treeview plugin. In my hands it doesn't work properly on Firefox. On either Jorn's demo page (http://jquery.bassistance.de/ treeview/demo/) or my own local implementations; when a parent node is collapsed it's next sibling node moves up correctly, but gets indented to the right incorrectly as if it were a child of it's previous sibling. Have a look at a screen shot of the incorrectly formatted version on FireFox (http://malachite.genetics.utah.edu/img/ treeview_ff.jpg) and the correctly formatted version on Safari (http:// malachite.genetics.utah.edu/img/treeview_ff.jpg). Notice how in 'Sample 0' item 2 is indented as if it were a child. I just downloaded the jQuery (1.2.3) and the Treeview plugin (1.4) fresh yesterday. I'm working on a Mac PowerBook G4. I'm viewing with FireFox 2.0.0.13 and Safari 3.1 Any suggestions would be most welcome. Barry
[jQuery] jquery treeview - navigation refresh problem -
hey guys. dont mean to repost i posted on the site but it didnt come through in email.. not sure if this is due to massive amount of cfif's or some thing with jquery.. i am trying to use tree view on a test/stage site http://63.144.103.199/industrial/enclosures/wallmount/index.cfm its slow.. i am using cfif statements to open close tree branches by setting the class of the . my problem so far is that i get a weird refresh thing going on where it expands entire tree with no style. with bkg repeat. then once loaded it looks fine. it is sporadic, and i don't know what to look into... the nav is being called by a cfinclude. not sure if there is a better way to do this. i wanted to do a accordion nav, but i am going to have like 5 levels deep, once i flush this out... any pointers would be great! -paul
[jQuery] jquery treeview async doubt
Hi,
I'm trying Treeview jquery plugin and I have a doubt about async
filling mode. In the example in
http://jquery.bassistance.de/treeview/demo/async.html
the tree is filled with source.php file. In that file, it writes
directly a JSON structure but I can´t understand one part:
[
{
"text": "1. Pre Lunch (120 min)",
"expanded": true,
"classes": "folder",
"children":
[
{
"text": "1.1 The State of the Powerdome (30
min)"
},
{
"text": "1.2 The Future of jQuery (30 min)"
},
{
"text": "1.2 jQuery UI - A step to richnessy
(60 min)"
}
]
},
{
"text": "2. Lunch (60 min)",
"classes": "folder"
},
{
"text": "3. After Lunch (120+ min)",
"classes": "folder",
"children":
[
{
"text": "3.1 jQuery Calendar Success Story (20
min)"
},
{
"text": "3.2 jQuery and Ruby Web Frameworks (20
min)"
},
{
"text": "3.3 Hey, I Can Do That! (20 min)"
},
{
"text": "3.4 Taconite and Form (20 min)"
},
{
"text": "3.5 Server-side JavaScript with jQuery
and AOLserver (20
min)"
},
{
"text": "3.6 The Onion: How to add features
without adding
features (20 min)",
"id": "36",
"hasChildren": true
},
{
"text": "3.7 Visualizations with JavaScript and
Canvas (20 min)"
},
{
"text": "3.8 ActiveDOM (20 min)"
},
{
"text": "3.8 Growing jQuery (20 min)"
}
]
}
]
[
{
"text": "1. Review of existing structures",
"expanded": true,
"children":
[
{
"text": "1.1 jQuery core"
},
{
"text": "1.2 metaplugins"
}
]
},
{
"text": "2. Wrapper plugins"
},
{
"text": "3. Summary"
},
{
"text": "4. Questions and answers"
}
]
The node 3.6 has chidren, but they're defined in the else clause. How
can this work?
It would ne nice if somebody could post a php file which generates a
valid JSON from MySQL database, instead of writting the JSON result
directly in the code.
Thanx
