Sub Cat List get vanish when click on a sub cat name

[zohrapardesi]

Hi Guys, if anybody there to help me out in the issue below please:

I am learning PHP/PDO via project in youtube. by learning project I have created code below which is all fine but as soon as I click on a sub category, it shows products into center column but sub category list get vanish, I don't know what mistake I have done, I tried everything to redirect it to its own location i.e. into the left column but remain unsuccessful. it will be appreciated if someone help me in resolving the issue. code is here below:

function for sub cat list:

     function list_all_subcat(){

include("includes/dbconn.php");

if(isset($_GET['cat_id'])){

$cat_id=$_GET['cat_id'];

$subcat_list=$conn->prepare("select * from sub_cat where cat_id='$cat_id'");

$subcat_list->setFetchMode(PDO:: FETCH_ASSOC);

$subcat_list->execute();

while($row_subcat_list=$subcat_list->fetch()):

echo "<li><a href='cat-detail.php?subcat_id=".$row_subcat_list['sub_cat_id']."'>".$row_subcat_list['sub_cat_name']."</a></li>";

endwhile;

}

}   

function called into left column:

<div id="bodyleft">

<div id="leftup">

<h2>Categories</h2>

        <ul>

<?php echo list_all_cat(); ?>

        </ul>

</div>

<div id="leftdown">

      <h2>Sub Categories</h2>

        <ul>

            <?php echo list_all_subcat(); ?>

        </ul>

</div>

</div>

cat-detail.php cpntains below code in body:

<div id="bodycontainer">

    <?php

include('includes/bodyleft.php');

include('includes/bodycenter.php');

include('includes/bodyright.php');

?>

</div>

bodycenter contains below code in body:

<div>

    <ul><?php echo cat_detail();?></ul><br clear='all'> //this will show details into center

    <ul><?php echo subcat_detail();?></ul><br clear='all'>

</div>

Everything is working fine When I click on a Category in left column up, category list remain there and shows the related Sub Category which is OK

But when I click on a Sub Category into sub cat List then everything works fine except sub cat list which go went gone and I again need to click on category. I want this list remain until i click on another category into the category list above in left column Up.

I remain failed to resolve this issue if anybody can help in this I will be thankful to him/her please.

[osgood_ · Accepted solution]

I don't really understand the question and neither does anyone else judging by the feeback so far. You need to provide a url to the page where this is happening  - but at a guess what is happening is the page is reloading to cat-details.php and when it does that the sub category will not be open until you click on the top level category again.

<li><a href='cat-detail.php?subcat_id=".$row_subcat_list['sub_cat_id']."'>".$row_subcat_list['su b_cat_name']."</a></li>

You need to use Ajax in combination with the php to process the information from the database and pass it back to the centre column then your sub-categories will remain visible because when you use Ajax the page does NOT reload.

[B i r n o u]

yes you're right OS...

zohrapardesi  you should use AJAX instead... that will be more appropriate, and most in a rich user experience

[zohrapardesi]

Dear osgood, Thanks for your time, I am thankful to you.

your guess is 100% right, thats what I was asking, and thanks for the suggestion regarding AJAX; although, I am little scared as I started learning PHP then it came to know I need to learn PDO, I have now started learning PDO along with PHP and now AJAX, I wish and Pray someday I be able to make my dynamic website.....Aahhhh looks difficult but well,,,, its not impossible, Thanks Sir

[B i r n o u]

well I canno't be formal on this one, but depending on the type of app that you need to develop, you could only focus on JavaScript and develop your app only (at least on major part of it) on client side, then only rely using PHP/PDO to read write your datas... (either if you could also rely on a pure JavaScript server side solution too)... but that is also true that most of the average remote mutual hosting web server propose in most case SQL database.

so that to say, that AJAX is only a client side asynchrone request... in short, when you send a classic http request, the client hang until the server send any feedback, and then reload the entire page... (the reason that you loose your sub list focus)... on the opposite, a XMLhttRequest (the http request send by 'AJAX') is a asynchrone request type, that do mean, that once the resquest is send... the client continue to live his own life, waiting to catch up the feedback on the fly and can integrate it as he likes on the DOM structure (without having to reload the page)

now if you mix and merge AJAX technics with all the new JavaScript Client Sode API (from HTML5) ... have some look at and/or HTML 5 JavaScript API Index and/or HTML5 Landscape Overview - dretblog  you'll see that everything to develop an app is here under the use of JavaScript. You have a lot of material out there to learn it... look for SPA (stand for Single Page web Application)

I agree now that it makes a long road to learn all that before mastering it... but blieve it or not, it is easiest than it seams... and JavaScript is a real simple and intutive language.

I don't know if we can do that on this forum, but I can orient you on some author that help me to kick over this language...

[pziecina]

Hi Birnou,

It is o/k to recommend courses, books, tutorials, videos, in forum answers, the only stipulation is that the recommendations must be relevant to the question asked.

[osgood_]

zohrapardesi  wrote

Dear osgood, Thanks for your time, I am thankful to you.

your guess is 100% right, thats what I was asking, and thanks for the suggestion regarding AJAX; although, I am little scared as I started learning PHP then it came to know I need to learn PDO, I have now started learning PDO along with PHP and now AJAX, I wish and Pray someday I be able to make my dynamic website.....Aahhhh looks difficult but well,,,, its not impossible, Thanks Sir

I dont use pdo I use mysqli but it doesn't matter, the principle is the same..

