I am trying to get some HTML elements from code that is rendered by a TripAdvisor Widget.
<div id="TA_selfserveprop423" class="TA_selfserveprop" style="display: none;">
<ul id="6rK9LP" class="TA_links 6OfnXtypSP7O">
<li id="vWwqKw7sl" class="PhWrYsr"><a href="http://www.tripadvisor.com/" target="_blank"><img src="http://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" /></a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=selfserveprop&uniq=423&locationId=3386635&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2">
</script>
The code that is rendered has this element, which is the one that I want to get with jQuery:
<ul class="widSSPBullet">
<li> <span class="widSSPDate">Jan 8, 2016:</span> <span class="widSSPQuote">“Great week in cabo”</span> </li>
<li> <span class="widSSPDate">Dec 20, 2015:</span> <span class="widSSPQuote">“Plesent stay”</span> </li>
<li> <span class="widSSPDate">Nov 1, 2015:</span> <span class="widSSPQuote">“Great stay”</span> </li>
<li> <span class="widSSPDate">Oct 26, 2015:</span> <span class="widSSPQuote">“Marina Sol is Awesome!”</span> </li>
<li> <span class="widSSPDate">Sep 19, 2015:</span> <span class="widSSPQuote">“Warm and welcoming and best location in...”</span> </li>
</ul>
However, it looks like it doesn't get rendered until after the document is ready, and maybe even after the window is loaded. Maybe I am doing something wrong, but is there a way to wait until the element is loaded and then grab it with jQuery. Ideally, I'd like to get the full reviews via a widget or API from Trip Advisor, but I don't think they provide that. I looked at parsing the review page, but there is a cross origin issue with that with AJAX, and it seems so with JSONP.
If they really neither expose a public API nor an event system in their widget, the simplest approach would be polling:
var tripAdvisorCheck = setInterval(function () {
$(".widSSPBullet").each(function () {
clearInterval(tripAdvisorCheck);
// do something with $(this)
});
}, 250);
This runs every 250 ms, until at least one .widSSPBullet
is found in your page, at which point it disables itself and lets you do whatever you intend to do with the element.
A more high-tech approach would be to watch for the creation of a certain element using a MutationObserver, downside is non-universal browser support (at least currently) and it's more code to write as well.