I’m trying to get the “Booking.com Deals Finder” widget to load it’s hotel listings in a table according to the codes from the JSON below:
var StatJSON = {
"Option1": {
"ColHeading": "Lansdowne",
"Hotel": "2220961/-2102492/city",
},
"Option2": {
"ColHeading": "Dehradun",
"Hotel": "2220961/-2102492/city",
},
"Option3": {
"ColHeading": "Mussoorie",
"Hotel": "2220961/-2102492/city",
},
};
The Table is populated by the following code:
jQuery('#divResult table tbody tr td').each(function ($) {
if (jQuery(this).text() == 'Hotel') jQuery(this).nextAll("td").each(function ($) {
var DataAid = jQuery(this).text().split('/')[0];
var DestAid = jQuery(this).text().split('/')[1];
var DestType = jQuery(this).text().split('/')[2];
jQuery(this).html('<div style="width:100%; margin-top:4px;"><ins class="bookingaff" data-aid="'+ DataAid +'" data-target_aid="'+ DataAid +'" data-prod="dfl2" data-width="100%" data-height="auto" data-lang="en" data-dest_id="'+ DestAid +'" data-dest_type="'+ DestType +'" data-df_num_properties="3"><a href="//www.booking.com?aid='+ DataAid +'">Booking.com</a></ins></div>')
})
});
});
The function for the widget is kept at the end of the ‘script’ as below:
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = 'text/javascript';
s.async = true;
s.src = u + '?v=' + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, 'script', '//cf.bstatic.com/static/affiliate_base/js/flexiproduct.js');
However the “iframes” in the widget were not initializing as required when the table is populated.
Hence, I tried using the “.init()” to initialize the function every-time the table is populated. I nested the booking.com script into another function calling it ‘Booking’ as below:
(function(Booking) {
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = 'text/javascript';
s.async = true;
s.src = u + '?v=' + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, 'script', '//cf.bstatic.com/static/affiliate_base/js/flexiproduct.js');
});
And then I use .init(Booking) to call upon the jquery everytime the cell is populated with the respective codes as below.
jQuery('#divResult table tbody tr td').each(function ($) {
if (jQuery(this).text() == 'Hotel') jQuery(this).nextAll("td").each(function ($) {
var DataAid = jQuery(this).text().split('/')[0];
var DestAid = jQuery(this).text().split('/')[1];
var DestType = jQuery(this).text().split('/')[2];
jQuery(this).html('<div style="width:100%; margin-top:4px;"><ins class="bookingaff" data-aid="'+ DataAid +'" data-target_aid="'+ DataAid +'" data-prod="dfl2" data-width="100%" data-height="auto" data-lang="en" data-dest_id="'+ DestAid +'" data-dest_type="'+ DestType +'" data-df_num_properties="3"><a href="//www.booking.com?aid='+ DataAid +'">Booking.com</a></ins></div>')
}).init(Booking)
});
});
This however doesn’t work and I get an error Uncaught ReferenceError: Booking is not defined .
How do I ensure that the widgets initialize everytime the table is loaded??
Full working code in below fiddle: