Tripadvisor widget fails to load on ajax page loading

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?

Having a similar issue with embedding a TripAdvisor widget in an Ember app. Did you ever find a good solution to this? I think the problem is that the script _inside_ the script tag uses document-write, which is a no-no once the page has already finished loading. — elsurudo, Feb 06 '14 at 15:30
Yeah, I simply get the TripAdvisor image as well. I asked TripAdvisor support about it, and they simply say it's not supported for AJAX-y apps... I'm hoping there is a workaround. Perhaps iframes? — elsurudo, Feb 08 '14 at 13:12

score 2 · Answer 1 · 2013-11-21T21:06:48.467

2

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();
    }
  });

edited Nov 21 '13 at 21:06

answered Nov 21 '13 at 20:50

score 2 · Answer 2 · answered Nov 12 '15 at 03:54

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>

rb_x · Accepted Answer · 2015-02-03T00:33:39.063

0

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.

edited Feb 03 '15 at 00:33

answered Feb 03 '15 at 00:26

rb_x

66
2

That's probably the best way to go. Too bad TA still hasn't updated their widgets. The looks are very outdated as well. – Cyril Mestrom Feb 03 '15 at 08:40

score 0 · Answer 4 · answered Sep 25 '19 at 08:45

I found another solution. If you have the widget HTML on the page, or if you added it via jQuery to the page, e.g. 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

Tripadvisor widget fails to load on ajax page loading

4 Answers4

tripadvisor.php

Linked