I want to display the related data from database when we click on the display sub categories.That related data should display in the another div as i mentioned in the code "content".This is the data i have in the data base [{"id":"1","CategoryName":"maths","SubCategoryName":"algebra","Title":"maths","Description":"tis is good","ThumbnailUrl":"www.studies.com","VideoId":"studies"},{"id":"2","CategoryName":"sports","SubCategoryName":"cricket","Title":"Games","Description":"playing","ThumbnailUrl":"www.youtube.com","VideoId":"sports"},{"id":"3","CategoryName":"science","SubCategoryName":"physics","Title":"physics","Description":"It is good sub","ThumbnailUrl":"www.physics.com","VideoId":"studies"},{"id":"4","CategoryName":"social","SubCategoryName":"history","Title":"history","Description":"It is good sub","ThumbnailUrl":"www.history.com","VideoId":"studies"}].
This is the code i tried
<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/>";
}
var subCategorySelectedText = document.getElementById('subCategory').options[subCategory];
var subCategoryId = document.getElementById('subCategory').options[subCategory].id
document.getElementById('id').value = subCategoryId;
document.getElementById('ParentCategoryText').value = parentCategorySelectedText;
document.getElementById('SubCategoryText').value = subCategorySelectedText;
document.getElementById('sidebar-left').innerHTML = subCategorySelectedText;
}
function getValues(){
var id = document.getElementById('id').value;
var parentCategoryText = document.getElementById('ParentCategoryText').value;
var subCategoryText = document.getElementById('SubCategoryText').value;
}
</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" id="0" value="selected">--Select subCategory--</option>
</select>
<input type="button" name="answer" value="Go" class="button2" onclick="showDiv()" />
</div>
<input type="hidden" id="id">
<input type="hidden" id="ParentCategoryText">
<input type="hidden" id="SubCategoryText">
<div id="sidebar-left" >
<span><a id="sidebarleft" href="#" onclick="getValues()">
</span>
</div>
</a>
<div id="content"> content </div>
<div id="footer"> footer </div>
</div>
</head>
</form>
</body>
</html>
Submit an article or tip