WordPress.org

Making WordPress.org

Opened 9 months ago

Last modified 2 days 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: has-screenshots has-patch
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 (2)

wceu-attendees.jpg (1023.5 KB) - added by milana_cap 9 months ago.
3854.patch (333 bytes) - added by milana_cap 7 weeks ago.

Download all attachments as: .zip

Change History (10)

#1 follow-up: @iandunn
9 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
9 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
9 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
9 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
9 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.

@milana_cap
7 weeks ago

#6 @milana_cap
7 weeks ago

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.

#7 @milana_cap
11 days ago

  • Keywords has-patch added; needs-patch removed

#8 @coreymckrill
2 days ago

#3631 was marked as a duplicate.

Note: See TracTickets for help on using tickets.