I have a div whose contents are retrieved asynch by $.post().
The contents retrieved are multiple images each with seperate ids.
I want each of the images to fadeToggle on hover()
So i calculate image id in my php on the spot, generate the image and add a jquery handler
and echo back the results:
<script type="text/javascript">
$(document).ready(function ()
{
$("<?php echo '#'.$postid.'image'; ?>").hover(function()
{
$(this).fadeToggle("fast");
},
function()
{
$(this).fadeToggle("fast");
});
});
HTML:
<div id="<?php echo $postid; ?>" class="post_box" >
<img src="<?php echo '/way2tweek'.$path.$name; ?>" width="500" class="img_get"
draggable="false" alt="<?php echo $postid; ?>" id="<?php echo $postid.'image'; ?>">
<div class="imageproperty" id="<?php echo $postid.'props'?>">
</div>
</div>
on the page images are received. scripts are received. the calculated ids match but the images are not fadeToggled. No Console debug message too. Please help.
You have both the hash and the dot in your PHP-generated selector:
<?php echo '#'.$postid.'.image'; ?>
produces a string like
#mypostid.image
I don't know your HTML structure, but you may want the selector to be #mypostid .image (note the space), so:
<?php echo '#'.$postid.' .image'; ?>
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); ?>" >
}
<div class="priceStruct" id="priceStruct">
<h3>Pallet Cost Structure</h3>
<?php $i=1;
foreach($price_structure as $price_structure_list) {
$palletDetails = $price_structure_list['min']." - ".$price_structure_list['max'];
?>
<div class="display_content" id="price<?php echo $i; ?>">
<span class="first price" id="first<?php echo $i; ?>" ><?php echo $palletDetails." Pallets";?></span>
<span class="second price" id="second<?php echo $i; ?>">£<?php echo $price_structure_list['price'];?></span>
<span class="third price"><a href="#" class="breakDown" >Click Here for Break Down</a></span>
</div>
<?php $i++; } ?>
</div>
Try this. Class should be second_price instead of second price.
Dont forget to include jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(function(){
$(".breakDown").click(function(){
spanValue = $('.second_price').text();
alert(spanValue);// just to check
});
});
Solution 1:
Add this to your a tag:
onclick="alert($('#second<?php echo $i; ?>').text());"
So that it will result in:
Click Here for Break Down
Solution 2:
You can also use jQuery's parent and siblings to find the correct span tag:
$(document).ready(function() {
$('.breakDown').click(function() {
alert($(this).parent().siblings('.second').text());
});
});
The disadvantage of solution 2 is that you'll run in problems when the structure of your HTML code is changed (the a tag is no longer not a child of span etc.)
I have a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.
This is the PHP code I'm using to display the large image and thumbnails:
<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</li>
<?php endforeach; ?>
This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:
jQuery(document).ready(function($){
// handle the click of thumbnail images
// redirect it to change the main image
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href");
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
return false;
});
// preload the large images
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// populate the list of images to load
preload(images);
});
Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:
<div class="container-title-description">
<div class="title"><?php echo $current->alttext ?></div>
<div class="descripton"><?php echo $current->caption ?></div>
</div>
The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?
You can view how this setup looks like on this website.
You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href"),
desc = $(this).attr('title'),
title = $(this).find('img').attr('title');
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
$('.container-title-description .title').text(title);
$('.container-title-description .description').text(desc);
return false;
});
Initial HTML (outside your foreach loop):
<div class="container-title-description">
<p class="title"></p>
<p class="description"></p>
</div>
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 am creating a element dynamically in html and want to use it in a javascript function by referring to its ID. But as its ID is dynamically generated using PHP , so how do i pass it to the javascript function into getElementById?
Actually , i am trying to do pagination using javascript. I have displayed Page No.s, and put HREF on them, but onclick function am stuck up? Please help. My code is as below:
<?php
echo 'Page';
while($d>0)
{
?>
<input type="hidden" value="<?php echo $z; ?>" name="pagination" id="<?php echo 'pagination' .$z ; ">
<label id="<?php echo 'labelofpagination'.$z; ?>" >
<a href="#" onclick="PaginationLabelClicked(); submit();" >
<?php echo $z; ?>
</a>
</label>
<?php
$z++;
}
?>
in your javascript functio you can use the same PHP expression to get the id
var id="<?php echo '\"' .$z '\"'; >";
or you can have it like this,
<script type="text/javascript" language="javascript">
<!--
<?php
echo("id= $z;");
?>
// -->
</script>
to get the id
<label id="<?php echo 'labelofpagination'.$z; ?>" >
<a href="#" onclick="PaginationLabelClicked('<?php echo "\"" ."labelofpagination".$z ."\""; ?>'); submit();" >
<?php echo $z; ?>
</a>
</label>
and javascript
function PaginationLabelClicked(id){
// you can get the id here...
}