WordPress.org

Making WordPress.org

Opened 15 months ago

Closed 5 months ago

#3854 closed defect (fixed)

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 15 months ago.
3854.patch (333 bytes) - added by milana_cap 7 months ago.

Download all attachments as: .zip

Change History (11)

#1 follow-up: @iandunn
14 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
14 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
14 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
14 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
14 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 months ago

#6 @milana_cap
7 months 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
6 months ago

  • Keywords has-patch added; needs-patch removed

#8 @coreymckrill
6 months ago

#3631 was marked as a duplicate.

#9 @iandunn
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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 :)

Note: See TracTickets for help on using tickets.