WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

#26005 closed defect (bug) (duplicate)

customize-preview.js and in-page anchors

Reported by: afercia Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.4
Component: Appearance Keywords:
Focuses: Cc:

Description

thx to this answer by Otto, I finally got the reason of some weirdness in the customizer preview.
About this line:
this.body.on( 'click.preview', 'a', function( event ) ...
the problem here is that selecting 'a' is a bit too generic and it will affect also "in-page links", causing a POST request and then some ajax voodoo even when the link is an in-page anchor.
Just two examples:

jQuery UI tabs use in page anchors with an href like:
href="#tabs-1"
href="#tabs-2"

many developers use a href="#" and then jQuery preventDefault(); to reveal/hide content, effects, whatever...

Say you're in the customizer preview in some *internal* page of your site, then you click on a link with href="#" and... you get the homepage.
That's because the actual link will be interpreted as http://yoursite.com/# and the POST request will be triggered even if you use jQuery preventDefault();
Using return false; instead of jQuery preventDefault(); seems to work (because return false; does something more than
preventDefault();) btw using href=#" and jQuery preventDefault(); is quite a common practice (and best practice).

Or try to build some jQuery UI tabs in a page, then preview that page in the customizer and click on a tab. On twentythirteen I've got the whole home page loaded *inside* the tab content :-)

Maybe it would be better to don't select all the links in the page and change this line:
this.body.on( 'click.preview', 'a', function( event ) {
to say "select all links with an href attribute which doesn't start with #".

As a side note, the "edit link" doesn't work in the customizer preview but I can understand it would be a bit tricky to find a safe solution.
thx very much
Andrea

Change History (2)

comment:1 afercia5 months ago

integration:
one more test case would be:

<a href="#">Back to top</a>

with some jQuery smooth scrolling, I can't count how many themes use that and that won't work in the customizer preview, will trigger a request for the home page.

Btw there also links that *contain* an hash for example:
http://yoursite.com/yourpage/#comments
when you're already on the single post that triggers a POST request which reloads the page, this should be avoided. But if you're in an archive page things are different and the request should take place.
Btw, for the simpler case, I've tested with

"a:not([href*='#'])"

and seeems to work.

comment:2 SergeyBiryukov5 months ago

  • Component changed from Administration to Appearance
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed
  • Version changed from 3.7.1 to 3.4

Duplicate of #23225 and #24032.

Note: See TracTickets for help on using tickets.