Php - Tab Panel don't show

153 views Asked by At

I have a problem with my Php code and work on it for several days now, so if you can help me, it will be with great pleasure!

I have a database with two tables: items and categories, both with a relation on the number of the category (maybe this is the pb, I tried to modify the relation, but same no resolution of pb )

The site I am trying to create is in Tab Panel form, but if my page works and displays the first Menus tab with the correct content underneath, nothing happens when I click on the other tabs.

Thanks for your help.

My code :

<body>

<div class="container site">

    <h1 class="title"><i class="bi bi-lightning"></i> Burger Code <i class="bi bi-lightning"></i></h1>

    <?php 

    require 'Admin/database.php';

    echo    '<nav>
            <ul class="nav nav-pills red" id="myTab">';

            $db = Database::connect();
            $statement = $db->query('SELECT * FROM categories');
            $categories = $statement->fetchAll();

            foreach($categories AS $category)
            {
                if($category['id'] == '1')
                    echo '<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href=" #'. $category['id'] . '" >'. $category['name'] . '</a></li>';
                else
                    echo '<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#'. $category['id'] . '" >'. $category['name'] . '</a></li>';
            }
                    
            echo '</ul> </nav>';


            echo '<div class="tab-content" id="myTabContent">';

                foreach ($categories AS $category) 
                {
                    if($category['id'] == '1')
                        echo '<div class="tab-pane active" role="tabpanel" id="' . $category['id'] .'">';
                    else
                        echo '<div class="tab-pane" role="tabpanel" id="' . $category['id'] .'">';
                        
                        echo '<div class="row">';
                        
                        $statement = $db->prepare('SELECT * FROM items WHERE items.category = ?');
                        $statement->execute(array($category['id']));

                        while ($items = $statement->fetch()) 
                        {
                            echo    '<div class="col-md-6 col-lg-4">
                                        <div class="thumbnail">
                                            <img src="Images/' . $items['image'] . '" style="width:100%" alt="...">
                                            <div class="price">' . number_format($items['price'], 2, '.', ''). ' €</div>
                                            <div class="caption">
                                                <h4>' . $items['name'] . '</h4>
                                                <p>' . $items['description'] . '</p>
                                                <a href="#" class="btn btn-order" role="button"><i class="bi bi-cart"></i> Commander</a>
                                            </div>
                                        </div>
                                    </div>';
                        }
                       
                       echo '</div>
                            </div>';
                }

                   

            Database::disconnect();
                    
            echo  '</div>';
    ?>
            
</div>
            
2

There are 2 answers

3
milenmk On

Your second div, that creates the content is outside the first foreach. That means it will be executed only once for the first tab. So your site behaves as expected in your code. Try this:

<body>

    <div class="container site">

        <h1 class="title"><i class="bi bi-lightning"></i> Burger Code <i class="bi bi-lightning"></i></h1>

        <?php

        require 'Admin/database.php';

        echo    '<nav>
            <ul class="nav nav-pills red" id="myTab">';

        $db = Database::connect();
        $statement = $db->query('SELECT * FROM categories');
        $categories = $statement->fetchAll();

        foreach ($categories as $category) {
            if ($category['id'] == '1') {
                echo '<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href=" #' . $category['id'] . '" >' . $category['name'] . '</a></li>';
                echo '<div class="tab-content" id="myTabContent">';
                echo '<div class="tab-pane active" role="tabpanel" id="' . $category['id'] . '">';
                echo '<div class="row">';
                $statement = $db->prepare('SELECT * FROM items WHERE items.category = ?');
                $statement->execute(array($category['id']));
                while ($items = $statement->fetch()) {
                    echo    '<div class="col-md-6 col-lg-4">
                                                <div class="thumbnail">
                                                    <img src="Images/' . $items['image'] . '" style="width:100%" alt="...">
                                                    <div class="price">' . number_format($items['price'], 2, '.', '') . ' €</div>
                                                    <div class="caption">
                                                        <h4>' . $items['name'] . '</h4>
                                                        <p>' . $items['description'] . '</p>
                                                        <a href="#" class="btn btn-order" role="button"><i class="bi bi-cart"></i> Commander</a>
                                                    </div>
                                                </div>
                                            </div>';
                    echo '</div></div>';
                }
                Database::disconnect();
                echo  '</div>';
            } else {
                echo '<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#' . $category['id'] . '" >' . $category['name'] . '</a></li>';
                echo '<div class="tab-content" id="myTabContent">';
                echo '<div class="tab-pane" role="tabpanel" id="' . $category['id'] . '">';
                echo '<div class="row">';
                $statement = $db->prepare('SELECT * FROM items WHERE items.category = ?');
                $statement->execute(array($category['id']));
                while ($items = $statement->fetch()) {
                    echo    '<div class="col-md-6 col-lg-4">
                                                <div class="thumbnail">
                                                    <img src="Images/' . $items['image'] . '" style="width:100%" alt="...">
                                                    <div class="price">' . number_format($items['price'], 2, '.', '') . ' €</div>
                                                    <div class="caption">
                                                        <h4>' . $items['name'] . '</h4>
                                                        <p>' . $items['description'] . '</p>
                                                        <a href="#" class="btn btn-order" role="button"><i class="bi bi-cart"></i> Commander</a>
                                                    </div>
                                                </div>
                                            </div>';
                }
                echo '</div></div>';
                Database::disconnect();
                echo  '</div>';
            }
        }
        ?>

    </div>
0
Stoule_dev On

I found the solution, I modified the id where the tabs pointed and put "category name " instead of "category id". Perhaps the fact that it was figure caused the problem. _ PROBLEM SOLVED _