You do everything as you would normally do but use jquery 'load' to load the php database query script page.

Say you have a sub-menu where you want to get specific information from your database based on the link clicked by the user. You would pass that information to the php script page by using a data-attribute applied to the link, in the example below - data-category="Cat", data-category="Dog" etc

<ul class="sub_menu">
<li><a href="#" data-category="Cat">Cats</a></li>
<li><a href="#" data-category="Dog">Dogs</a></li>
<li><a href="#" data-category="Rabbit">Rabbits</a></li>
</ul>

You get the value of the data-category using jquery and assign it to a variable name 'category' see below.

$(document).ready(function () {

//when sub-menu a is clicked
$('.sub_menu a').css('cursor', 'pointer').click(function () {

// get value of data-category and assign to a variable named category
var category = $(this).attr('data-category');

// load content.php into a container with the class main_content and pass category to the php script
$('.main_content').load('contents.php', {
category: category
});
});
});

Below is the mysqli database query which is in the content.php which gets the value of category from the jquery passed to it using $_POST

mysqli_query($conn, "SET NAMES 'UTF8'") or die("ERROR: ". mysqli_error($conn));
$category = $_POST['category'];
$sql = "SELECT * FROM animals WHERE category = '".$category."'";
$result = $conn->query($sql) or die($conn->error);
$number_of_results = $result->num_rows;

<?php

// echo out the results

while ($row = $result->fetch_assoc()) { ?>
<?php echo "<p><strong>Category: </strong>".$row['category']."</p>"; ?>
<?php echo "<p><strong>Name: </strong> ".$row['name']."</p>"; ?>
<?php echo "<p><strong>Age: </strong>".$row['age']."</p>"; ?>
<?php } ?>

[zohrapardesi]

hmmmm! Thanks osgood.

Detail is already show via cat-detail.php

cat-detail.php includes bodyleft.php

bodyleft is divided into 2 divs, upper div shows category list while lower div shows sub category list.

when click on category list, it doesn't go vanish but when click on sub category it loads cat-detail.php and go vanish, I am afraid if my cat-detail.php already have include bodyleft.php then why it get vanish.

[osgood_]

zohrapardesi  wrote

hmmmm! Thanks osgood.

Detail is already show via cat-detail.php

cat-detail.php includes bodyleft.php

bodyleft is divided into 2 divs, upper div shows category list while lower div shows sub category list.

when click on category list, it doesn't go vanish but when click on sub category it loads cat-detail.php and go vanish, I am afraid if my cat-detail.php already have include bodyleft.php then why it get vanish.

Lets try something more simpler so you get the idea of how things work. Below is the code for loading 'sub category pages' into a <div> on the same page, without the page refreshing.

Forget the database at the moment. Once you get the idea then you can link in the database. You will have to create the pages which load into the <div> - they are cat_1.php, cat_2.php, cat_3.php and dog_1.php, dog_2.php and dog_3.php. Nothing need go in these pages apart from a header - Cat 1, Cat 2, Cat 3 and Dog 1, Dog 2, Dog 3, simply for testing purposes and to identify the correct page has loaded into the <div>

You will see the sub-category menu remains visible after loading the correct page into the <div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Load</title>
<style>
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 90%;
margin: 0 auto;
}
nav {
width: 40%;
background-color: #0091AC;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
background-color: #0091AC;
display: block;
color: #fff;
text-decoration: none;
padding: 15px;
border-bottom: 1px solid #fff;
}
nav ul li ul {
display: none;
}
.main_content {
width: 60%;
background-color: #f2f2f2;
padding: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
/* MAIN MENU */
$(document).ready(function () {
$('nav li a').css('cursor', 'pointer').click(function () {
$('.sub_menu').hide();
$(this).next('.sub_menu').show();
});
});
/* SUB MENU */
$(document).ready(function () {
$('.sub_menu a').css('cursor', 'pointer').click(function () {
$(this).closest('ul').show();
var category = $(this).attr('data-category');
$('.main_content').load(category);
});
});
</script>
</head>
<body>

<div class="wrapper">
<nav>
<ul>
<li><a href="#">Cats</a>
<ul class="sub_menu">
<li><a href="#" data-category="cat_1.php">Cat 1</a></li>
<li><a href="#" data-category="cat_2.php">Cat 2</a></li>
<li><a href="#" data-category="cat_3.php">Cat 3</a></li>
</ul>
</li>
<li><a href="#">Dogs</a>
<ul class="sub_menu">
<li><a href="#" data-category="dog_1.php">Dog 1</a></li>
<li><a href="#" data-category="dog_2.php">Dog 2</a></li>
<li><a href="#" data-category="dog_3.php">Dog 3</a></li>
</ul>
</li>
</ul>
</nav>

<section class="main_content">


</section>
<!-- end main_content -->


</div>
<!-- end wrapper -->

</body>
</html>

[zohrapardesi]

Dear osgood, I am really thankful to you for such a hard work and time you are giving me and all the ones who need help, Very much appreciated Sir.

I will try your code; As you see I visited here after couple of days, what I did in these days is I changed the ideas and initial structure.

I understood that my idea is hard to implement in this stage where I am just a beginner and in learning process so, I should employ easy way. what i did is I made a separate page with the name sep-sub-cat with the same theme like cat list page and placed text like "back to categories" link.

For Now It looks OK although, I do not like it much and yes, once my first website will be ready then I will try to update things like i want.

Thanks again,

Regards,