Launching a popup page in a custom widget

Liberty Create - Build Advice
1

Hi, I’m building a custom widget to display housing repairs bookings. I’d like to launch a popup when a booking is clicked on, so I’ve used the following html:

<a :href="bkpopurl+booking.id" class="no_history task-popup action_link modal_subpage" :data-subpage_id="bkpopid" data-display_footer="0" data-ts_interaction="link">
{{ booking.address }}
     <span class="sr-only">, Record {{ booking.id }}</span>
</a>

This works fine, unless I select a day with no bookings, such as a Sunday and then select a day with bookings. Clicking a booking then doesn’t launch the popup.

It seems like maybe there’s an event listener that gets removed and not re-added when the html elements change?
Thanks,
James

2

Found a solution - you just need a dummy anchor element that’s always rendered (but with no text so it appears hidden) and then you can just set the href attribute when a booking is clicked on, then you can use the ‘.click()’ method to simulate it being clicked:

		showPopup:function(booking){
			var el = document.getElementById('dummy-booking-link');
			if(el){
				el.href = this.bkpopurl + booking.id
				el.click();
			}
	}