Develop Reference

Using isotope, why doesn't my grid update?

This is my first time ever using isotope. So, I create the isotope instance inside of my document.ready function like so:
var grid = $('.headshots-list');
grid.isotope({
// options
itemSelector: '.headshots-list-item-alt',
layoutMode: 'fitRows',
sortBy: '[data-number]'
});
Then I set the values of each element in my grid layout including setting the data-number attribute.
$("#headshot_" + $(this).val()).attr('data-number', 2); // Users who are not chairpersons
$("#headshot_" + $(this).val()).attr('data-number', 1); // Users who are chairpersons
Then I try to sort the grid. Currently, I am using the setTimeout only because I was testing to see if maybe I had a race condition but it made no difference. The grid does not order itself in the way that I am expecting so that the user with data-number 1 will show before all other users. These attributes are being set. I have viewed the elements in dev tools to be sure.
As I mentioned earlier, this is the first time I have ever used isotope so not sure what I am doing wrong. Any pointers in the right direction will be greatly appreciated.
As requested below, this is the HTML where I build out the li that goes with this.
<li id="headshot_<?php echo $user->ID; ?>"
data-number = "1" class="headshots-list-item-alt js-headshot <?php echo $user_terms_classes . ' ' . $board_status . ' ' . $number; ?>"
data-toggle="modal"
data-target="#memberInfo_<?php echo $member_id; ?>">
<div class="headshot-list-item-inner">
<div class="headshot-list-photo">
<?php //suppress photo until they come in
?>
<?php if ($photo_id): ?>
<?php // echo wp_get_attachment_image( $photo_id, 'Avatar' ); ?>
<?php else: ?>
<?php // echo '<img src="https:somedomain.com/imgs/user_img.jpg"/>'; ?>
<?php endif; ?>
</div>
<h4 class="no-margin">
<?php echo $name; ?>
<input type="hidden" class="user_id" value="<?php echo $user->ID; ?>">
<span style="font-size:14px; display: block; position: relative; width: 100%;"
class="chair_designation" id="chair_designation_<?php echo $user->ID ?>">
</span>
</h4>
<p class="no-margin"><?php echo $title; ?></p>
<span class="headshot-list-item-tag">View Bio</span>
</div>
</li>

Can I insert ACF repeater fields into MaxMegaMenu via JS?

I have to add a Slick slider with ACF repeating fields to MaxMegaMenu, unfortunately I don't know how to add such a large piece of code via Javascript (passing js Var?). Has anyone tried to add ACF repeater using Javascript?
My code below
++++++++++++++++
<?php if ( have_rows('postgraduate_studies', 'option') ) :
while( have_rows('postgraduate_studies', 'option') ) : the_row(); ?>
<?php the_sub_field('sub_field_name', 'option'); ?>
<div style="background-image: url( <?php the_sub_field('postgraduate_studies_image', 'option'); ?>);" class="">
<a href="<?php the_sub_field('postgraduate_studies_link', 'option'); ?>">
<p><?php the_sub_field('postgraduate_studies_text', 'option'); ?></p>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>

javascript - don't add class for specific css class

I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>

Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags

loop returns same value multiple times

