I need help passing row from a mysql database into a div popup window?
how doI pass product id into popup div which I call through View?
For Example I Want Like This
View</li>
Here My Code
<div class="latest_products_sec">
<div class="latest_products">
<div class="title_box">
</div>
<!--Latest Products Slider -->
<div class="latest_pro_box">
<h4>Latest Shirt's Collection</h4>
<div class="latest_products_slider">
<?php
$queryshirt=mysql_query("select image,id from products
where cid='1' LIMIT 5") or die ('die shirt query');
while($rowshirt=mysql_fetch_array($queryshirt))
{
echo '<ul>';
echo '<li><img src="admin/'.$rowshirt['image'].'"
width="225" height="300" alt="" />
View</li>';
echo '</ul>';?>
}
?>
#shirt Div Popup Window
<div id="shirt" class="proquickview">
<span class="close_btn" onclick="parent.jQuery.fancybox.close();">Close</span>
<h2 class="title">quick view</h2>
<div class="quickviewinfo">
<?php
// I Need To Get ID Here
echo $id=$_REQUEST['id'];
?>
<div class="quickviewinforight">
<div class="titlerow">
<h2>Latest Shirt's Collection</h2>
<div class="start_ratings">
<div class="start_rating">
</div>
</div>
<div>
<div class="quick_review">
<h3>Quick Discription</h3>
<p>TEST.</p>
</div>
<div class="qty_row">
<div class="qty_field">
<label>Select Quantity</label>
<span>
<select name="S">
<option>5</option>
</select>
</span>
</div>
<br class="clear" />
<span class="total_price">Price <strong>$88.00</strong>
<del>$102.00</del></span>
ADD TO CART
</div>
<div class="total_price_row">
</div>
</div>
</div>
</div>
Javascript For Popup Window
$(document).ready(function() {
$(".view_btn").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
$(document).ready(function(){
// Cufon Functions //
Cufon.replace ('.latest_products_slider ul li a.view_btn',{hover:true});
});
You can use new 'echo'
echo 'View</li>';
instead of using this
echo '<li><img src="admin/'.$rowshirt['image'].'" width="225" height="300" alt="" />
View</li>';
combined 'echo' statement for image and link to View
Use jQuery .load function. Then make a hidden div, tgen on an action, use the load function to load the hidden div and change the css selection to visible. Very simple, add effects as well.
Related
I understand foreach but this is new for me because within the foreach in PHP I have some script for each item that shows up and wondering why it only works for the item in the first item
In the code, I am getting an image from an MYSQL database. instead of using onclick in js I am learning more into jquery and only when I click the first image it will generate the
$("#main").load("includes/product.php");
path and change I want to change but in the product name and the cart button do not change the visuals.
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( "#product-link" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>
Expected:
I am wanting each link with the id of product-link to give the event trigger with jquery on each product and each id
Actual Results:
$("#main").load("includes/product.php");
only works on the first id that is equal to product-link
because of you have 3 like for each item and you want to set on click for every 3 link, you must use class attribute and set it unique for each item.
I changed your code to this:
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $key=>$items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( ".product-link-<?=$key?>" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>
Found the answer was
<script>$( ".product-box a" ).click(function() {
$("#main").load("includes/product.php");
});</script>
since product-bot was a class and I didn't realize the # makes it check for id and the. makes it search for a class and class is able to be called multiple times whereas an id has to be unique
I created a menu with links (#) which aims to show & hide a div thanks to the onclick attribute.
For example the link "home" can hide/show the div "contentHome", the link "contact" can hide/show the div "contentContact".
The problem I have is that the container div "content" includes the div "contentHome" and "contentContact" when i click on the 2 links one time...
Here is a part of my code :
<li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">
<img src="Images/photo.jpg" class="imgphoto" alt="Simplepic" />
<?php echo $lang['TEXTE_ACCUEIL'];?>
<img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" />
<?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
...
</div>
</div>
The position is static, I can't put a z-index and when I put display:none;, divs don't want to load.
What do you think ? I just wanted to create a dynamic menu with div but the php includes makes me struggle...
Here i've created some example of toggle with divs.
<li>Toggle Red</li>
<li>Toggle Blue</li>
<div id="content">
<div class="toggled-item" id="contentHome">
<div style="width:200px; background-color:#f00; height:200px;"></div>
</div>
<div class="toggled-item" id="contentContact">
<div style="width:200px; background-color:#00f; height:200px;"> </div>
</div>
</div>
<script>
$(document).ready(function(){
$("#lnk_contentHome, #lnk_contentContact").click(function(){
$(".toggled-item").hide();
var target = $(this).attr("id").split("_")[1];
$("#" + target).toggle();
});
});
</script>
https://jsfiddle.net/ow7dd12f/5/
Hope helps.
In this page i have done table listing and each tr have two link are :-
1) Adult and 2) Child
When Click on particular link(for Adult or child) show the div at that position and all other position's div are hide. if next or any other link is click then hide previous link div.
I want to show the hidden div(as i given the hidden properties in div) at when click on particular link
------------Here are the HTML :: ------------
<td>
<div class="tab-inner">
<p><span><strong>Space : <?php echo $row->space; ?></strong></span>
</p>
<p>Adult $<?php echo $row->adultPrice; ?>
<!-- <div id="SpanAdultAllot"></div>-->
</p>
<div style="display:none;" class="adult-wrapper">
<div class="adult-box">
<div class="adultborder">
<div id="adultallot" class="adult-msg">Adult Allocation</div> <span class="adult-select-no"></span>
</div><span class="adultarrow"></span>
<label id="adult" class="adultselect">Adult :</label>
<select class="selectorbox" id="adultselect" name="adult">
<option value="">--</option>
<?php for($i=1; $i<=$row->space; $i++) { ?>
<option value="<?php if($i==$row->space) echo " selected='selected' "; ?>">
<?php echo $i;?>
</option>
<?php } ?>
</select> <strong></strong>
</div>
</div>
<?php if($row->childPrice
<>'0'){ ?>
<p>Child $<?php echo $row->childPrice; ?>
</p>
<!--<div id="SpanChildAllot"></div>-->
<?php } ?>
</div>
</td>
----------Here JS code::-----------
$('a[name="allocation"]').live("click", function () {
$(this).parent().next('.adult-wrapper').show();
$('.adult-select-no').live("click", function () {
$(this).closest('.tab-inner').find('.adult-wrapper').hide();
});
});
Add / include jquery-1.9.0.min.js file.
Create one div to show:
<div id="details_link" style="">
Show Link
</div>
Create another div to hide:
<div id="details_div" style="display:none;">Test show and hide div
Hide Link
</div>
Some tips for avoiding errors when using different browsers:
Don't write Javascript code in the href attribute, always put it in onclick.
To hide div, write in its style display:none or block.
Don't use visibility=hidden.
i need help to passing row from mysql database into div popup window?
how do i passing product id into popup div which i called through View?
For Example I Want Like This
i want to fetch product details into `product quick view popup window`
through product `ID`?
Here My Code
<div class="latest_products_sec">
<div class="latest_products">
<div class="title_box">
</div>
<!--Latest Products Slider -->
<div class="latest_pro_box">
<h4>Latest Shirt's Collection</h4>
<div class="latest_products_slider">
<?php
$queryshirt=mysql_query("select image,id from products
where cid='1' LIMIT 5") or die ('die shirt query');
while($rowshirt=mysql_fetch_array($queryshirt))
{
echo '<ul>';
echo '<li><img src="admin/'.$rowshirt['image'].'"
width="225" height="300" alt="" />
View</li>';
echo '</ul>';?>
}
?>
#shirt Div Popup Window
<div id="shirt" class="proquickview">
<span class="close_btn" onclick="parent.jQuery.fancybox.close();">Close</span>
<h2 class="title">quick view</h2>
<div class="quickviewinfo">
<?php
// I Need To Get ID Here
echo $id=$_REQUEST['id'];
?>
<div class="quickviewinforight">
<div class="titlerow">
<h2>Latest Shirt's Collection</h2>
<div class="start_ratings">
<div class="start_rating">
</div>
</div>
<div>
<div class="quick_review">
<h3>Quick Discription</h3>
<p>TEST.</p>
</div>
<div class="qty_row">
<div class="qty_field">
<label>Select Quantity</label>
<span>
<select name="S">
<option>5</option>
</select>
</span>
</div>
<br class="clear" />
<span class="total_price">Price <strong>$88.00</strong>
<del>$102.00</del></span>
ADD TO CART
</div>
<div class="total_price_row">
</div>
</div>
</div>
</div>
Javascript For Popup Window
$(document).ready(function() {
$(".view_btn").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
$(document).ready(function(){
// Cufon Functions //
Cufon.replace ('.latest_products_slider ul li a.view_btn',{hover:true});
});
It's hard to tell what is wrong as you have only given part of the story.
Fundamentally you need:
Action by the user (usually a click) triggers AJAX call sending a unique ID onclick="updatefunction(this.id) in a SPAN or DIV will do the trick:
<SPAN onclick="updatefunction(this.id)" id="1234">Your Stuff to update</SPAN>
The JS function updatefunction must send the detail/ID to a separate PHP script (you can use the original but this just makes it clunky) which queries your database on the ESCAPED data you send.
Once the data is ready, the JS will update the window/pop it up.
AFAICS you are missing the extra bit that actually does the querying or not applying a suitable onclick.
Why not have a look at the excellent W3Schools Ajax tutorial - it will help though does not use jQuery.
I have the following code in .php (code is edited for easier understanding).
while($row = mysql_fetch_array($biznis)){
<div id='listItem'>
<div id='listPic'>
<img src='../../social/images/avatar/empty_avatar_full.jpg'></img>
</div>
<div id='listCont'>
<span>abcde<i>(request pending)</i></span>
</div>
<div id="listInfo">
<span id='info'>More info</span>
</div>
<div style='clear:both;'></div>
<div id='moreInfo'>
<span>Invitation sent: xx-yy-zzzz</span>
</div>
</div>
<div style='clear:both;'></div>
}
So the code is nothing special, I just get all records from the table lined up.
So now, here is the problem, as you can see, I use the same ids for the same elements.
Jquery code
$(document).ready(function () {
$("#moreInfo").hide();
$("#info").click(function(){
$("#moreInfo").slideToggle();
});
});
OK so here are now the problems. Only first div (#moreinfo) is hidden, all the others are shown. And only first span (#info) is toggling the slider.
I tried with putting the counter for ids, and jquery each function, but nothing realy worked as i imagined.
Ty, Sebastian
Element IDs should be unique identifiers for that element. Use classnames for generic selectors:
<? while($row = mysql_fetch_array($biznis)): ?>
<div class="listItem">
<div class="listPic">
<img src="../../social/images/avatar/empty_avatar_full.jpg"></img>
</div>
<div class="listCont">
<span>abcde<i>(request pending)</i></span>
</div>
<div class="listInfo">
<span class="info">More info</span>
</div>
<div style="clear:both;"></div>
<div class="moreInfo">
<span>Invitation sent: xx-yy-zzzz</span>
</div>
</div>
<div style="clear:both;"></div>
<? endwhile; ?>
And change your jQuery to:
$(function() {
$('.moreInfo').hide();
$('.info').click(function() {
$('.moreInfo').slideToggle();
});
});
Edit
$('.info').click(function() {
$(this).parent().siblings('.moreInfo').slideToggle();
});
use class and not ids because you're in a while loop. An id exists only once.
And update your JS.