I have implemented the "User Follow System" plugin on my website. I need help in modifying the JavaScript code to select only one user when the current user clicks on the follow button.
Currently, I am displaying a list of followers and following users using the get_users function within a foreach loop.
The issue I'm encountering is that when I click on the follow link for one user, the loading images for all users appear and all the follow links toggle. The code responsible for this behavior is
$(‘.follow-links a’).toggle();Upon reaching out to the plugin owner for assistance, they suggested adjusting the selector used in the JS to target only the clicked user. Originally, the plugin was designed to display only one user's links on the page.
Despite the advice, I haven't been successful in resolving the issue!
jQuery(document).ready(function($) {
/*******************************
follow / unfollow a user
*******************************/
$( '.follow-links a' ).on('click', function(e) {
e.preventDefault();
var $this = $(this);
if( pwuf_vars.logged_in != 'undefined' && pwuf_vars.logged_in != 'true' ) {
alert( pwuf_vars.login_required );
return;
}
var data = {
action: $this.hasClass('follow') ? 'follow' : 'unfollow',
user_id: $this.data('user-id'),
follow_id: $this.data('follow-id'),
nonce: pwuf_vars.nonce
};
$('img.pwuf-ajax').show();
$.post( pwuf_vars.ajaxurl, data, function(response) {
if( response == 'success' ) {
$('.follow-links a').toggle();
} else {
alert( pwuf_vars.processing_error );
}
$('img.pwuf-ajax').hide();
} );
});
});
display-function.php
<?php
/**
* Retrieves the follow / unfollow links
*
* @access public
* @since 1.0
* @param int $user_id - the ID of the user to display follow / unfollow links for
* @return string
*/
function pwuf_get_follow_unfollow_links( $follow_id = null ) {
global $user_ID;
if( empty( $follow_id ) )
return;
if( ! is_user_logged_in() )
return;
if ( $follow_id == $user_ID )
return;
ob_start(); ?>
<div class="follow-links">
<?php if ( pwuf_is_following( $user_ID, $follow_id ) ) { ?>
<span><a href="#" class="unfollow followed" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span>Following</a></span>
<a href="#" class="follow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">Follow</a>
<?php } else { ?>
<a href="#" class="follow" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">Follow</a>
<span><a href="#" class="followed unfollow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span>Following</a></span>
<?php } ?>
<img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.svg" class="pwuf-ajax" style="display:none;"/>
</div>
<?php
return ob_get_clean();
}