The "booking.com" hotel listings widget is not launching with the "iframes" as required, in case of my dynamic table listing.
Hence I tried to create an .init(Booking) function by nesting the javascript of the widget within another function that I named 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 applied the .Init(Booking) to the jquery script which creates the html with the respective booking 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)
});
});
However, this is not working and the 'iframes' in the widget still do not load. I get the error "Uncaught ReferenceError: Booking is not defined". How do I solve this?
Full code below:
jQuery(document).ready(function ($) {
var StatJSON = {
"Option1": {
"ColHeading": "Lansdowne",
"Hotel": "2220961/-2102492/city",
},
"Option2": {
"ColHeading": "Dehradun",
"Hotel": "2220961/-2102492/city",
},
"Option3": {
"ColHeading": "Mussoorie",
"Hotel": "2220961/-2102492/city",
},
};
jQuery('#btnSubmit').click(function() {
var data = [];
jQuery("#selection").find(':selected').each(function(e) {
var this_input = jQuery(this);
if (this_input.is(':selected')) {
data.push(this_input.val());
}
});
$('#divResult').empty().append(PrintTable(data));
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)
});
});
function PrintTable(data) {
var html = '<table class="compTable"><thead><tr><th>';
if (data && data.length) {
html += '</th>';
jQuery.each(data, function(i) {
//getting heading at that key
html += '<th>' + StatJSON[data[i]].ColHeading + '</th>';
});
html += '</tr>';
html += '<tbody>';
jQuery.each(StatJSON[data[0]], function(k, v) {
html += '<tr>';
if (k != "ColHeading") {
html += '<td>' + k + '</td>';
}
jQuery.each(data, function(k2, v2) {
if (k != "ColHeading") {
html += '<td>' + StatJSON[data[k2]][k] + '</td>';
}
});
html += '</tr>';
});
} else { html += 'No results found</td></tr>'; }
html += '</tbody></table>';
return html;
}
});
(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');
});
body{
font-family: montserratbold, montserratregular, sans-serif;
}
.compTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 10px;
border: 1px solid #222;
text-align: center;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selection" multiple="multiple">
<option value="Option1">Lansdowne</option>
<option value="Option2">Dehradun</option>
<option value="Option3">Mussoorie</option>
<br />
<input id="btnSubmit" class="button" type="submit" value="submit"/>
</select>
<br /><br />
<div id="divResult" class="divResult"></div>