Actually i have the two divs on left side div i will dispaly the subcategories.T hen if we click on the any of the subcategory it should display the related data in right side div without page refreshing.
Now actually what i want is how to make the that subcategories is in href and on clicking that we want to take the data from database to display.please help me
this is my code
Now actually what i want is how to make the that subcategories is in href and on clicking that we want to take the data from database to display.please help me
this is my code
Code:
<html>
<head>
<title>example</title>
<style>
#header{
background-color:#c3dfef;
}
#footer
{
background-color:#ccecd8;
margin:5px;
display: block;
clear: both;
}
#sidebar-left
{
background-color:#D0D0D0 ;
float: left;
width:250px;
height:530px;
}
#content
{
background-color:#ccdff0;
height:530px;
}
div{
padding:10px;
border:solid 1px black;
}
.button2:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
</style>
<body>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function()
{
jQuery.ajax(
{
type: 'GET',
url: 'Youtube_category.php',
dataType: 'JSON',
success:function(data)
{
for(i=0;i<jQuery(data).length;i++)
{
$('#parentCategory').append('<option value = '+ data[i].categoryName+'>' + data[i].categoryName + '</option>');
}
}
});
});
</script>
<script>
jQuery(document).ready(function()
{
jQuery('#parentCategory').change(function()
{
jQuery("#subCategory").load("subCategory.php?choice="+jQuery("#parentCategory").val());
});
});
</script>
<script>
function showDiv() {
var SubCategory = document.getElementById('subCategory');
for (i = 0; i < SubCategory.options.length; i++) {
document.getElementById('sidebar-left').innerHTML += SubCategory.options[i].value + "<br/>";
}
}
</script>
<!-- <script>
function showDiv() {
document.getElementById('sidebar-left').style.display = "block";
var index = document.getElementById('subCategory').selectedIndex;
var selectedText = document.getElementById('subCategory').options[index].innerHTML;
document.getElementById('sidebar-left').innerHTML = selectedText;
}
</script> -->
<script>
$(document).ready(function() {
$('body').on('click', '#sidebarleft', function() {
$("#display").load("vedio_details.php?Id=1");
});
});
</script>
<form id="form1">
<div id="header" >
<select id="parentCategory" value="parentCategory" class="button2" name="category">
<option selected="selected" name="category" value="selected">--Select category--</option>
</select>
<select id="subCategory" class="button2" name="subCategory">
<option selected="selected" name="subCategory" value="selected">--Select subCategory--</option>
</select>
<input type="button" name="answer" value="Go" class="button2" onclick="showDiv()" />
</div>
<a id="sidebarleft" href="vedio_details.php" class="sidebr">
<div id="sidebar-left" ></div>
</a>
<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>