How to pass a php variable to a popup window

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

How to pass a php variable to a popup window

Post by adsegzy »

Hello,

I am working on an online store. Each product has QUICK VIEW link which popup the product detail in a popup window. But am finding it difficult to make the popup show the detail of the particular product clicked. Below are my codes.

Code: Select all

$get_items = mysqli_query($my_link, "SELECT * FROM $table ORDER BY id DESC);
while($row=mysqli_fetch_array($get_items)){

$id = stripslashes($row[id]);
$category = stripslashes($row[category]);
$type = stripslashes($row[type]);
$product = stripslashes($row[name]);

echo "<a href='detail.php?id=$id'>".$product."</a>";
echo $category
<a class="preview" href="#product-preview" data-toggle="modal" ></a>

}

/* I REPLACED
<a class="preview" href="#product-preview" data-toggle="modal" ></a>

WITH
<a class="preview" href="id=$id#product-preview" data-toggle="modal" ></a>

AND ALSO
<a class="preview" href="#product-preview&id=$id" data-toggle="modal" ></a>

BUT DIDN'T WORK
*/
Below is my popup code

Code: Select all

<?php
$id = $_GET[id];

$get = mysqli_query($my_link, "SELECT * from products WHERE id='$id'");
$row = mysqli_fetch_array($get);
$id = stripslashes($row[id]);
$category = stripslashes($row[category]);
$product = stripslashes($row[name]);

?>

<div class="modal fade" id="product-preview" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content space-40">
                        <a aria-hidden="true" data-dismiss="modal" class="sb-close-btn close fa fa-times" href="#"></a>
                        <!--<button aria-hidden="true" data-dismiss="modal" class="close sb-close-btn" type="button"><i class="fa fa-times"></i></button>-->
                        <!-- Single Products Start -->
                        <div class="clearfix"></div>
                        <section id="product-fullwidth" class="clearfix"> 
                            <div class="single-product-wrap">      
                                <div class="list-category-details">                               
                                    <div class="col-md-7 col-sm-7">                                  
                                        <!-- Main Slider Start -->
                                        <section id="main-slider1" class="carousel slide main-slider">  
                                            <!--Carousel Slide Button Start-->
                                            <div class="slider-pagination col-md-2 col-sm-3  col-xs-3">                
                                                <ul class="product-thumbnails">
                                                    <li  data-slide-to="0" data-target="#main-slider1">
                                                        <a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb1.png"></a></li>
                                                    <li class="active" data-slide-to="1" data-target="#main-slider1">
                                                        <a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb2.png"></a></li>
                                                    <li data-slide-to="2" data-target="#main-slider1">
                                                        <a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb3.png"></a></li> 
                                                    <li data-slide-to="3" data-target="#main-slider1">
                                                        <a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb4.png"></a></li> 
                                                </ul>  
                                            </div>    
                                            <div class="col-md-10 col-sm-9  col-xs-9">
                                                <div class="carousel-inner product-fullwidth light-bg slider">
                                                    <div class="item">  
                                                        <img src="assets/img/product/single-prod1.png" alt="...">
                                                    </div>     
                                                    <div class="item active">  
                                                        <img src="assets/img/product/single-prod1.png" alt="...">  
                                                    </div> 
                                                    <div class="item">  
                                                        <img src="assets/img/product/single-prod1.png" alt="..."> 
                                                    </div> 
                                                    <div class="item">  
                                                        <img src="assets/img/product/single-prod1.png" alt="..."> 
                                                    </div> 
                                                </div>
                                            </div>

                                        </section>
                                        <!-- / Main Slider Ends -->                                      
                                    </div>
                                    <div class="col-md-5 col-sm-5">
                                        <div class="product-content">
                                            <div class="rating">                                                              
                                                <span class="star active"></span>
                                                <span class="star active"></span>
                                                <span class="star active"></span>
                                                <span class="star half"></span>
                                                <span class="star"></span>
                                                <div class="product-review">
                                                    <ul>
                                                        <li>03 Review </li>
                                                        <li> | <a href="#"> Add Your Review </a> </li>
                                                    </ul>
                                                </div>
                                            </div>                                            
                                            <div class="product-name">
                                                <a href="#"><?php echo $product; ?></a>                                              
                                            </div>
                                            <div class="product-price">
                                                <h4 class="pink-btn-small price-line"> $50.00 </h4>
                                                <h4 class="blue-btn-small"> $45.00 </h4>
                                            </div>
                                            <div class="product-availability">
                                                <ul class="stock-detail">
                                                    <li>Available:<strong class="green-color"> <i class="fa fa-check-circle"></i> In Stock </strong> | </li>
                                                    <li>Product Id:<?php echo $_GET[pid]; ?><strong> #201546 </strong> </li>
                                                </ul>
                                                <hr class="fullwidth-divider">                                            
                                            </div>
                                            <div class="product-size">
                                                <form class="product-form">
                                                    <div class="row">
                                                        <div class="form-group selectpicker-wrapper">
                                                            <label>SIZE</label>
                                                            <select title="Looking to Buy" data-toggle="tooltip" data-width="100%" data-live-search="true" class="selectpicker input-price bs-select-hidden"><option class="bs-title-option" value="">2 - 4 Years</option>
                                                                <option>4 - 6 Years</option>
                                                                <option>6 - 8 Years</option>
                                                                <option>8 - 10 Years</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group selectpicker-wrapper">
                                                            <label>QTY</label>
                                                            <select title="Looking to Buy" data-toggle="tooltip" data-width="100%" data-live-search="true" class="selectpicker input-price bs-select-hidden"><option class="bs-title-option" value="">02</option>
                                                                <option>03</option>
                                                                <option>04</option>
                                                                <option>05</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </form>
                                                <div class="widget-colors">
                                                    <span>Colors:</span>
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="brown"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="light"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="dark"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="orange"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="blue"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="yellow"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="green"> <span></span></label> 
                                                    <label class="rcheckbox-inline"><input type="checkbox" value="" id="white"> <span></span></label> 
                                                </div>
                                                <hr class="fullwidth-divider">   
                                            </div>                                            
                                            <div class="add-to-cart">
                                                <a class="blue-btn btn" href="#"> <i class="fa fa-shopping-cart white-color"></i> Add to Cart</a>
                                                <a class="pink-btn btn" href="product-single-fullwidth.html"> Go To Details </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>     
                            </div>            
                        </section>
                        <!-- Single Products Ends -->
                    </div>
                </div>
            </div>
Thanks
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How to pass a php variable to a popup window

Post by Celauran »

What's happening instead? I'm seeing a fixed ID inside a loop which is already going to lead to problems. Looks like you're also trying to load a separate page inside the modal?
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

Re: How to pass a php variable to a popup window

Post by adsegzy »

Thanks Celauran,

It's not echoing out the product name, product name is blank. Other default parameters are showing
<?php echo $product; ?>

I believe once i can echo the product name, i will be able to echo the rest.

Or which other way will you suggest?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How to pass a php variable to a popup window

Post by Celauran »

How are you attempting to populate the contents of the modal? This looks to be the root cause of why you're not seeing anything. Where is $_GET['id'] coming from? Are you populating the modal in advance and just triggering the display? Are you fetching the data on demand and populating right before display? If so, how?
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

Re: How to pass a php variable to a popup window

Post by adsegzy »

Thanks Celauran,

Each product has a link to be clicked in order for the popup to come out which is
<a class="preview" href="#product-preview" data-toggle="modal" ></a>

But I tried modifying the link to read
<a class="preview" href="id=<?php echo $id; ?>#product-preview" data-toggle="modal" ></a>

Or how do you think I can go about it. Just tell me the way you think is the best.

Thanks
Post Reply