0

Ok, I will try to be more clear this time, and i really need your help guys.

I'm using an plugin that working with Ajax for creating a follow button to make our users following each other.

I putting the follow button anywhere that i need an user to follow the others users like that echo pwuf_get_follow_unfollow_links( //user id here );

The problem i'm facing is if i added this echo function inside any Ajax pagination template whatever post Ajax pagination or users list Ajax pagination, the follow button not working and can't find the user id on click!

But for sure he can find the user id on the first page before i loading more to the second page!

e.g: if i have an Ajax pagination like this one, and tried to echo the follow button function inside this ajax pagination not working!?

add_action('wp_ajax_loadmore_by_ajax', 'loadmore_by_ajax_callback');
add_action('wp_ajax_nopriv_loadmore_by_ajax', 'loadmore_by_ajax_callback');

function loadmore_by_ajax_callback()  {
   //do something

   //echoing follow button
    echo pwuf_get_follow_unfollow_links( //user id here );

}

I'll add all my plugin code below, and i hope to get some help to fix this problem, Thanks for your time.

follow.js

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
        };

        $this.closest('.follow-links').find('img.pwuf-ajax').show();

        $.post( pwuf_vars.ajaxurl, data, function ( response ) {
            if ( response == 'success' ) {
                if ( $this.hasClass( 'follow' ) ) {;
                    $this.removeClass( 'follow' ).addClass( 'unfollow' );
                    $this.find( 'span' ).text( 'Unfollow' );
                } else {;
                    $this.removeClass( 'unfollow' ).addClass( 'follow' );
                    $this.find( 'span' ).text( 'Follow' );
                }
            } else {
                alert( pwuf_vars.processing_error );
            }
            $this.closest('.follow-links').find('img.pwuf-ajax').hide();
        });
    });
});

actions.php

<?php

/**
 * Ajax Actions
 *
 * @package     User Following System
 * @subpackage  Ajax Actions
 * @copyright   Copyright (c) 2012, Pippin Williamson
 * @license     http://opensource.org/licenses/gpl-2.0.php GNU Public License
 * @since       1.0
*/


/**
 * Processes the ajax request to follow a user
 *
 * @access      private
 * @since       1.0
 * @return      void
 */

function pwuf_process_new_follow() {

    if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) {
        if( pwuf_follow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) {
            echo 'success';
        } else {
            echo 'failed';
        }
    }
    die();
}
add_action('wp_ajax_follow', 'pwuf_process_new_follow');

/**
 * Processes the ajax request to unfollow a user
 *
 * @access      private
 * @since       1.0
 * @return      void
 */

function pwuf_process_unfollow() {

    if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) {
        if( pwuf_unfollow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) {
            echo 'success';
        } else {
            echo 'failed';
        }
    }
    die();
}
add_action('wp_ajax_unfollow', 'pwuf_process_unfollow');

display-functions.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 ( $follow_id == $user_ID )
        return;

    ob_start(); ?>
    <div class="follow-links">
<?php
if ( pwuf_is_following( $user_ID, $follow_id ) ) {
    $classes = "unfollow";
    $text = "Following";
} else {
    $classes = "follow";
    $text = "Follow";
}
?>

<span><a href="#" class="<?php echo $classes; ?>" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>"><span><?php echo $text; ?></span></a></span>
<img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.svg" class="pwuf-ajax" style="display:none;"/>
    </div>
    <?php
    return ob_get_clean();

}

follow-functions.php

<?php

/**
 * Follow Functions
 *
 * @package     User Following System
 * @subpackage  Follow Functions
 * @copyright   Copyright (c) 2012, Pippin Williamson
 * @license     http://opensource.org/licenses/gpl-2.0.php GNU Public License
 * @since       1.0
 */




/**
 * Retrieves all users that the specified user follows
 *
 * Gets all users that $user_id followers
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to retrieve following for
 * @return      array
 */

function pwuf_get_following( $user_id = 0 ) {

    if ( empty( $user_id ) ) {
        $user_id = get_current_user_id();
    }

    $following = get_user_meta( $user_id, '_pwuf_following', true );

    if ( empty( $following ) ) {

    return;

    }
    return (array) apply_filters( 'pwuf_get_following', $following, $user_id );
}


