WordPress.org

Making WordPress.org

Opened 7 months ago

Last modified 7 months ago

#3854 assigned defect

Multiple Attendees Lists Shortcodes Breaks the Page

Reported by: milana_cap Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: needs-patch has-screenshots
Cc:

Description

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' )
		},

Attachments (1)

wceu-attendees.jpg (1023.5 KB) - added by milana_cap 7 months ago.

Download all attachments as: .zip

Change History (6)

#1 follow-up: @iandunn
7 months ago

  • Keywords dev-feedback removed
  • Priority changed from highest omg bbq to normal
  • Status changed from new to assigned

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.

#2 follow-up: @Kau-Boy
7 months ago

@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' ).

#3 in reply to: ↑ 1 @milana_cap
7 months ago

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.

#4 in reply to: ↑ 2 @iandunn
7 months ago

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 ?

#5 @Kau-Boy
7 months ago

@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.

Note: See TracTickets for help on using tickets.