469,352 Members | 1,661 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

Call Javascript function in dtree

Hi I am new to Javascript and I want to use dtree but instead of clicking on the nodes for URL I want to call a another javascript function

Is it something to do in order to achieve that? If yes please help me and forgive me for my ignorance

Thank you in advance
Sep 13 '06 #1
10 10105
itKiwi
2
Is there anybody who can help us on this ? Like pricter, I am a beginner, and do not want to "mess up" dtree, which others say is very well constructed. I have some ideas, for example, if url is blank, do something, or, call a page with the function embedded, but neither of these seems "right".
Thanks.


Hi I am new to Javascript and I want to use dtree but instead of clicking on the nodes for URL I want to call a another javascript function

Is it something to do in order to achieve that? If yes please help me and forgive me for my ignorance

Thank you in advance
Feb 6 '07 #2
acoder
16,027 Expert Mod 8TB
Welcome to The Scripts.

See the API for dtree. When adding a node, you can specify a url. There, put in your javascript, e.g.
Expand|Select|Wrap|Line Numbers
  1. 'javascript:myfunction();'
Feb 6 '07 #3
itKiwi
2
Great ! So simple, when you know how. Another lesson learnt; thanks.
Feb 7 '07 #4
acoder
16,027 Expert Mod 8TB
No problem, glad you got it working.
Feb 8 '07 #5
sovit
1
hi,
I have to do multiselect in dtree(). At present it supports single select.
Any pointer would be great help.
Thanks,
Sovit
May 25 '07 #6
acoder
16,027 Expert Mod 8TB
hi,
I have to do multiselect in dtree(). At present it supports single select.
Any pointer would be great help.
Thanks,
Sovit
Welcome to TSDN!

