I have a tree view control build dynamically. i want to change color of the selected node .one help me to write the script given below. and its work fine.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(".TreeView1_0").css('color', 'black');
$(".TreeView1_0").css('background-color', 'white');
$(this).css('color', 'white');
$(this).css("background-color", "blue");
});
});
</script>
Now i want to change the source file to the js file stored in script folder.And store selected node index and value in hidden fields.i have a source file JQuery1.4.1.js in script folder. i dont know what is the exact way of referencing to this js file. and i dont know how to retrieve selected node index and value
i changed the code to do that.the entire aspx code is shown below
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title>
<script type="text/javascript" src="../../Scripts/JQuery1.4.1.js"></script>
<script type="text/javascript">
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes ,then bold the selected node to indicate it's selected ,and store selected node index and value to two hidden fields
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(".TreeView1_0").css('color', 'black');
$(".TreeView1_0").css('background-color', 'white');
$(this).css('color', 'white');
$(this).css("background-color", "blue");
// i am not sure about the two lines of code given below
document.getElementById('hfvalue').value = $(this).value;
document.getElementById('hfindex').value =$(this).index;
$(this).css('color', 'white');
$(this).css("background-color", "blue");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</div>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:HiddenField ID="hfvalue" runat="server" />
<asp:HiddenField ID="hfindex" runat="server" />
</p>
</form>
</body> </html>
But the code is not working . i am a newbie. Any suggestions