Hozington Hozington - 28 days ago 4
HTML Question

JavaScript Popup window display inside PHP IF Function without onClick

I was following a tutorial on YouTube about how to display a popup box after the click of a button. It was fairly simple but now I want to twist things a little bit. I want to display the markup inside a PHP IF function.

I believe that creating a JavaScript function would be the road to follow but I am not proficient in JavaScript/jQuery as I am only starting with it now.
I want to display the following markup should my PHP IF function equate to TRUE

<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p><a href="javascript:void(0)">Close popup</a></p>
</div>
</div>
</div>


The following JavaScript function is used in the tutorial that I was following. It works perfectly when it is triggered by onClick.

<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>


I have the following PHP script

function cart($userEmailAdd){
global $dbc; // database connection variable
/*
Verify if the product that is being added already exists in the cart_product table.
Should it exist in the cart then display popup box with an appropriate
message.

Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];

$queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND cpProductid = '$productID'";

$executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));

if(mysqli_num_rows($executeCheckCart) > 0 ){

/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/

?>
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p><a href="javascript:void(0)">X</a></p>
</div>
</div>
</div> <!-- -->
<?php

} else {

$query = "INSERT INTO cart..." ;
// rest of script continues after this for insertion of the product


How do I go about using the same function or a similar one without using onClick to display the markup?

Answer

You can do something similar to this:

function cart($userEmailAdd){
global $dbc; // database connection variable
/* 
 Verify if the product that is being added already exists in the cart_product table.
 Should it exist in the cart then display popup box with an appropriate 
 message. 

 Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];

    $queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND  cpProductid = '$productID'"; 

    $executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));

    if(mysqli_num_rows($executeCheckCart) > 0 ){

    /* IF MYSQLI_NUM_ROWS is greater than zero then 
    it means that the product already exists in the cart_product table. 
    Then display following markup*/

        ?>
         <script>
            $(document).ready(function(){
                toggle_visibility('popup-box');
            });
        </script>
        <div id="popup-box" class="popup-position">
            <div class="popup-wrapper"> <!-- move away from screen and center popup -->
                <div class="container"> <!-- backgorund of pop up -->
                    <h2>Pop box<h2>
                    <p><a href="javascript:void(0)">X</a></p>
                </div>
            </div>
        </div> <!-- -->
        <?php 

    } else {

        $query = "INSERT INTO cart..." ;
        // rest of script continues after this for insertion of the product

All you have to do is to tell javascipt that it has to open popup. Here, I made Javascript run function toggle_visibility('popup-box'); after the document loads.

The popup div doesn't have to be inside php's IF statement. And instead of using $(document).ready(function(){ }); you can use onLoad="toggle_visibility('popup-box')" attribute in <body> element.