Combine Jquery In Php For Displaying A Collapsible List Fetched From Database
The following program is supposed to display the subjects and subcategory in collapsible list order. But the collapsible list is applied for the first entry only. The rest of the i
Solution 1:
The jQuery find() method only gives you the first element that matches the selector. If you want all the tags under #subj_tree to be hidden, you would have to use
$('#subj_tree ul').hide();
Solution 2:
You can't trigger a click using find() function. You should use this function instead:
$('#subj_tree > li > span').click(function() {
$(this).parent().children('UL').toggle();
});
Solution 3:
It's because your structure is completely wrong. Your code is also wildly inefficient. Also, you are including jquery twice. That probably doesn't do much good!
Your script tag also isn't closed and it should be included within the body.(something you are also missing) Can you try it like this?:
<html><head><scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script><style>#subj_treeul {display: none;}</style></head><body><?php$con = mysqli_connect("localhost", "root", "", "test");
$sql = "select * from subject";
$res_subject = mysqli_query($con, $sql);
while( $row = mysqli_fetch_array($res_subject) ) {
?><ulid="subj_tree"><li><span><?phpecho$row['sub_name']; ?></span><ul><?php$sql = "select * from sub_categry where sub_id=" . $row['sub_id'];
$res_sub_cat = mysqli_query($con, $sql);
while( $val = mysqli_fetch_array($res_sub_cat) ) {
?><li><span><?phpecho$val['sub_cat_name']; ?></span></li><?php } ?></ul></li></ul><?php
}
?><scripttype="text/javascript">
$(function () {
$('#subj_tree > li span').on("click", function (e) {
var parent = $(this).parent();
$('ul', parent).toggle();
});
});
</script></body></html>see this JSFiddle for a working example; https://jsfiddle.net/qum571nn/
Post a Comment for "Combine Jquery In Php For Displaying A Collapsible List Fetched From Database"