[wp-trac] [WordPress Trac] #26005: customize-preview.js and in-page anchors

[WordPress Trac]

#26005: customize-preview.js and in-page anchors
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  3.7.1
 Severity:  normal          |   Keywords:
----------------------------+-----------------------------
 thx to [http://wordpress.stackexchange.com/questions/56377/new-wp-
 customize-api-how-does-it-work-under-the-hood/57093#57093 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

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26005>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software