Multiple Attendees Lists Shortcodes Breaks the Page

[milana_cap]

When multiple attendees lists shortcodes are used on the same page, only the first list is displayed properly while avatars are broken for the rest.

I guess this is because every instance of [camptix_attendees] shortcode is creating div with ID tix-attendees, which is then used in Javascript file (camptix/camptix.js) for rendering avatars.

var lazyLoad = {
		cache: {
			$document:  $( document ),
			$attendees: $( '#tix-attendees' )
		},

[iandunn]

Thanks for reporting that Milana.

The solution will need to take backwards-compatibility into account, so I think the id will have to stay, even though it's not valid to have duplicate ids on the same page.

My first thought would be to just add a new class="tix-attendees" attribute to the element, and use that when initializing the lazy-loader.

[Kau-Boy]

@iandunn we might just use a jQuery selector like $( '#tix-attendees, .tix-attendees' ) if using only the class selector breaks backwards-compability. Or we use the tix-attendee-list class on the <ul> we already have. This should also work with the following find for lazyLoad.cache.$attendees.find( '.avatar-placeholder' ).

[milana_cap]

Replying to iandunn:

Thanks for reporting that Milana.

The solution will need to take backwards-compatibility into account, so I think the id will have to stay, even though it's not valid to have duplicate ids on the same page.

My first thought would be to just add a new class="tix-attendees" attribute to the element, and use that when initializing the lazy-loader.

Thank you and sorry for the highest omg bbq :)

I agree with @Kau-Boy: using the existing class seems like the best backwards-compability strategy.

[iandunn]

Replying to Kau-Boy:

@iandunn we might just use a jQuery selector like $( '#tix-attendees, .tix-attendees' ) if using only the class selector breaks backwards-compability. Or we use the tix-attendee-list class on the <ul> we already have. This should also work with the following find for lazyLoad.cache.$attendees.find( '.avatar-placeholder' ).

Hmm, I'm confused a bit. The back-compat issues I was thinking of were things like custom CSS rules targeting #tix-attendees, rather than anything related to switching the lazy-loading selector. Can you think of any problems that would be caused by using a selector like $( '.tix-attendees' ) without targeting #tix-attendees ?

[Kau-Boy]

@iandunn I would keep the id attribute as is to avoid breaking the CSS of some old pages (even though identical ids should not be used). I also think it's save to just use $( '.tix-attendees' ) as the only selector. This should not break anything.

[milana_cap]

Changing it to ul class tix-attendee-list will not break anything as this class is already there. This specific selector is used only for displaying avatars so nothing else is affected by this change. I added patch with it.

[coreymckrill]

#3631 was marked as a duplicate.

[iandunn]

Doh, y'all are right, @milana_cap's initial patch is perfect. I'm not sure what I was thinking in comment:1 :facepalm:

Fixed in link ​camptix-2cf128ed :)