Solspace Rating vote up/down using AJAX

Question

I'm trying to use AJAX to streamline the Rating Vote feature of Solspace Rating so the success or error code from the {exp:rating:insert_rating_vote} tag.

In my {rating:entries} template I have this code for the up down voting links:

{exp:rating:rating_vote_stats rating_id="{rating_id}"}
{if not_already_voted}<span class="helpful"><strong>Was this review helpful?</strong><span class="voters"><a href="/vendor/rating-vote/{rating_id}/up/" class="yes">Yes</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/vendor/rating-vote/{rating_id}/down/" class="no">No</a></span><span class="ajax-response"></span></span>{/if}
{if already_voted}<span class="helpful"><strong>Was this review helpful?</strong><span class="ajax-response">Thanks for your vote</span></span>{/if}
{if total > 0}<span class="light people-like">{up_votes}/{total} people liked this review</span>{/if}
{/exp:rating:rating_vote_stats}  

And the /vendor/rating-vote template those links point to contains this:

{exp:rating:insert_rating_vote
    rating_id="{segment_3}"
    allow_duplicates="no"
    duplicate_check_guest_ip="no" 
}
{if failure}Error!{/if}{if success}Thanks for your vote{/if}
{/exp:rating:insert_rating_vote}

This setup works as expected. When I click the link I go to that simple template which returns my failure or success message and the up/down vote is recorded and shows in my stats. I see:

Thanks for your vote

When I try to load the template via AJAX is doesn't work as expected.

I'm using this JS code:

$(".voters .yes, .voters .no") .click (function() {
    var link = $(this).attr("href")
    var $helpful = $(this).closest(".helpful");
    $helpful.find(".ajax-response").load(link, function() {
        $helpful.find(".voters").hide();
    });
    return false;
});

This works except the content loaded into my span is not the same as the ouput I got before. This is what I get in my template where I would expect the simple success message:

{"success":true,"failure":false,"message":"Your input is appreciated.","already_reviewed":false,"not_already_reviewed":true,"prior_review_count":0,"count":1}

Any advice on how to get this working?

Answer 1

Try:

$helpful.find(".ajax-response").load(link, function(response, status, xhr) {
    $helpful.find(".voters").hide();
    $helpful.find(".ajax-response").html(response.message);
});

Ajax submissions return a JSON array as a response. You need the correct key (in this case .message) in this array to display only text.

Another method for general-purpose ajax submissions can be found here: http://support.solspace.com/solution/categories/115922/folders/190597/articles/119581-simple-jquery-ajax-script

Answer 2

I had success with a modified version of the generic ajax code linked by Solspace:

$(".voters .yes, .voters .no") .click (function(e) {
        e.preventDefault();
        var link = $(this).attr("href")
        var $helpful = $(this).closest(".helpful");
        $.ajax({
            url: link,
            success: function(results){  
                    $helpful.find(".voters").hide();
                    $helpful.find(".ajax-response").html("Thanks for your vote");
                },
            error: function(results){
                    $helpful.find(".ajax-response").html("Error - vote not counted");
            }
        });
    });

However, in my {exp:rating:insert_rating_vote} templates I have messages for success and failure like this:

{exp:rating:insert_rating_vote
    rating_id="{segment_3}"
    allow_duplicates="no"
    duplicate_check_guest_ip="no" 
}
{if failure}Error!{/if}{if success}Thanks for your vote{/if}
{/exp:rating:insert_rating_vote}

But with this ajax method my messages where not being sent (I was seeing the default response) even when using results or results.message as the HTML output. So I ended up hard coding the response into the JS - not ideal but in my case works fine.