Why would you want a multi-select for a tree menu?
May 26 '07 #7
Hi
I have to do multiselect in dtree(). At present it supports single select.
I need it because i want collect various nodes to an array and send it ot another page, (just the id's of the nodes)
Thanks,
Sep 19 '07 #8
acoder
16,027 Expert Mod 8TB
Hi
I have to do multiselect in dtree(). At present it supports single select.
I need it because i want collect various nodes to an array and send it ot another page, (just the id's of the nodes)
Thanks,
Welcome to TSDN!

Unless the author has added this ability, you'll probably have to provide this extended functionality yourself.
Sep 21 '07 #9
Aitor Solozabal Merino

Here is a simple modification of dtree.js found on the web to do what you want

dtree.js modification --> dtreecheckbox.js

Replace this funtion inside the javascript dtree.js file

Expand|Select|Wrap|Line Numbers
  1. // Creates the node icon, url and text
  2. dTree.prototype.node = function(node, nodeId) {
  3.     var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
  4.     if (this.config.useIcons) {
  5.         if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
  6.         if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
  7.         if (this.root.id == node.pid) {
  8.             node.icon = this.icon.root;
  9.             node.iconOpen = this.icon.root;
  10.         }
  11.       //str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
  12.         str += node.title + '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
  13.     }
  14.     if (node.url) {
  15.         str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
  16.         //if (node.title) str += ' title="' + node.title + '"';
  17.         if (node.target) str += ' target="' + node.target + '"';
  18.         if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
  19.         if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
  20.             str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
  21.         str += '>';
  22.     }
  23.     else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
  24.         str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
  25.     str += node.name;
  26.     if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
  27.     str += '</div>';
  28.     if (node._hc) {
  29.         str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
  30.         str += this.addNode(node);
  31.         str += '</div>';
  32.     }
  33.     this.aIndent.pop();
  34.     return str;
  35. };
  36.  
sample form to call a program to show a dtree with check box selection:
form_to_call_treeview_checkbox.php
[HTML]<?php


?>
<table>
<tr>
<td>
<FORM name = 'form1' method = 'POST' action = ''>
<input type=text name=valor>
</td>
<td>
<input type=button name=open_popup ONCLICK="window.open('treeview_checkbox.php', 'popuppage', 'scrollbars=yes,resizable=yes,menubar=yes,width=40 0,height=600'); " value=" View ">
</td>
</tr>
<tr>
<td>
<INPUT TYPE=SUBMIT VALUE=OK>
</td></tr>
</table>
[/HTML]

program to show a dtree with checkbox:
treeview_checkbox.php
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Catalog Tree</title>

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtreecheckbox.js"></script>

</head>

<body>
<div class="dtree"><FORM>
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
[/HTML][PHP]<?php
function send_query( $db, $link, $sql ) {
$result = false;
if ($GLOBALS['MYSQLPHPEXTENSION']=="mysqli"){
if ( mysqli_select_db( $link,$db) ) {
$result = mysqli_query( $link,$sql );
if ( mysqli_errno( $link ) ) {
echo "MySQL error " . mysqli_errno( $link ) . ": " . mysqli_error( $link ) . "\n<br>When executing:<br>\n$sql\n<br>";
}
} else {
echo "MySQL error " . mysqli_errno( $link ) . ": " . mysqli_error( $link ) . "\n<br>When selecting database $db\n<br>";
}
}else{
if ( mysql_select_db( $db,$link) ) {
$result = mysql_query( $sql ,$link);
if ( mysql_errno( $link ) ) {
echo "MySQL error " . mysql_errno( $link ) . ": " . mysql_error( $link ) . "\n<br>When executing:<br>\n$sql\n<br>";
}
} else {
echo "MySQL error " . mysql_errno( $link ) . ": " . mysql_error( $link ) . "\n<br>When selecting database $db\n<br>";
}
}
return $result;
} //end function send_query
function fill_the_tree( $result) {
if ( $result ) {
if ($GLOBALS['MYSQLPHPEXTENSION']=="mysqli"){
while ( $row = mysqli_fetch_assoc( $result ) ) {
$campo = 1;
while ( list( $k, $v ) = each( $row ) ) {
if ( $campo == 1 ) {
$treeview_cod = $v;
}
if ( $campo == 2 ) {
$treeview_name = $v;
}
if ( $campo == 3 ) {
$treeview_desc = $v;
If ($treeview_desc=="folder") {
$treeview_url="";
}else{
$treeview_url=$treeview_desc.".url";// or .php or .html
}
}
if ( $campo == 4 ) {
$treeview_parent_cod = $v;
}
$campo++;
} ;
// rellena el arbol con cada fila que se extrae de la tabla tab_treeview
// Node(id, pid, name, url, title, target, icon, iconOpen, open)
?>
d.add(<?= $treeview_cod;?>,<?= $treeview_parent_cod;?>,'<?= $treeview_name;?>','<?= $treeview_url;?>','<?= $treeview_desc;?>');
<?php
}
mysqli_free_result( $result );
}else{
while ( $row = mysql_fetch_assoc( $result ) ) {
$campo = 1;
while ( list( $k, $v ) = each( $row ) ) {
if ( $campo == 1 ) {
$treeview_cod = $v;
}
if ( $campo == 2 ) {
$treeview_name = $v;
}
if ( $campo == 3 ) {
$treeview_desc = $v;
If ($treeview_desc=="folder") {
$treeview_url="";
}else{
$treeview_url=$treeview_desc.".url";// or .php or .html
}
}
if ( $campo == 4 ) {
$treeview_parent_cod = $v;
}
$campo++;
} ;
// rellena el arbol con cada fila que se extrae de la tabla tab_treeview
// Node(id, pid, name, url, title, target, icon, iconOpen, open)
//echo "d.add(" . $categories['categories_id'] . "," . $categories['parent_id'] . ",'" . addslashes($categories['categories_name']) . "','', '<input type=checkbox name=categories value=" . $categories['categories_id'] . ">');\n"; //,," . $categories['categories_id'] . ",,,); \n";

echo "d.add(" . $treeview_cod . "," . $treeview_parent_cod . ",'" . addslashes($treeview_name) . "','', '<input type=checkbox name=nodes value=" . $treeview_cod . ">');\n"; //,," . $treeview_cod . ",,,); \n";
}
mysql_free_result( $result );
}
}
} //end function fill_the_tree
echo "<script type='text/javascript'>
<!--

d = new dTree('d'); \n
d.add(0,-1,'Datafile Treeview','','');\n";

$MYSQLPHPEXTENSION="mysql"; // "mysqli"
$PASSWORD = "lbsb2vb"; // ""
$HOST = "localhost"; // "localhost"
$USER = "root"; // "aitorsol"
$DATABASE = "test"; // "aitorsol_es_db"
$TABLE = "tab_treeview"; // "tab_treeview"
if ($GLOBALS['MYSQLPHPEXTENSION']=="mysqli"){
$LINK = mysqli_connect( $HOST, $USER, $PASSWORD, $DATABASE ) or die ( "No se ha conectado" );
}else{
$LINK = mysql_connect( $HOST, $USER, $PASSWORD, $DATABASE ) or die ( "No se ha conectado" );
}
$QUERY = "select * from `" . $DATABASE . "` . `" . $TABLE . "` limit 0, 5000";
fill_the_tree( send_query( $DATABASE, $LINK, $QUERY ));

?>[/PHP]
[HTML]document.write(d);

//-->
</script>
<INPUT TYPE="BUTTON" onClick="cycleCheckboxes(this.form)" VALUE="OK">
</form>
<script type='text/javascript'>
<!--
function cycleCheckboxes(what) {

window.opener.document.form1.valor.value="";
for (var i = 0; i<what.elements.length; i++) {
if ((what.elements[i].name.indexOf('nodes') > -1)) {
if (what.elements[i].checked) {
window.opener.document.form1.valor.value += what.elements[i].value + ',';
}
}
}
window.close();
}
//-->
</script>
</div>
</body>

</html>
[/HTML]


a sql script to create in a mysql "test" database a table and data needed by the sample utility

Expand|Select|Wrap|Line Numbers
  1. use 'test'
  2.  
  3. drop table if exists `tab_treeview`;
  4. CREATE TABLE `tab_treeview` (
  5.   `treeview_cod` smallint(5) NOT NULL auto_increment,
  6.   `treeview_name` char(25) NOT NULL default '',
  7.   `treeview_desc` char(25) NOT NULL default '',
  8.   `treeview_parent_cod` smallint(5) NOT NULL default '0',
  9.   PRIMARY KEY  (`treeview_cod`)
  10. ) ENGINE=MyISAM;
  11.  
  12. INSERT INTO `tab_treeview` VALUES
  13. (1,'root','expediente',0), 
  14. (2,'parent1','expediente',1),
  15. (3,'parent2','expediente',1),
  16. (4,'parent3','expediente',1),
  17. (5,'child1','carpeta',2),
  18. (6,'child2','carpeta',2),
  19. (7,'grandchild1','documento',5),
  20. (8,'grandchild2','documento',5),
  21. (9,'child3','carpeta',4),
  22. (10,'child4','documento',4),
  23. (11,'grandchild3','subcarpeta',9),
  24. (12,'grandgrandchild1','documento',11),
  25. (13,'grandgrandchild2','documento',11);
Feb 25 '08 #10
acoder
16,027 Expert Mod 8TB
Aitor, welcome to TSDN!

Thanks for posting. I'm sure people will find your post useful.
Feb 25 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

15 posts views Thread by chirs | last post: by
3 posts views Thread by KaNos | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.