Getting PowerReviews to load properly with AJAX

Question

We are using PowerReviews within our Magento store as an over-ride to the standard Magento review system. We have it set up for the Category, Product, and Review pages and has been working fine for some time now.

Recently I added a module which brings AJAX reload functionality to the filtered navigation on the category page. i.e. I choose "Red" as a filter and the category page refreshes without reload with the proper products. This works fine when I have Power Reviews turned off.

When Power Reviews is on, the AJAX begins to load but then the page goes white and only the PowerReviews <div> tags are shown. When I look at the PowerReviews code I think I can see the reason:

<script type="text/javascript">
  POWERREVIEWS.display.snippet(document, {
       pr_page_id : '49DAF4', 
       pr_write_review :    '/review/product/list/id/1907/category/111/#review-form',
       pr_read_review : txt, pr_snippet_min_reviews : 1});
</script>

Since the POWERREVIEWS.display.snippet is being called to 'document' what I think is happening is the AJAX load is happening, getting written to 'document' then the PowerReviews is happening and is also getting written to 'document'. Since this happens last, it hijacks the page instead of getting placed properly like it does on a normal load.

If I change 'document' to something like document.getelementbyid('PWR') and add a <div id="PWR"> the snippet will not show on page. Is there a way I can target the output of POWERREVIEWS.display.snippet to something other than 'document' so the two scripts don't interfere with each other?

Answer 1

PowerReviews actually provided an answer to this which works. They suggested using a JQuery delivery method to the DIV directly. Posting it here to help others.

1) Insert a JS include to a jquery library within the section (if you don't already):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

2) Use the write : function(content) syntax for the snippet function call:

<div id="pr_snippet_category_12345"> <script type="text/javascript">
POWERREVIEWS.display.snippet({ write : function(content) {
$('div#pr_snippet_category_12345').append(content); } }, { pr_page_id
: '12345', pr_snippet_min_reviews : '1' }) </script> </div>