Actually i have the two divs on left side div i will dispaly the subcategories.Then 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
<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>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)