jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › invoke link when node is selected
Tagged: jqxtree
This topic contains 3 replies, has 2 voices, and was last updated by Mariya 11 years, 11 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
Hi all
some of the nodes in my treeview have an anchor element. I would of course like to automatically invoke the link once the node is selected using the keyboard. Unfortunately I get a “HTMLLIElement has no method ‘find’” error when I run the code below.
Any help is much appreciated!thanks
//Peter<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" /> <meta name="description" content="The jqxTree displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property." /> <title id='Description'>The jqxTree displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // Create jqxTree $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: theme }); // Create and initialize Buttons $('#Add').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Remove').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Disable').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#EnableAll').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Expand').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Collapse').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#ExpandAll').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#CollapseAll').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Next').jqxButton({ height: '25px', width: '100px', theme: theme }); $('#Previous').jqxButton({ height: '25px', width: '100px', theme: theme }); // Add $('#Add').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { // adds an item with label: 'item' as a child of the selected item. The last parameter determines whether to refresh the Tree or not. // If you want to use the 'addTo' method in a loop, set the last parameter to false and call the 'render' method after the loop. $('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element, false); // update the tree. $('#jqxTree').jqxTree('render'); } else { $('#jqxTree').jqxTree('addTo', { label: 'Item' }, null, false); // update the tree. $('#jqxTree').jqxTree('render'); } }); // Remove $('#Remove').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { // removes the selected item. The last parameter determines whether to refresh the Tree or not. // If you want to use the 'removeItem' method in a loop, set the last parameter to false and call the 'render' method after the loop. $('#jqxTree').jqxTree('removeItem', selectedItem.element, false); // update the tree. $('#jqxTree').jqxTree('render'); } }); // Disable $('#Disable').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { $('#jqxTree').jqxTree('disableItem', selectedItem.element); } }); // Expand $('#Expand').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { $('#jqxTree').jqxTree('expandItem', selectedItem.element); } }); // Expand $('#Collapse').click(function () { var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { $('#jqxTree').jqxTree('collapseItem', selectedItem.element); } }); // Expand All $('#ExpandAll').click(function () { $('#jqxTree').jqxTree('expandAll'); }); // Collapse All $('#CollapseAll').click(function () { $('#jqxTree').jqxTree('collapseAll'); }); // Enable All $('#EnableAll').click(function () { $('#jqxTree').jqxTree('enableAll'); }); // Select Next Item $('#Next').click(function () { var selectedItem = $("#jqxTree").jqxTree('selectedItem'); var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element); if (nextItem != null) { $("#jqxTree").jqxTree('selectItem', nextItem.element); $("#jqxTree").jqxTree('ensureVisible', nextItem.element); } }); // Select Previous Item $('#Previous').click(function () { var selectedItem = $("#jqxTree").jqxTree('selectedItem'); var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element); if (prevItem != null) { $("#jqxTree").jqxTree('selectItem', prevItem.element); $("#jqxTree").jqxTree('ensureVisible', prevItem.element); } }); $('#jqxTree').on('select', function (event) { var args = event.args; var selectedItem = $('#jqxTree').jqxTree('getItem', args.element); selectedItem.element.find('a').trigger('click'); }); }); </script></head><body class='default'> <div id='jqxWidget'> <div style='float: left;'> <div id='jqxTree' style='float: left; margin-left: 20px;'> <ul> <li id='home'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li><a href="http://localhost:50082/jQWidgets/DSC/demos/jqxtree/settings.htm?m=n">Government</a></li> <li><a href="http://localhost:50082/jQWidgets/DSC/demos/jqxtree/settings.htm?x=y">Manufacturing</a></li> <li>Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> <li>Rich Internet applications</li> <li>Technical communication</li> <li>Training and eLearning</li> <li>Web conferencing</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li>Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> <li>Support <ul> <li>Support home</li> <li>Customer Service</li> <li>Knowledge base</li> <li>Books</li> <li>Training and certification</li> <li>Support programs</li> <li>Forums</li> <li>Documentation</li> <li>Updates</li> </ul> </li> <li>Communities <ul> <li>Designers</li> <li>Developers</li> <li>Educators and students</li> <li>Partners</li> <li>By resource <ul> <li>Labs</li> <li>TV</li> <li>Forums</li> <li>Exchange</li> <li>Blogs</li> <li>Experience Design</li> </ul> </li> </ul> </li> <li>Company <ul> <li>About Us</li> <li>Press</li> <li>Investor Relations</li> <li>Corporate Affairs</li> <li>Careers</li> <li>Showcase</li> <li>Events</li> <li>Contact Us</li> <li>Become an affiliate</li> </ul> </li> </ul> </div> <div style='margin-left: 60px; float: left;'> <div style='margin-top: 10px;'> <input type="button" id='Add' value="Add" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Remove' value="Remove" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Disable' value="Disable" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Expand' value="Expand" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Collapse' value="Collapse" /> </div> <div style='margin-top: 10px;'> <input type="button" id='ExpandAll' value="Expand All" /> </div> <div style='margin-top: 10px;'> <input type="button" id='CollapseAll' value="Collapse All" /> </div> <div style='margin-top: 10px;'> <input type="button" id='EnableAll' value="Enable All" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Next' value="Next Item" /> </div> <div style='margin-top: 10px;'> <input type="button" id='Previous' value="Previous Item" /> </div> </div> </div> </div></body></html>
Hi Peter Sloth,
Please take a look at the provided example:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // Create jqxExpander $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px', theme: theme }); // Create jqxTree $('#jqxTree').jqxTree({ width: '100%', height: '100%', theme: theme }); $('#jqxTree').jqxTree('selectItem', null); }); </script></head><body class='default'> <div id='jqxWidget'> <div id='jqxExpander'> <div> Folders </div> <div style="overflow: hidden;"> <div style="border: none;" id='jqxTree'> <ul> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span item-title="true">Mail</span> <ul> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span item-title="true">Calendar</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span item-title="true">Contacts</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">jQWidgets</span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Admin</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Corporate</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Finance</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Other</span> </li> </ul> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Personal</span> </li> </ul> </li> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Today</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Week</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Month</span> </li> </ul> <li> <a href="http://www.google.bg/">Visit Google</a> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span item-title="true">Settings</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span item-title="true">Favorites</span> </li> </li> </ul> </li> </ul> </div> </div> </div> </div></body></html>
The ‘Visit Google’ part is the link which is opened after a click. You can either open it in the same page or in the other.
Hi Mariya
thanks for the reply. However, I want the link to be invoked when the node (which contains the link) gets selected – for instance when I select it using the keyboard.
In your sample code it is only possible to invoke the link using the mouse.thanks
//PeterHi Peter Sloth,
Try by using:
$(selectedItem.element).find('a').trigger('click');Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.