I've got a bit stuck with my Opencart store and php variables. Here is the thing:
Each product has <?php echo $product['name']; ?> for name (and similar for thumb, price etc.).
I have pages with multiple products listed. For example I want to add some hover div to each product, which would contain name, thumb, price etc.
But when I add a respective script to my template and <div id="hidden"><?php echo $product['name']; ?></div> it gives me a name of the very first product, not for that specific one I toggle.
How would I make it display data for a specific element if a variable is exactly the same? I'll be grateful for any hint!
do you mean you want to add an event hover in each of your products?
maybe you can try this, example :
<?php
while($product = mysql_fetch_array($query))
{ ?>
<div class="thumb-prod">
<img src="img/<?php echo $product['image'] ?>" />
<div class="name-prod">
<?php echo $product['name'] ?>
</div>
</div>
<?php } ?>
now ,require the newest jquery and add this script :
<script>
$(document).ready(function(){
jQuery('.thumb-prod').hover(function(){
var name = $(this).find('.name-prod');
name.show();
}, function(){
var name = $(this).find('.name-prod');
name.hide();
});
});
</script>
Related
I'm trying to loop a piece of jQuery code inside a foreach loop. Each article in the loop have a phone number custom post type related (ACF). At this point the loop works well.
As you see, the jQuery code only replace an image to another while user clicks in order to show the number (Ex : "Display Phone Number" image, becomes "555-555-1234").
The problem is that when I click in any image to display number...all articles show their phone number at the same time. I think is an ID problem in my jQuery code. After two days of searching and testing different codes this problem still not resolved yet.
Any suggestions/tracks will be very welcome !
Thanks
====
Things I have tried :
I have tried to put the jQuery code outside the foreach (same result)
I have tried to change the id image into a class (works better)
I have tried different jQuery functions (replaceWith(), show(), etc)
foreach ($related_posts_articles as $related_post ){
<div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">
<div>
<a href="<?php echo get_permalink($related_post->ID); ?> ">
<?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>
</a>
<div>
<a href="<?php echo get_permalink($related_post->ID); ?>">
<h2>
<?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
</h2>
</a>
<div>
<?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>
</div>
<!-- START bloc number -->
<?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
<div>
<img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
<script>
jQuery(document).ready(function($) {
$( ".input_img" ).click(function() {
$( ".input_img" ).attr( "src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
</script>
</div>
<?php endif; ?>
<!-- END bloc number -->
</div>
</div>
</div>
}
Take note of the 'this' Context
When an event fires in jquery the callback function this context is set to the element which the event was fired from.
jQuery(document).ready(function($) {
$(".input_img").click(function() {
// Use `this` to target the event element
$(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
Advice:
You shouldn't generate same jquery code inside each iteration of the for each. Since you're repeating unnecessary code. You can harness HTML data-* attributes to achieve the outcome you seek.
You are giving the class name the same for all images. Also by looping you are adding lot's of scripts. You can add Onclick events to image and create a function and grab the data and do you things. Also, you can add extra attributes to img tag to get your data. Also try to put different ID like below,
foreach ($related_posts_articles as $key=>$related_post ){
<img id="img-<?php echo $key; ?>" onclick="myFunction(this)" class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
}
I'd like to apply jQuery to classes that are generated dynamically as they are looped through PHP/MySQL.
I've got a non-dynamic working version on JSfiddle: jsfiddle.net/TXJA5/1/
In the example, cat_fruit, cat_vegetable and cat_cereal would be echoed within a PHP loop; something like:
<div class="category cat_<?php echo $category; ?>">
<p><?php echo $category_label; ?></p>
</div>
Then, in following columns, there will be divs containing items associated to the category:
<div class="column">
<div class="item cat_<?php echo $category; ?>">
<p><?php echo $item[0]; ?></p>
<p><?php echo $item[0]; ?></p>
</div>
</div>
So, why? Well, while the data is variable and "categories" exist in one column and "items" exist within other columns in another div, I need the associated divs to be identified by jQuery to make them the same height (using equalizeCols — see the fiddle; you'll get it.)
n.b. There's a reason this isn't a table, despite the obvious column/row relationships. I considered it (fretfully) and tried it, but it won't work for the needs of the actual project.
Thanks in advance for any help you can offer. This is my first question on SO after years of learning from it — this community is awesome. I've found a couple questions on here that may make mine look like a duplicate, but they couldn't quite help get me there!
<div class="column">
<div class="category" data-cat="<?php echo $category; ?>">
<p><?php echo $item[0]; ?></p>
<p><?php echo $item[0]; ?></p>
</div>
</div>
I guess you can add a data atribute (or an id) in the first column and then loop through those with jQuery:
$('.category').each(function(){
var category = $(this).attr('data-cat');
$(".cat_"+category).equalizeCols();
});
http://jsfiddle.net/TXJA5/2/
You can loop categories in the same way you do in the HTML part of the code:
<?php for(...){ ?>
var $els = $(".cat_<?php echo $category?>").equalizeCols();
<?php } ?>
If I understand your question and issue OK this is the solution. If this is not your issue please be more specific.
I have this While loop in my php code where I echo rows inside one div that acts like a button and when I press that "button" I want to hide/show the connected div with the jQuery function "toggle". I only get it to work so that when I click any of the "buttons" it opens all divs and not just that one that's connected.
<script>
$(document).ready(function(){
$(".scorec").click(function(){
$(".scorematcho").slideToggle('slow');
});
});
</script>
That's the jQuery I'm using at the moment.
<?php $RM = mysql_query("SELECT * FROM score ORDER BY ScoreID DESC LIMIT 3");
while ($ScoreD = mysql_fetch_assoc($RM)) {
$a = $ScoreD["ScoreOne"]; $b = $ScoreD["ScoreTwo"];?>
<div class="scorec" >
<?php if($a>$b){;?><font color="green"><?php }else{?><font color="red"><?php }?>
<div class="scorel"><img src="flags/<?php echo $ScoreD["FlagOne"]; ?>.png" style="float:left;">
<?php echo $ScoreD["TeamOne"]; ?> | <?php echo $ScoreD["ScoreOne"]; ?></div>
<div class="scorem">-</div>
<div class="scorer"><?php echo $ScoreD["ScoreTwo"]; ?> | <?php echo $ScoreD["TeamTwo"]; ?>
<img src="flags/<?php echo $ScoreD["FlagTwo"]; ?>.png" style="float:right;"></div></font>
</div>
<div class="scorematcho" >
<div class="scorematch">
de_dust2
16-2
</div>
<div class="scorematch">
de_nuke
16-2
</div>
<div class="scorematch">
de_dust
16-2
</div>
</div>
<?PHP } session_destroy()?>
That's the HTML/PHP I'm using. The div "scorec" is the "button" and "scorematcho" is the div I wan't to toggle.The text inside "scorematcho" shall be PHP also, just haven't changed it yet. I have searched and tested some things but can't get anything to work properly, I have noticed that some put all their PHP code inside an "echo", why is that and could that be the problem? Hope that's enough information, please tell if not. Also, if you have some other improvements you think I should make to the code, please tell.
I have added this jfiddle Hope it helps!! http://jsfiddle.net/H77yf/
$(".scorec").click(function(){
$(this).next().slideToggle('slow');
});
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
I have this:
while( $rowData = #mysql_fetch_assoc($selectRows2) )
{
?>
<div id="stemmeto"><a href="#" id="thelink" onclick="window.parent.OpenVote(<? echo $_GET['id']; ?>, '<? echo $rowData['username']; ?>');">
<?php echo $rowData['username']; ?> </a></div>
<div id="stemme">
<a href="#" id="thelink" onclick="window.parent.OpenVote(<? echo $_GET['id']; ?>, '<? echo $rowData['username']; ?>');">
<? echo $rowData['stemme']; ?></div></a><br />
<?
}
Now this should activate OpenVote function with (id, username) in the parent.window..
But for some reason this only works for first column, that comes out, nothing is happening when i click the others.. I have tried to remove that column, to check to see if its specially just that column, but it wasnt, its always the "first" column that echo´s out in the while(), that i can click on.. what should i do?
Here's the OpenVote script on the parent window(index.php)
function OpenVote(id, stemme) {
var postThisShit = 'battles/infoaboutvote.php?id='+id+'&stemme='+stemme;
$.post(postThisShit, function(data){
$(".showinfo").html(data).find(".getinfo").fadeIn("slow")
});
}
And the #thedialog on index.php:
<div id="thedialog" title="Showing..">
<p class="showinfo">
You shouldn't see this, something went wrong..
</p>
</div>
The id attribute must be unique across your entire document. Your loop is creating multiple elements with the same id, which will cause behavior like you're describing when trying to interact with the elements. Try appending a unique value to the end of the id, such as id-1, id-2, id-3, etc.