Multiple Trip Advisor widgets not displaying

Hi,

I am trying to integrate a trip advisor widget onto a page that lists a number of hotels, I have an issue where it seems that anything more than 1 widget results in only the first one showing, and then all after that don’t show as seen in the link below.

dev trip advisor page

This is my code.

<?php $r=mysql_query("SELECT Id_Hot, review_id FROM tbl_hotels WHERE (Id_Hot=".$q['Id_Hot'].")");
while($q=mysql_fetch_array($r)){ 
$new_Id = $q['review_id']; } ?> 
<div style="position:relative; float:right; height:105px; width:137px; padding-top:8px;">
<div id="TA_cdsratingsonlynarrow55" class="TA_cdsratingsonlynarrow"><ul id="4YluQb7Xg6T7"  class="TA_links 9UCk5jFR"><li id="51TBQy3" class="7kHiOmff"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=55&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2"></script></div>

Why I’m posting in this forum is because I’m wondering if its a multiple jscript call that its not handling well, as it seems that it only likes to load the first one then seems to ignore the remaining 9 on the page.

I have also taken out every other script out of the page to see if there is a conflict and there isn’t, as there the google map etc, but it still didn’t work.

A link to the API of that widget would be helpful. Where do you specify where the HTML of the widget should be placed? The console logs 9 errors saying “Uncaught TypeError: Cannot read property ‘removeChild’ of null”, which indicates that the widgets can’t find the elements where they are supposed to put their content.

That’s all the code you get with this widget, the locationId that is needed is in the db and is passed through to this widget via $new_Id via a loop, and it outputs the widget onto the page via that code too, that’s all that’s needed I think, as we have a similar widget working in just the same way on the detail page, the only difference is the widget code the same being that you pass the locationId to it via php.

It seems the first one is fine to be loaded, but any more after that don’t seem to connect to trip advisor to get the widget to display.

This is our first time at this, and at the moment this is all we are working with, if there further additions such as an api key then we are unaware of it.

OK have just read the below as you mentioned API -

And so yes as we are dealing with widgets in bulk we need to get the API key it seems, so we will have to sort that out by the looks, so thanks for the advice.

So it simply generates the widget in the node of the DOM where the script is being executed? In this case it seems to be a bug within the widget itself… you should probably contact the vendor about it.

Now I just had a quick look at the widget code, and what strikes me first is that it’s not even within an IIFE, so multiple instances of the widget are likely to interfere with each other. Also it seems terribly inefficient to me to fetch the code from the server again for every single instance.

EDIT: It seems that the field uniq in the script’s query string is supposed to give the unique identifier of the element which should contain the widget, but you have set it to 55 everywhere. If you increment both the uniq value in the query string as well as the number-part of the ID of the container element (id="TA_cdsratingsonlynarrow55") for every widget it might work.

Am I missing something?
It looks odd to have the same GET variable name used more than once

?pagesize=10
&pagesize=10
&pagesize=10
&pagesize=10
&pagesize=10
&Country=5
&regions=
&category=
&star=
&absolutepage=2
&absolutepage=3
&absolutepage=4
&absolutepage=1
&absolutepage=7

No your not missing anything, that was something that I needed to come back to for sure, its not the best.

I have basically inherited this site from a previous employee so I’ve got a bit to do, but would be open to suggestions if you had a way to fix that issue.

Well, that’s a PHP page.
If you do a var_dump($_GET) on the page, are all of the GET variables there as expected?

Hi guys, I hope I can carry on with it in this thread.

I figured out the main issue with the multiple tripadvisor widgets now showing, and basically it was because I didn’t have an API Key which I now have.

They sent documentation but there hardly any advice on it at all. So I have the following code which is creating the widget for each hotel, but I need it to work with the API key but haven’t a clue where to start with it, and if what I got already can work with it.

<?php $r=mysql_query("SELECT Id_Hot, review_id FROM tbl_hotels WHERE (Id_Hot=".$q['Id_Hot'].")");
while($d=mysql_fetch_array($r)){ 
$new_Id = $d['review_id']; }
?> 
<div id="TA_cdsratingsonlynarrow55" class="TA_cdsratingsonlynarrow"><ul id="4YluQb7Xg6T7" class="TA_links 9UCk5jFR"><li id="51TBQy3" class="7kHiOmff"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=55&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2"></script></div>
<?php }
}
?>

I’m not sure at all, how what I got works with the API key.

To showcase how this is working, I have put a demo on the live server.

The hotels are display on a loop, and the code above is inside that loop looking to display to trip advisor widget.

Here is the link - Demo tripadvisor work

I kicked it off by adding the API key into the www.jscache.com string, but that didn’t work as below.

<div id="TA_cdsratingsonlynarrow55" class="TA_cdsratingsonlynarrow"><ul id="4YluQb7Xg6T7" class="TA_links 9UCk5jFR"><li id="51TBQy3" class="7kHiOmff"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=55&amp;?key=<CONTENT API KEY HERE>&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2"></script></div>

Apparently TripAdvisor is aware of this issue, but has yet to do anything about it. Thankfully, the solution is rather simple.

The problem is with the link for www.jscache.com in the snippet of code that is auto-generated by TripAdvisor for the widget.

Copy the jscache.com link from the snippet of code, paste it into a web browser then copy the tripadvisor link that appears in the page (none of the other code is necessary). You will need to add an s to the http.

The next step is to fix the img src link by placing an s after the http there also.

That’s it.

