Can initialize booking.com form 1 time but not again with ngOnInit

Question

So I am using angular materials with angular4 and I have put html for a booking.com form inside an MdDialogue component. I want this dialogue to popup with the form inside of it when somebody pushes a button. It works as expected 1 time after the app has loaded, but not again. I would like it to work every time. There is no error message so it is unclear to me why this is happening. The logic inside booking() initializes the form.

The html for the booking.com form looks like this.

<ins class="bookingaff" data-aid="1179852" data-target_aid="1179846" data-prod="nsb" data-width="100%" data-height="auto">
  <!-- Anything inside will go away once widget is loaded. -->
  <a href="//www.booking.com?aid=1179846">Booking.com</a>
</ins>

Here is what the booking.com component looks like...

...
     openBookings(){
        let dialogRef = this.dialog.open(Booking_com);
        dialogRef.afterClosed().subscribe(result => {
        });
      }

      debug(data){
        console.log(data);
      }



    }

    @Component({
      selector: 'Booking_com',
      templateUrl: 'Booking_com.html',
      styleUrls: ['Booking_com.sass']
    })
    export class Booking_com implements AfterViewInit{


      ngAfterViewInit(): void {
        this.booking();
      }

      constructor(public dialogRef: MdDialogRef<Booking_com>) {}


      booking(){
        (function(d, sc, u) {
          var s:any =  d.createElement(sc);
          var p:any =  d.getElementsByTagName(sc)[0];
          s.type = 'text/javascript';
          s.async = true;
          s.src = u + '?v=' + (+new Date());
          p.parentNode.insertBefore(s,p);
        })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
      }
    }

The images show that it works the first time but not he second time.... Any idea as to why this is happening and how to solve this issue would be great.

Answer 1

Examining affiliate script we can see, that when this script is loaded, it calls once BookingAff.run() function, which looks like:

function u() {
  if (_i_("5fc:14"), u.already_ran) return _r_();
  u.already_ran = !0;

it exits if already_ran flag is already set. So we will need to unset it on every modal open:

// reset already_ran flag
if (window.BookingAff && window.BookingAff.run.already_ran) {
  window.BookingAff.run.already_ran = false;
}

Because of these 2 reasons, booking form is rendered only once at the very first modal open.

also there is an origin check, which allows only booking.com or bstatic.com origins:

var r, i = new RegExp("(booking|bstatic).com$");
if (!e.origin.match(i)) return _r_();

so we cannot just run BookingAff.run() on each modal open from our domain.

The easiest solution would be to call booking() function on each modal open (of course, after resetting already_ran flag).

plunker: https://plnkr.co/edit/IlAa7XJDjQIxd6IgKXIe?p=preview

there is a JS error in my plunker saying

ERROR Error: The selector "dialog-overview-example-dialog" did not match any elements

it comes from the original Google's example at https://material.angular.io/components/component/dialog and their plunker link