Show specific php data when clicked

user_8928297 0
Viewed 314

I've displayed all of my items from the database using PHP, but I want to make a popup that will show the clicked data it can be triggered by clicking the item-container or order button, without refresh it or go to another link. I have a unique ID for each item but don't really understand how to fetch the data when clicked then display it on the popup.

<?php foreach($menu as $row) : ?>
    <div class="item">
        <img src="mcd/<?= $row["image"]; ?>" alt="" class="item-image">
        <div class="item-detail">
            <div class="item-name"><?= $row["item"]; ?></div>
            <div class="item-price"><?= $row["price"]; ?></div>
            <div class="item-order">
                <!-- <button class="order"> -->
                Order >>
            <!-- </button> -->
            </div>
        </div>
    </div>
<?php endforeach; ?>
<!-- The popup -->
<div class="popup-container hide">
    <div class="popup-wrapper">
        <div class="popup-image">
            <img src="this-image.jpg" alt="">
        </div>
        <div class="popup-name">
            This Name
        </div>
        <div class="popup-price">
            This Int
        </div>
        <div class="order-container">
            <div class="value-container">
                <button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
                <div class="value">1</div>
                <button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
            </div>
            <button class="orderBtn">Add To Cart</button>
        </div>
    </div>
</div>

edit: added some js code here. It's basically just a simple popup event.

function order() {
    let items = document.querySelectorAll('.item');
    let popup = document.querySelector('.popup-container');
    let orderBtn = document.querySelector('.orderBtn');
    let cartIcon = document.querySelector('.cart-icon');
    items.forEach((item) => {
        item.addEventListener('click', ()=>{
            popup.style.display = 'block';
            window.addEventListener('click', (e)=>{
                if (orderBtn.contains(e.target)) {
                    popup.style.display = 'none';
                    cartIcon.src = 'icon/cart-bill.png';
                }
                if (e.target.classList.contains('popup-container')) {
                    document.querySelector('.popup-container').style.display = 'none';
                }
            })
        })
    });
} order();
php javascript
1 Answers

When you have multiple items to show you can generate a 'unique' popup div for each item and use a javascript function to show and hide the popup div .

In your case you can put the .popup-container hide div inside the foreach loop and give it a unique id like $row["item"] Assuming every item is unique. make sure that the hide class on your popup div actually hides the div for example :

hide{ display: none; }

Then put an onclick event on the button that will show and hide the popup div and pass the popup unique id to the function so in your case :

<button class="order" onClick="popupFunction('<%= $row["item"] %>')">

Now just write a javascript function to handle the onclick event to show and hide the popup div, in this example i assign the popup div unique id to itemId and then i use it to get the popup div and assign it to popupContainer . then i simply check if the div is hidden or not by checking if it contains the hide class - if it does i remove the class to show the popup div if it doesn't then i add the class to hide the popup div .

function popupFunction(itemId) {
  var popupContainer = document.getElementById(itemId);
  if (popupContainer.classList.contains('hide')) {
    popupContainer.classList.remove('hide');
  } else {
    popupContainer.classList.add('hide');
  }
}
user_81001880
Related