0
votes

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>