Hi,

Ok so Im on the right path then that’s good.

I trimmed the code to below, which I would really appreciate if you can say if its ok or not.

<?php $r=mysql_query("SELECT Id_Hot, review_id FROM tbl_hotels WHERE (Id_Hot=".$q['Id_Hot'].")");
while($d=mysql_fetch_array($r)){ 
$new_Id = $d['review_id']; }
?> 
<script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=55&amp;key=mykey&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2"></script></div>
<?php }
}

?>

I am using the location Id as the determinator, and there the s after http, but I’m still not getting anything.

It seems though I need to add all the code that was there to show the widget, as now with below I get the tripadvisor logo but not the widget

 <div style="position:relative; float:right; height:105px; width:137px; padding-top:8px;">
<div id="TA_cdsratingsonlynarrow55" class="TA_cdsratingsonlynarrow"><ul id="4YluQb7Xg6T7" class="TA_links 9UCk5jFR"><li id="51TBQy3" class="7kHiOmff"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=55&amp;key=mykey&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2"></script></div>
</div>

Sorry I didn’t read your advise properly, So took the jsache string put it in the browser and took the code that appeared and pasted it into the page, and was excited to think I got it and it still didn’t work.

This is where its at now

<?php $r=mysql_query("SELECT Id_Hot, review_id FROM tbl_hotels WHERE (Id_Hot=".$q['Id_Hot'].")");
while($d=mysql_fetch_array($r)){ 
$new_Id = $d['review_id']; }
?> 
<div style="position:relative; float:right; height:105px; width:137px; padding-top:8px;">
<div id="TA_cdsratingsonlynarrow55" class="TA_cdsratingsonlynarrow"><ul id="4YluQb7Xg6T7" class="TA_links 9UCk5jFR"><li id="51TBQy3" class="7kHiOmff"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div>
<script src="https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?key=4c3f4e7957b444ce9ffa0d9b420fab8b&amp;locationId=<?php echo $new_Id ?>"></script>
</div>
</div>    
<?php } } ?>

Still working here - Dev Area

On the same page -

Dev Area

I have now added a second chunk of code and I’m still getting a broken result, this is what I have just added to compare

<div id="TA_cdsratingsonlynarrow832" class="TA_cdsratingsonlynarrow">
<ul id="rFAiBwKvY" class="TA_links xD2OZu">
<li id="ZH3c0ukfwJ8J" class="6hh4RG3tfV">
<a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_UK&amp;border=true&amp;display_version=2&amp;key=4c3f4e7957b444ce9ffa0d9b420fab8b"></script>

I have also now added a third script to the same area and still nothing works, this is strange

<div id="TA_cdsratingsonlynarrow832" class="TA_cdsratingsonlynarrow">
<ul id="rFAiBwKvY" class="TA_links xD2OZu">
<li id="ZH3c0ukfwJ8J" class="6hh4RG3tfV">
<a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://api.tripadvisor.com/api//partner/2.0/location/<?php echo $new_Id ?>/hotels?key=4c3f4e7957b444ce9ffa0d9b420fab8b"></script>

Blimey this is difficult, there just doesn’t seem to be any help on the internet for this sort of development.

I have the API key and am adding it to the script string and although I can get one tripadvisor widget to work the rest don’t show, where as the point of the API key is to allow multiple hotel reviews on one page.

I have the following code

<div id="TA_selfserveprop415" class="TA_selfserveprop"><ul id="VF2fqb" class="TA_links PVemUtf"><li id="11pb03lzdYB3" class="Y2pceDL"><a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.tripadvisor.com/WidgetEmbed-selfserveprop?locationId=<?php echo $new_Id ?>&amp;writereviewlink=true&amp;rating=true&amp;border=true&amp;uniq=415&amp;iswide=false&amp;popIdx=true&amp;lang=en_UK&amp;nreviews=0&amp;display_version=2&amp;key=4c3f4e7957b444ce9ffa0d9b420fab8b"></script>

Which can be seen working on the following page

dev page

The reason for it not working I don’t have a clue, and literally cant find any help anywhere. And I have also added a thread on the google tripadvisor API forum, but have had no feedback at all, its a complete mystery.

I must be miles off, and in honesty I got no experience with API’s, so I don’t even know where to start or where I’ve gone wrong lol

I added this into the mix too, without any positive results

<div id="TA_cdsratingsonlynarrow832" class="TA_cdsratingsonlynarrow">
<ul id="rFAiBwKvY" class="TA_links xD2OZu">
<li id="ZH3c0ukfwJ8J" class="6hh4RG3tfV">
<a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="http://api.tripadvisor.com/api/partner/2.0/location/<?php echo $new_Id ?>?key=4c3f4e7957b444ce9ffa0d9b420fab8b"></script>

I’ve made some progress with the changes below, and have checked that the locationId gets the correct id from the db and it does.

One of the widgets shows up, but the rest don’t.

<div id="TA_cdsratingsonlynarrow533" class="TA_cdsratingsonlynarrow">
<ul id="FYh56g9z" class="TA_links GIzYFN">
<li id="0GFw8Yrh" class="liFJtFyCg">
<a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=533&amp;locationId=<?php echo $new_Id ?>&amp;lang=en_US&amp;border=true&amp;display_version=2&amp;key=4c3f4e7957b444ce9ffa0d9b420fab8b"></script>

I got it thank you.

I needed to have the div id’s as unique id’s, they where using the same id all the way down.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.