/**
 * Retrieves users that follow a specified user
 *
 * Gets all users following $user_id
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to retrieve followers for
 * @return      array
 */

function pwuf_get_followers( $user_id = 0 ) {

    if ( empty( $user_id ) ) {
        $user_id = get_current_user_id();
    }

    $followers = get_user_meta( $user_id, '_pwuf_followers', true );

    if ( empty( $followers ) ) {

    return;

    }
    return (array) apply_filters( 'pwuf_get_followers', $followers, $user_id );
}



/**
 * Follow a user
 *
 * Makes a user follow another user
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id        - the ID of the user that is doing the following
 * @param   int $user_to_follow - the ID of the user that is being followed
 * @return      bool
 */

function pwuf_follow_user( $user_id, $user_to_follow ) {

    $following = pwuf_get_following( $user_id );

    if ( $following && is_array( $following ) ) {
        $following[] = $user_to_follow;
    } else {
        $following = array();
        $following[] = $user_to_follow;
    }

    // retrieve the IDs of all users who are following $user_to_follow
    $followers = pwuf_get_followers( $user_to_follow );

    if ( $followers && is_array( $followers ) ) {
        $followers[] = $user_id;
    } else {
        $followers = array();
        $followers[] = $user_id;
    }

    do_action( 'pwuf_pre_follow_user', $user_id, $user_to_follow );

    // update the IDs that this user is following
    $followed = update_user_meta( $user_id, '_pwuf_following', $following );

    // update the IDs that follow $user_id
    $followers = update_user_meta( $user_to_follow, '_pwuf_followers', $followers );

    // increase the followers count
    $followed_count = pwuf_increase_followed_by_count( $user_to_follow ) ;

    if ( $followed ) {

        do_action( 'pwuf_post_follow_user', $user_id, $user_to_follow );

        return true;
    }
    return false;
}



/**
 * Unfollow a user
 *
 * Makes a user unfollow another user
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id       - the ID of the user that is doing the unfollowing
 * @param   int $unfollow_user - the ID of the user that is being unfollowed
 * @return      bool
 */

function pwuf_unfollow_user( $user_id, $unfollow_user ) {

    do_action( 'pwuf_pre_unfollow_user', $user_id, $unfollow_user );

    // get all IDs that $user_id follows
    $following = pwuf_get_following( $user_id );

    if ( is_array( $following ) && in_array( $unfollow_user, $following ) ) {

        $modified = false;

        foreach ( $following as $key => $follow ) {
            if ( $follow == $unfollow_user ) {
                unset( $following[$key] );
                $modified = true;
            }
        }

        if ( $modified ) {
            if ( update_user_meta( $user_id, '_pwuf_following', $following ) ) {
                pwuf_decrease_followed_by_count( $unfollow_user );
            }
        }

    }

    // get all IDs that follow the user we have just unfollowed so that we can remove $user_id
    $followers = pwuf_get_followers( $unfollow_user );

    if ( is_array( $followers ) && in_array( $user_id, $followers ) ) {

        $modified = false;

        foreach ( $followers as $key => $follower ) {
            if ( $follower == $user_id ) {
                unset( $followers[$key] );
                $modified = true;
            }
        }

        if ( $modified ) {
            update_user_meta( $unfollow_user, '_pwuf_followers', $followers );
        }

    }

    if ( $modified ) {
        do_action( 'pwuf_post_unfollow_user', $user_id, $unfollow_user );
        return true;
    }

    return false;
}



/**
 * Retrieve following count
 *
 * Gets the total number of users that the specified user is following
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to retrieve a count for
 * @return      int
 * @param  int|string|WP_User $user_id User ID or object.
 * @return bool                        Whether the user exists
 */

function pwuf_get_following_count( $user_id = 0 ) {

    if ( empty( $user_id ) ) {
        $user_id = get_current_user_id();
    }

    $following = pwuf_get_following( $user_id );

    $count = 0;

    if ( $following ) {
        $count = count( $following );
    }

    return (int) apply_filters( 'pwuf_get_following_count', $count, $user_id );
}


/**
 * Retrieve follower count
 *
 * Gets the total number of users that are following the specified user
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to retrieve a count for
 * @return      int
 */

