Creating a .init() script for booking.com widget not working

[mithunuchil]

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 Reference Error: Booking is not defined ". How do I solve this?

JS Fiddle: https://jsfiddle.net/3r4210Lb/1/

[Paul_Wilkins]

(function(Booking) {
  ...
});

That is an anonymous function with a function parameter called Booking. That will always be undefined.

I suspect that you are wanting it to be a function instead that’s called Booking.

Note: Best-practice is to always use lowercase for the initial character of a function name. Uppercase should only be used for the first character of a function name when that function is a constructor.

The following is a function called booking that should work for you.

function booking() {
  ...
}

[mithunuchil]

Hi Paul! Many, many thanks for that timely reply. As you have mentioned function booking() works and the widgets launch in my table.

But for some reason it only works one time. When I change my selection in the drop-down down menu and press ‘submit’, to change the table, the .init(booking) doesn’t fire although I have nested it within the ‘button click’ function.

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)
 }); 
});

Do please have a look at the below functioning jsfiddle:

Edit fiddle - JSFiddle - Code Playground

Once again, many, many thanks for your timely replies. It has been extremely helpful.

[Paul_Wilkins]

To help me make sense of this, I try and put together a list of expected behaviour, and compare with actual behaviour.

The expected behaviour is:

1. Select one or more options
2. Click on submit and expect those options to display
3. Select one or more options
4. Click on submit and expect those options to display

Currently part 4 isn’t working.

A simple test is to put a console.log() statement in the function, so that we can check that the function runs.

function booking() {
    console.log("booking function");
    ...
}

On selecting some options and clicking submit the first time, the browser console shows booking function and on selecting other options and clicking submit, the browser console shows a second booking function

So the function is being run. That’s good confirmation there.

That leads us to the next question. Even though the function is being run, why doesn’t the page update as it is expected to?

The Network panel can help to give us more insight there.

When selecting an option and clicking submit, the network panel shows a JS file being added, which fetches the HTML section to show on the page.

Doing that a second time with a different option shows that the JS file is being added, but nothing else is being fetched from the server.

Checking the rest of the booking function, things look to be working perfectly well after the second click:

        p.parentNode.insertBefore(s,p);
        console.log({d, sc, u, s, p});

{
  d: document,
  sc: 'script',
  u: '//cf.bstatic.com/static/affiliate_base/js/flexiproduct.js',
  s: script,
  p: script
}

Everything else in the booking function looks to be working fine, which leads me to conclude that there’s some kind of problem with the booking.com API, when it comes to being loaded multiple different times on the same page.

Unfortunately the booking.com technical documentation is not available to anyone that isn’t signed up to them.

This looks to be an issue that can only be solved by someone with access to that documentation, or perhaps their help support.

[mithunuchil]

Thanks a lot Paul, for all the effort you’ve taken. I’m trying to see if I can get in touch with some kind of online support they have, unfortunately no such link or support seems available. Hopefully should get something soon. Thanks again for all the help!!