jquery accordion is causing jquery treeview picker to breakup
Hi all
I am trying to implement an accordion type interface with jquery found here . inside the accordion i have a jquery treeview picker thats sort of a combo box that opens up a tree structure found here
my problem is that when i open the treeviewpicker, the options are shown at the bottom of the accordion. a picture of this is shown below
my code is below
I am trying to implement an accordion type interface with jquery found here . inside the accordion i have a jquery treeview picker thats sort of a combo box that opens up a tree structure found here
my problem is that when i open the treeviewpicker, the options are shown at the bottom of the accordion. a picture of this is shown below
my code is below
- <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/jquery.treeview.css" />
<link rel="stylesheet" type="text/css" href="../css/treeview.css" />
<link rel="stylesheet" type="text/css" href="../css/treeviewpicker.css" />
<link rel="stylesheet" href="../css/screen.css" />
<link rel="stylesheet" href="../css/demo_acc.css">
<link rel="stylesheet"
href="../jquery-ui-1.8.6.custom/css/ui-lightness/jquery-ui-1.8.6.custom.css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.cookie.js" type="text/javascript"></script>
<script src="../js/jquery.treeview.js" type="text/javascript"></script>
<script src="../js/jquery.treeviewpicker.js" type="text/javascript"></script>
<script type="text/javascript"
src="../jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js"></script>
<script
src="../jquery-ui-1.8.6.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script
src="../jquery-ui-1.8.6.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script
src="../jquery-ui-1.8.6.custom/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$( function(){
$("#accordion").accordion();
});
/*
$(document).ready(function(){
$("#browser").treeview({
persist: "location",
collapsed: true,
animated: "fast",
persist: "cookie",
unique: true
});
}
);
*/
$(document).ready(function() {
$("#browser").treeview({
persist: "location",
collapsed: true,
unique: true
});
$("#input_browser").treeviewpicker("#browser_data",
{ onItemSelect:
function selectItem(data) {
$('#code_browser').attr('value', data);
},
imageUrl: "../images/arrow.jpg"
});
});
</script>
</head>
<body>
<h2 align="center">Create Proposed Project</h2>
<br>
<br>
<br>
<br>
<div class="demo">
<div id="accordion">
<h3><a >Description</a></h3>
<div>
Project level <input id="code_browser" readonly /> <input id="input_browser" class="tv_input" readonly />
<div id="browser_data" style="display: none;">
<ul id="browser">
<li> <span code="1">Programme 1</span>
<ul>
<li> <span code="1.1">Project 1</span>
<ul>
<li> <span code = "1.1.1">Subproject 1 </span>
<ul>
<li> <span code="1.1.1.1"> Activity 1</span> </li>
<li> <span code="1.1.1.2"> Activity 2</span> </li>
<li> <span code="1.1.1.3"> Activity 3</span> </li>
</ul>
</li>
<li> <span code="1.1.2">Subproject 2</span> </li>
</ul>
</li>
<li> <span code="1.2"> Project 2 </span> </li>
<li> <span code="1.3"> Project 3 </span></li>
</ul>
</li>
<li> <span code="2">Programme 2</span></li>
<li><span code="3">Programme 3</span></li>
</ul>
</div>
<table>
<tr>
<td>Year</td>
<td> <select>
<option>2010</option>
<option>2011</option>
</select> </td>
</tr>
<tr>
<td>Branch/Department</td>
<td> <select>
<option>Social</option>
<option>Rural</option>
</select> </td>
</tr>
</table>
<table>
<tr>
<td> Name: </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Description</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Proposal Required</td>
<td> YES/ NO</td>
</tr>
<tr>
<td>Project Charter Code:</td>
<td><input type="text" value="2.2" disabled="disabled"></td>
</tr>
</table>
</div>
<h3><a >Task</a></h3>
<div>
<table border="1">
<tr>
<td></td>
<td>Task Name</td>
</tr>
<tr>
<td><input type="radio"></td>
<td></td>
</tr>
<tr>
<td><input type="radio"></td>
<td></td>
</tr>
</table>
<p>
<input type="button" value="Add">
<input type="button" value="Delete">
</p>
</div>
<h3><a >Indicators</a></h3>
<div>
<table>
<tr>
<td></td>
<td>Indicator Description </td>
<td> <input type="text"> </td>
<td> Type </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="radio"> </td>
<td> Number of Beneficiary
</td>
<td> <input type="text"> </td>
<td> Quantitative
</td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="radio"> </td>
<td> Minimum Wage of beneficiary below 100 per day
</td>
<td> <input type="text"> </td>
<td> Qualitative </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="button" value="Add"> </td>
<td> <input type="button" value="Delete"> </td>
</tr>
</table>
</div>
<h3><a >Finance</a></h3>
<div>
<p>
G/L Code: <input type="text">
</p>
</div>
<h3><a >Approval History</a></h3>
<div>
<table>
<tr>
<td>Divisional Secretories Approval
</td>
</tr>
<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes"> No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Director's Approval
</td>
</tr>
<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes"> No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Director General's Approval
</td>
</tr>
<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes"> No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Topic Participants
shankhasanyal