I'm running a repeater field through WP that repeats the below content. I also have a jQuery bit of code that is set to toggle, how do I make it so not all divs open? As it seems to only be working on the first div.
Is it because it's inside of the loop?
<?php if( have_rows('business_dropdown') ) : while ( have_rows('business_dropdown') ) : the_row(); ?>
<a href="/#/" onClick="submitComment(); return false;" class="AddCityA">
<?php echo the_sub_field('title'); ?>
</a>
<div class="AddCity">
<?php echo the_sub_field('content'); ?>
</div>
<?php endwhile; endif; ?>
jQuery:
jQuery(document).ready(function () {
$('.AddCity').hide();
$('.AddCityA').click(function () {
$('.AddCity').slideToggle("slow");
});
});
In order to limit to the next .AddCity only, use .next()
jQuery(document).ready(function () {
$('.AddCity').hide();
$('.AddCityA').click(function () {
$(this).next('.AddCity').slideToggle("slow");
});
});
Related
I have a simple function that works when it is hard coded, but when I try to pass a second parameter into it, it doesn't work. I am calling the function with the onclick and using the id => thumbnail to get the value. Any suggestions?
Hard Coded Example (Works)
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.thumbnail').val("");
}
</script>
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'class' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div')" href="javascript:noAction();"> Remove Thumbnail
</div>
Parameters Passed (Not Working)
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.div').val("");
}
</script>
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
</div>
You are almost there. In your code, the paramenter div is converted to string. Instead of that, try the code given below,
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
$('.'+div).val("");
}
</script>
$('.div').val("");
^^^^^^
That's a string, not a variable. You're trying to find elements that have class="div".
You need to concatenate the variable with a string containing the dot.:
$('.' + div).val("");
$('.div').val("");
That part is close but not going to work as you might have intended. You instead should have it one of two ways,
$('.'+div).val("");
or,
$(div).val("");
With option 1, you are using a string for the period and concatenating it with the value of the variable div
With option 2, you will need to change the passed parameter to include a period before it.
You could easily get rid of your inline handler and just create a simple event handler.
jQuery(function(){
// Bind a handler to any button with the class remove_thumbnail
$('.remove_thumbnail').change(function(){
if (this.checked) {
$(this)
// go up to parent row
.parents('.row')
// find the thumbnail
.find('.thumbnail')
.val("");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbnail_div" class="row">
<input type="text" class="thumbnail" value="foo">
<input type="checkbox" class="remove_thumbnail"> Remove Thumbnail
</div>
The advantages here are that you separate content and behavior and do not introduce functions into the global scope.
try this (with script placed underneath the markup):
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
</div>
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.'+div).val("");
}
</script>
I have a few foreach loops with a trigger and a content div. The intent is for the trigger to be clicked, then addClass to content div, making it visible on screen.
foreach markup
<?php foreach( $posts as $post ) : ?>
<a class="slide-trigger" href="#loc<?php echo $post->ID;?>"><?php the_title(); ?></a>
<span>
<?php
$speakers = get_field('speakers');
?>
<?php if( $speakers ): ?>
<ul class="flat">
<?php foreach( $speakers as $speaker ): ?>
<li>
<a href="<?php echo get_permalink( $speaker->ID ); ?>">
<?php echo get_the_title( $speaker->ID ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</span>
<div class="slide" id="loc<?php echo $post->ID;?>">
<div class="close"></div>
<?php echo $post->post_title;?>
<?php echo $post->post_content;?>
</div>
<?php endforeach; ?>
jQuery
$(".slide-toggle[href^='#loc']").click(function(e){
e.preventDefault();
$(".slide[id^='loc']").addClass("open");
})
$(".close").click(function(){
$(".slide").removeClass("open");
});
What I'm looking for is each slide-toggle to trigger it's slide.
Any thoughts?
The ID is in the href, so just grab it and remove the #loc prefix, then you can select the corresponding slide to open. Also this way, the startsWith selector is no longer required.
$(".slide-toggle[href^='#loc']").click(function(e){
e.preventDefault();
$(".slide[id='loc" + this.href.replace('#loc', '') + "']").addClass("open");
})
Having to parse out the ID, then concatenate like this seems a bit hacky. It would be nicer to use data-* attributes.
Link:
<a class="slide-trigger" data-id="<?php echo $post->ID;?>" href="#loc<?php echo $post->ID;?>"><?php the_title(); ?></a>
Slide:
<div class="slide" data-id="<?php echo $post->ID;?>" id="loc<?php echo $post->ID;?>">
jQuery:
$(".slide-toggle[data-id]").click(function(e){
e.preventDefault();
$(".slide[data-id=" + $(this).data('id') + "]").addClass("open");
})
#MrCode had two great solutions to this. The data-id method is a bit more elegant and what I went with.
Note, the $post->ID is a number which just won't work as an id= - https://css-tricks.com/ids-cannot-start-with-a-number/ - and was causing the issue where things just wouldn't work.
The answer; follow #MrCode's method of using a data attribute. It's elegant and works great w/ the loop.
I have a pulsate:
<script>
$(document).ready(function() {
$(".pane > a").click(function (event) {
event.preventDefault();
$(this).parent().effect("pulsate", { times:2 }).fadeOut('slow');
});
});
</script>
Then the PHP:
<?php
if($_SESSION['username']) {
if(isset ($_GET['id'])) {
mysql_query("DELETE FROM reviews WHERE id='". mysql_real_escape_string($_GET['id']) ."'");
}
}
$grab = mysql_query("SELECT * FROM reviews");
if (mysql_num_rows($grab)==0) {
echo ("<div class=''><strong>Sorry!</strong> No reviews have been created!</div>");
}
while($row = mysql_fetch_array($grab)){
?>
<div class="pane">
<img src="http://uploadir.com/u/6hmr4fr1" alt="delete" class="delete" />
<?php echo $row['comment'] ?>
</div>
It works but doesn't delete from the database. I'm working on an AJAX script, which works perfect, but it's something I'm not doing right here.
It pulsates out with:
<a href="reviews/editReview/<?php echo $row['id'] ?>"rel="noAJAX">
but when I take out the rel="noAJAX" it deletes the information from the database, which I want to happen, but it isn't pulsating then deleting.
Any ideas? I'm using jQuery UI 1.8.2 & jQuery 1.5
I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images
<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Thanks in advance.
Replace your above code with this following code :
<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>
<?php get_footer(); ?>
Add this following code in functions.php file :
add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {
$temp = get_post($_POST['post_id']);
echo $temp->post_title.'<br/><br/>'.$temp->post_content;
die();
}
Add this following code in your custom js file :
jQuery(document).ready(function (){
jQuery('#meetteam_featured_image a').on('click',function(event){
event.preventDefault();
var post_id = jQuery(this).parent().attr('class');
jQuery.ajax({
type: "POST",
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
data: 'action=ajaxified_function&post_id='+post_id,
success: function (msg) {
jQuery('#image-post-info').html(msg);
},
error: function () {
alert('Error');
}
});
});
});
Add custom js file by including following code in functions.php file :
function add_custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() .'/js/custom- scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
Hope this will help....!!!!!
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
</div><!--close first div-->
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div><!--close second div-->
<?php endwhile; ?>
Have a look here:
http://test.neworgan.org/100/
Scroll down to the community section.
What I'm trying to achieve is to get the data for new organizers, (e.g.: number of friends / amount donated) to show once users click on their thumbnails. right now each user has his or her own unique data stored externally.
Once the users click the thumbnail, 'inline1' appears with the content.
As of now, I'm only able to get the data from the last user to show regardless of whichever user's thumbnails I'm clicking on. I just need a bit of help as to how to change the content depending on which thumbnail users click. So I was wondering if I could have some help here?
Here's that part of the code that matters:
<div class="top-fundraisers-wrapper">
<div class="subsection top-fundraisers">
<?php if ($top_fundraisers && is_array($top_fundraisers)): ?>
<?php foreach ($top_fundraisers as $index => $fundraiser): ?>
<a title="" class="fancybox" href="#inline1">
<div class="top-fundraiser">
<div id="newo<?php print htmlentities($index + 1); ?>" class="top-fundraiser-image">
<img src="<?php
if($fundraiser['member_pic_medium']) {
print htmlentities($fundraiser['member_pic_medium']);
} else {
print $template_dir . '/images/portrait_placeholder.png';
}
?>"/>
</div>
</div>
</a>
<?php endforeach;?>
<?php endif; ?>
</div>
</div>
</div>
<div id="inline1">
<div class="top-fundraiser-image2">
<img src="<?php
if($fundraiser['member_pic_large']) { print htmlentities($fundraiser['member_pic_large']);
} else {
print $template_dir . '/images/portrait_placeholder.png';
}
?>"/>
</div>
<span class="member-name"><?php print htmlentities($fundraiser['member_name']); ?></span>
<span class="friend-count"><?php print number_format($fundraiser['num_donors']) . (($fundraiser['num_donors'] == 1) ? ' Friend' : ' Friends'); ?></span>
<span class="fundraisers-text"> Donated: </span><span class="fundraisers-gold"> $<?php print number_format($fundraiser['total_raised']); ?></span>
</div>
Best way is to use Ajax. Something like this
$("#button").click( function() {
$.ajax({
url: 'file.php',
method: 'post',
data: { id: $(this).val() },
error: function() {
alert('error while requesting...');
}, success: function(data) {
alert( data ); /** received data - best to use son **/
}
});
});
Next parse json var json = $.parseJSON(data);
or ... use dataJson option.
Next Your data should be inserted using class or id to specific location.
Create another loop for content
<?php if ($top_fundraisers && is_array($top_fundraisers)):
$i = 1;
foreach ($top_fundraisers as $index => $fundraiser): ?>
<a title="" class="fancybox" href="#inline<?php echo $i; ?>">
// ... content
<?php $i++;
endforeach;
endif; ?>
And another loop
<?php if ($top_fundraisers && is_array($top_fundraisers)):
$i = 1;
foreach ($top_fundraisers as $index => $fundraiser): ?>
<div id="inline<?php echo $i; ?>">
// inline content here
</div>
<?php $i++;
endforeach;
endif; ?>
Hope your JavaScript function to open fancybox works fine via calling class. So by following code you do not need to play with Javascript code.
Building anchors tags:
<?php
if (!empty($top_fundraisers) && is_array($top_fundraisers)) {
foreach ($top_fundraisers as $index => $fundraiser) {
<a title="" class="fancybox" href="#inline<?php echo $fundraiser['id']; ?>">HTML Content Goes Here</a>
<?php
} //end of foreach
} // end of if condition
?>
Building Popup HTML DOMs:
<?php
if (!empty($top_fundraisers) && is_array($top_fundraisers)) {
foreach ($top_fundraisers as $index => $fundraiser) {
<div id="inline<?php echo $fundraiser['id']; ?>">HTML Content Goes Here</div>
<?php
} //end of foreach
} // end of if condition
?>
You cannot perform this because PHP runs server-side and JavaScript runs in the browser.
To perform this you can use AJAX to get the div as required by user.
...or store the data client-side and change the content of #inline1 based on which item was clicked