function pwuf_get_follower_count( $user_id = 0 ) {

    if ( empty( $user_id ) ) {
        $user_id = get_current_user_id();
    }

    $followed_count = get_user_meta( $user_id, '_pwuf_followed_by_count', true );

    $count = 0;

    if ( $followed_count ) {
        $count = $followed_count;
    }

    return (int) apply_filters( 'pwuf_get_follower_count', $count, $user_id );
}



/**
 * Increase follower count
 *
 * Increments the total count for how many users a specified user is followed by
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to increease the count for
 * @return      int
 */

function pwuf_increase_followed_by_count( $user_id = 0 ) {

    do_action( 'pwuf_pre_increase_followed_count', $user_id );

    $followed_count = pwuf_get_follower_count( $user_id );

    if ( $followed_count !== false ) {

        $new_followed_count = update_user_meta( $user_id, '_pwuf_followed_by_count', $followed_count + 1 );

    } else {

        $new_followed_count = update_user_meta( $user_id, '_pwuf_followed_by_count', 1 );

    }

    do_action( 'pwuf_post_increase_followed_count', $user_id );

    return $new_followed_count;
}


/**
 * Decrease follower count
 *
 * Decrements the total count for how many users a specified user is followed by
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id - the ID of the user to decrease the count for
 * @return      int
 */

function pwuf_decrease_followed_by_count( $user_id ) {

    do_action( 'pwuf_pre_decrease_followed_count', $user_id );

    $followed_count = pwuf_get_follower_count( $user_id );

    if ( $followed_count ) {

        $count = update_user_meta( $user_id, '_pwuf_followed_by_count', ( $followed_count - 1 ) );

        do_action( 'pwuf_post_increase_followed_count', $user_id );

    }
    return $count;
}


/**
 * Check if a user is following another
 *
 * Increments the total count for how many users a specified user is followed by
 *
 * @access      private
 * @since       1.0
 * @param   int $user_id       - the ID of the user doing the following
 * @param   int $followed_user - the ID of the user to check if being followed by $user_id
 * @return      int
 */

function pwuf_is_following( $user_id, $followed_user ) {

    $following = pwuf_get_following( $user_id );

    $ret = false; // is not following by default

    if ( is_array( $following ) && in_array( $followed_user, $following ) ) {
        $ret = true; // is following
    }

    return $ret;

}

scripts.php

<?php

/**
 * Loads plugin scripts
 *
 * @access      private
 * @since       1.0
 * @return      void
*/

function pwuf_load_scripts() {
    wp_enqueue_script( 'pwuf-follow', PWUF_FOLLOW_URL . 'js/follow.js', array( 'jquery' ) );
    wp_localize_script( 'pwuf-follow', 'pwuf_vars', array(
        'processing_error' => __( 'There was a problem processing your request.', 'pwuf' ),
        'login_required'   => __( 'Oops, you must be logged-in to follow users.', 'pwuf' ),
        'logged_in'        => is_user_logged_in() ? 'true' : 'false',
        'ajaxurl'          => admin_url( 'admin-ajax.php' ),
        'nonce'            => wp_create_nonce( 'follow_nonce' )
    ) );
}
add_action( 'wp_enqueue_scripts', 'pwuf_load_scripts' );
1

I think, if you change your jQuery click action selector to handle event delegation the follow buttons should work after being added by ajax.

// Change this
$( '.follow-links a' ).on('click', function(e) {
// to this
$( '.some-parent-not-added-by-ajax' ).on('click', '.follow-links a', function(e) {
// or as last resort
$( document ).on('click', '.follow-links a', function(e) {
  • Thanks @AnttiKoskinen for your answer, but nope not working in both :( I don't why it's working on the first page and after load the second page stopped to work! – Adham Mohamed Feb 22 at 20:14
  • Hello AnttiKoskinen, there are any thing else can i do to fix that, Thanks. – Adham Mohamed Feb 23 at 9:29
  • I think you could try playing around with the selectors for the event delegation to see when it starts working. As a last resort you could try targeting the whole document (code example updated), but this might not be very efficient. Unfortunately I don't have any other suggestions. – Antti Koskinen Feb 23 at 13:45
  • You are amazing man, document working like a charm, Thanks so much. – Adham Mohamed Feb 23 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.