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.

Maybe the `Booking_com` component is instantiated only the first time you open the dialog, and not the second time around? Do you have any errors in your browser's console? What if you console.log some text in `ngAfterViewInit()`, do you see this text the second time you try to open the dialog? — AngularChef, May 24 '17 at 19:55
No errors are thrown the second time I open the booking_com component. I have added console.log("hello") statements before and after the booking.com logic, and those statements are executed but the html still does not render... — slipperypete, May 25 '17 at 12:52
The same behavior occurred when using this component in a bootstrap modal, but when I place the booking.com component in a route, and route to it, then it loads every time. — slipperypete, Jun 06 '17 at 17:24
*edit...it used to work every time but now it exhibits the same behavior as I am experiencing above. — slipperypete, Jun 06 '17 at 17:45

Andriy · Accepted Answer · 2017-06-07T05:45:14.967

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

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

1 Answers1