4

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?

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

| improve this answer | |
  • I've implemented this but I'm still seeing the JSON response ;-( – Benek Lisefski Feb 12 '14 at 20:48
  • I still can't get this to work even with the above change. Would you mind taking another look at this one? – Benek Lisefski Mar 4 '14 at 7:34
  • Did you try using console.log(response) with the above solution (within the function (response) { ... } of course)? This might need a rewrite. load() might not be the best function to handle the response. – Solspace Mar 5 '14 at 6:33
  • I would suggest instead trying out the .ajax() method suggested in this solution's link. Adjust as needed based on your own situation. – Solspace Mar 5 '14 at 6:35
  • @Solspace - The link you provided in your answer is no more reachable - you have any idea where it has moved? – BNetz Mar 21 '18 at 10:25
0

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.

| improve this answer | |

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.