?
Solved

JQuery Treeview

Posted on 2010-01-09
10
Medium Priority
?
1,358 Views
Last Modified: 2012-05-08
Hey guys,
                I am trying to invoke Treeview structure using JQuery facility and for that I have followed the steps below:

1 Import all the related libraries
2. Define Java Script function
3. Define a  list, give it an id which is to be matched with one of the parameter in the Javascript.

I am attaching my code for you people to look at.

I am not able to invoke any kind of behavior and the lost looks like there is not CSS attached with that. I am not sure what could be the problem.
Treeview.txt
0
Comment
Question by:TheCommunicator
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
  • 2
10 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 26275720
make sure the paths are proper to the script files and the css files

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
	<link rel="stylesheet" href="http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script src="http://www.dynamicdrive.com/dynamicindex1/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// second example
		$("#browser").treeview({
			animated:"normal",
			persist: "cookie"
		});
		$("#samplebutton").click(function(){
			var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 
				"<li><span class='file'>Item1</span></li>" + 
				"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
			$("#browser").treeview({
				add: branches
			});
		});
	});
</script>

</head>
<body>
<h3>Demo #2:</h3>

<p><a href="#" id="samplebutton" onClick="return false">Click here</a> to add a New Folder node to the end of the existing tree</p>

<ul id="browser" class="filetree">
                <li><span class="folder">Folder 1</span>
                        <ul>
                                <li><span class="file">Item 1.1</span></li>

                        </ul>
                </li>
                <li><span class="folder">Folder 2</span>
                        <ul>
                                <li><span class="folder">Subfolder 2.1</span>
                                        <ul id="folder21">
                                                <li><span class="file">File 2.1.1</span></li>
                                                <li><span class="file">File 2.1.2</span></li>
                                        </ul>
                                </li>
                                <li><span class="file">File 2.2</span></li>
                        </ul>
                </li>
                <li class="closed"><span class="folder">Folder 3 (closed at start)</span>

                        <ul>
                                <li><span class="file">File 3.1</span></li>
                        </ul>
                </li>
                <li><span class="file">File 4</span></li>
        </ul>


                <p><b>Notes:</b></p>

                <ul>
                        <li>No Nodes collapsed explicitly. &quot;<b>Folder 3</b>&quot; is manually 
                        closed then by giving its <code>LI</code> element a &quot;<code>closed</code>&quot; 
                        CSS class.</li>
                        <li>Animation enabled, speed is &quot;<code>normal</code>&quot;.</li>

                        <li>&quot;<code>Cookie</code>&quot; persistence enabled, causing the current 
                        tree state to be persisted.</li>
                        <li>Dynamically adding a sub tree to the existing tree demonsrated.</li>
                </ul>


</body>
</html>

Open in new window

0
 

Author Comment

by:TheCommunicator
ID: 26275760
Did you change in the code below the references? I am not sure, just asking.
0
 
LVL 22

Accepted Solution

by:
kadaba earned 668 total points
ID: 26275768
<link rel="stylesheet" href="http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="http://www.dynamicdrive.com/dynamicindex1/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
        <script src="http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.js" type="text/javascript"></script>

Yes these are the references I changed to test if something was wrong in the code.. code seems fine... so it must be the path issue.
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:TheCommunicator
ID: 26275855
Okie so when I use the same code as you are using, do I have to add the references to my application ? OR it will take its reference from the HTTP address we have specified here?

0
 

Author Comment

by:TheCommunicator
ID: 26275858
I mean to ask that do i have to add ".JS" files explicitly to my project folder?
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1332 total points
ID: 26275882
This is the exact code/example I gave you on your earlier post. If you copied and pasted to it should work. So the question, what is the problem? You just need to save the files (look at the earlier/original post) to your web site and adjust the path to the files. then update the tree so that it reflects YOUR desired menu items.
0
 

Author Comment

by:TheCommunicator
ID: 26275947
OK. I tried basically two things:

1. copying and pasting the exact same thing. Changing nothing. In this case I am not loading different files like Jquery.js and Jquery.Treeview.cs into my Project folder assuming that the references in this code are being refered online from a HTTP location.

2. Bringing the JQury.js and all the other files in my project folder and then  dragging the files into my code, which basically produces the reference link by itself.

None worked.

I am using HTML as the page type. Is it Ok or do I have to use .asp file or anything else? Does it even matter?
0
 

Author Comment

by:TheCommunicator
ID: 26275950
Please ignore my last comment.I am sorry basically I had forgot to set up the new page as my start up and ended up seeing the old page. So it showed me the wrong results.

But yes, in copy paste case it really worked. Thank you very much guys.

One more thing: As it does show me the output in the "Folders layout", can I change the way things look? I  mean I want to remove Folder icon from the  links.  what can I do in this case?
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1332 total points
ID: 26276030
>>I  mean I want to remove Folder icon from the  links.  what can I do in this case?
If you look at the css, you will see various references to images.
folder.gif
folder-closed.gif
file.gif

 Those images correspond to the folders/pages in the example. You will need to come up with your own graphics and adjust the path to the images on your css file so that the path to the images point to your images.
0
 

Author Comment

by:TheCommunicator
ID: 26276064
Thank you very much for your responses. well,  that was a very helpful information and  I will see to it if I can make  changes in CSS and get desired results.

But just for the reference I wanted something like :http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm

The third example which is on top right corner is what exactly I want from my tree-view both in appearance and behavior.

I thing behavior section is more about JavaScript and appearance is more about CSS.
0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question