JavaScript Popup window display inside PHP IF Function without onClick

Question

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 1

Instead of executing the html block within the php if clause, you could use a simple boolean variable to indicate whether or not to show the popup:

$showPopup = false;

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*/

    $showPopup = true;

 ?>

 <?php 

} else {

Then in your html code you could show the popup based on what the $showPopup has been set to:

<div id="popup-box" <?php echo ($showPopup === false)? 'style="display:none"' : '' ?> class="popup-position">

</div>

Answer 2

you can just add inline css display:block so that the popup is displayed by default when page load.

<div id="popup-box" style="display:block" class="popup-position">

and then edit the close button of the popup to tell him to call toglle_visibility() onclick

<p><a href="javascript:toogle_visibility('popup-box')">X</a></p>

of course you will need yo put your toggle_visibility() function in a script tag (better before the closing body element)

<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>

Answer 3

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.