Tripadvisor小部件无法在Ajax页面加载中加载

Question

I am trying to add a Tripadvisor widget (rave) to my page which is loaded via Ajax. Here is the widget code:

<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
    <ul id="1NcDZBZ" class="TA_links 8dTZRew">
    <li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
    </ul>
    </div>
    <script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&amp;uniq=869&amp;locationId=946177&amp;lang=en_US&amp;border=true&amp;shadow=true&amp;backgroundColor=white"></script>

Only when the page loads the first time it's get rendered. But after an ajax load it doesn't.

I tried to use jQuery's getScript function but it doesn't help. Even manually deleting the added script en link nodes from the head before executing the script again doesn't help.

Can anyone help me fixing this please?

Answer 1

The solution:

$.getScript('//www.tripadvisor.fr/WidgetEmbed-selfserveprop?nreviews=6&uniq=&iswide=true&locationId=' + tid + '&rating=true&popIdx=true&border=false&writereviewlink=true&lang=fr', function() {
    if (typeof(window.taValidate) != 'undefined') {
      window.taValidate();
    }
  });

Answer 2

Perhaps the html iframe is a method.

ex.

<iframe src="tripadvisor.php" scrolling="no" frameborder="0"></iframe>

tripadvisor.php

<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&amp;uniq=869&amp;locationId=946177&amp;lang=en_US&amp;border=true&amp;shadow=true&amp;backgroundColor=white"></script>

Answer 3

A far from optimal solution which I had to adopt in a similar scenario was based on the following logic:

Invoke the tripavisor script just once and load the widget inside an hidden html element on whathever page the user lands (so the page is not rendered by an ajax request).

When the page where you want the widget placed is called by ajax, if the request is successfully completed, check if the widget is already in DOM, clone it and inject or append it to the ajax generated piece of html.

Answer 4

I found another solution. If you have the widget HTML on the page, or if you added it via jQuery to the page, eg this one:

<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>

you can execute this script below, and it will load the widget:

$.getScript("https://www.tripadvisor.com/WidgetEmbed-cdsscrollingravewide", function(){
    if (typeof(window.taValidate) != 'undefined') {
      window.taValidate();
    }
});

Please note that for example in my case the widget class is TA_ cdsratingsonlynarrow , so for me the script URL looks like this:

https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow