Favouriting a Custom Post Type

by

You should not be using element IDs more than once, instead you should be using classes.

Without going into to much detail try the adjustments below…

Change the following:

<a href="#add-to-favorite" id="add-to-favorite">
    <i class="fa fa-star-o"></i>&nbsp;
    <span class="add-to">Add to Favourites</span>
</a>

…to

<a href="#add-to-favorite" class="add-to-favorite">
    <i class="fa fa-star-o"></i>&nbsp;
    <span class="add-to">Add to Favourites</span>
</a>

Change your JS to:

$('a.add-to-favorite').click(function(eve){
    eve.preventDefault();
    eve.stopPropagation();
    var $context = $(this); //cache the click context here
    var $star = $context.find('i');
    var add_to_fav_options = {
        target:        ('#fav-target'),   // target element(s) to be updated with server response
        beforeSubmit:  function(){
            $star.addClass('fa-spin');
        },  // pre-submit callback
        success: function(){
            $star.removeClass('fa-spin');
            $context.hide(0,function(){
                //find the #fav-output element based on click context
                $context.find('#fav-output').delay(200).show();
            });
        }
    };

    $('#add-to-favorite-form').ajaxSubmit( add_to_fav_options );
});

note: untested

Update #2:

JavaScript…

$('.add-to-fav').click(function(eve){
    eve.preventDefault();
    eve.stopPropagation();
    var $context = $(this); //cache the click context here
    var $add_to_favorite = $context.find('a.add-to-favorite');
    var $star = $add_to_favorite.find('i');
    var add_to_fav_options = {
        target: $context.find('.fav-target'), // target element(s) to be updated with server response
        beforeSubmit:  function(){
            $star.addClass('fa-spin');
        },  // pre-submit callback
        success: function(){
            $star.removeClass('fa-spin');
            $add_to_favorite.hide(0,function(){
                //find the #fav-output element based on click context
                $add_to_favorite.find('.fav-output').delay(200).show();
            });
        }
    };

    $context.find('.add-to-favorite-form').ajaxSubmit( add_to_fav_options );
});

HTML…

<span class="add-to-fav">
    <?php
    $property_id = get_the_ID();
    if(is_added_to_favorite($property_id)) {
        ?>
        <div class="fav-output show">
            <i class="fa fa-star"></i>&nbsp;
            <span class="fav-target">Added to Favourites</span>
        </div>
        <?php
    } else {
        ?>
        <form action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="add-to-favorite-form">
            <input type="hidden" name="property_id" value="<?php echo $property_id; ?>">
            <input type="hidden" name="action" value="add_to_favorite">
        </form>
        <div class="fav-output">
            <i class="fa fa-star"></i>&nbsp;
            <span class="fav-target">Added To Favourites</span>
            <span class="property-target-<?php echo $property_id; ?>" data-property-id="<?php echo $property_id; ?>"></span>
        </div>
        <a href="#add-to-favorite" class="add-to-favorite">
            <i class="fa fa-star-o"></i>&nbsp;
            <span class="add-to">Add to Favourites</span>
        </a>
        <?php
    }
    ?>
</span>

Leave a Comment