Page 1 of 1

How to pass a php variable to a popup window

Posted: Sat May 07, 2016 10:55 am
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

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

Posted: Sat May 07, 2016 12:25 pm
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?

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

Posted: Sat May 07, 2016 1:28 pm
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?

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

Posted: Sat May 07, 2016 2:02 pm
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?

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

Posted: Sun May 08, 2016 8:13 am
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