I have a WordPress loop where I list the data. I create a button dynamically and set their ids.
When I set that id into a textbox I can see that all buttons have different ID because I increment the number each time. Until here everything is okay and working fine.
but need to use javascript for setting the textbox value with value of button ID.
I use this following code:
<script>
jQuery(document).ready(function($){
$('.p-name-x').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
alert($(".the-prod-counter").val());
});
</script>
on my $('.p-name-x').click(function() x should be changed with the number if ID i get from the loop.
on my alert it always gives the first ID. For example if I have 3 buttons the alert gives 3 times the first id!
How can get the alert to show the other numbers as well?
------------- EDIT --------------
Here is part of my code
<?php
$type = 'stiel_privatkunden';
$args=array('stiel_privatkunden_cat' => $post_slug, 'post_type' => $type, 'posts_per_page'=>-1, 'order'=>'ASC');
$my_query = new WP_Query($args);
$i=1;
$idh=1;
while ($my_query->have_posts()) : $my_query->the_post();
if($i%2==0) {
?>
<div class="row" style="background:#f3f3f3" id="<?php the_field('prod_slug'); ?>">
<div class="col-xs-12 col-sm-6">
<figure class="pro-innerpage-img">
<?php the_post_thumbnail(); ?>
</figure>
</div>
<div class="col-xs-12 col-sm-6" style="padding:20px;">
<div class="title_content">
<div class="the-title"><?php the_title();?></div>
<div class="the-desc"><?php the_field('description'); ?></div>
<?php if( get_field('passende_Produkte') ): ?>
<div class="vc_toggle vc_toggle_square vc_toggle_color_black vc_toggle_color_inverted vc_toggle_size_md">
<div class="vc_toggle_title" tabindex="0"><h4>passende Produkte</h4><i class="vc_toggle_icon"></i></div>
<div class="vc_toggle_content" style="display: none;">
<p><?php the_field('passende_Produkte'); ?></p>
</div>
</div>
<?php endif; ?>
<?php if( get_field('link_mehr_erfahren') ): ?>
<span class="theme-button-inner">mehr erfahren</span>
<?php endif; ?>
<?php if( get_field('link_jetz_anfragen') ): ?>
<span class="theme-button-inner">jetzt anfragen</span>
<?php endif; ?>
</div>
<!--<input type="text" name="the-prod-name" class="the-prod-name-<?php echo $idh; ?>" value="<?php the_field('prod_slug');?>">-->
<input type="hidden" name="the-prod-counter" class="the-prod-counter" value="<?php echo the_field('prod_slug') . '-'. $idh; ?>">
<!--<input type="text" name="the-prod-idk" class="the-prod-idk" value="<?php //echo $idh; ?>"> -->
<script>
jQuery(document).ready(function($){
$('.p-name').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
//alert($(".the-prod-counter").val());
});
</script>
</div>
</div>
<br/>
<?php } else { ?>

JQuery tabs - unique ID for each container div

In my latest Wordpress project I'm trying to figure out how to use JQuery tabs in combination with the ACF repeater fields. The first one works but now I want multiple divs containing a few tabs on a single page. The following ones don't show the content in tabs (the script is not working on these). As far as I understand this is caused by the ID of the div (#tabs). Therefore I like to add something to this ID to see if this fixes my problem; like #tabs1, #tabs2, #tabs3, etc. I can't give each div it's own ID manually as they are created in a loop (ACF repeater field). Been searching for days and can't seem to find how to do this in the script. Hope someone can guide me in the right direction.
<script>
jQuery(document).ready(function($) {
$('#tabs').tabs();
})
</script>
The loop to create the tabs:
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Here's an example of a website that has a set up kind of like what I'm trying to achieve... note that each section has a slide show with buttons (in my case the 'tabs') underneath to select a different slide show.
http://partnersandspade.com/studio/

I believe the problem lies here <div id="<?php the_sub_field('tab_title');?>">.
If your tab_title have spaces, comma, quotes (which is most likely since it's a title and not a slug) and you use it as an element id then this isn't valid and will likely cause some problem.
Use simple ids instead. tab-1, tab-2, tab-2 etc.,
e.g.
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<div id="#tab-<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<ul>
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $i++; ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>

UPDATE
Changing to class should work but if it doesn't I would suggest to change your ACF structure a bit. You could include the slider repeater in another repeater field "tabs" then you would be able to loop in the loop (docs - nested lops) and that way you will give each "tabs" an unique id. See the code below:
<?php if( have_rows('tabs') ): ?>
<?php $i = 1; while(have_rows('tabs') ): the_row(); ?>
<div id="tabs<?php echo $i++; ?>">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
I've misunderstood at the first time. Did you consider changing id="tabs" to class="tabs". This should solve the problem:
<script>
jQuery(document).ready(function($) {
$('.tabs').tabs();
})
</script>
Markup:
<div class="tabs">
IGONRE BELOW:
Add variable $i with value "1" and increase its value on the end on the loop.
Replace
<?php the_sub_field('tab_title');?>
with
tabs<?php echo $i;?>
All together this should give you unique id for each row.
<?php $i = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tabs<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; endwhile; ?>

This is where I'm at now...
I managed to give all tab wrappers (#tabs) it's own ID and all the tabs inside this wrapper will get a unique ID too.
<?php $tabsId = 1; while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header class="article-header">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
</header>
<?php if( have_rows('slider') ): ?>
<div id="tabs<?php echo $tabsId; ?>">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tab<?php echo $tabId;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $tabId++; endwhile; ?>
<ul class="tabs">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $tabId++; endwhile; ?>
</ul>
</div>
<?php endif; ?>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php $tabsId++; endwhile; ?>
However I think I need to change the script somehow so it knows that I'm not targeting the #tabs div but I'm targeting #tabs1, #tabs2, #tabs3 etc. Here's the script I'm using as i'm using it. Is there way to change this so it runs on each #tabs.. div?
jQuery(document).ready(function($) {
$('#tabs1').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
})