Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JQueryUI tabs behaves weirdly if base in HTML head #2192

Closed
xtempore opened this issue Oct 25, 2023 · 3 comments
Closed

JQueryUI tabs behaves weirdly if base in HTML head #2192

xtempore opened this issue Oct 25, 2023 · 3 comments

Comments

@xtempore
Copy link

xtempore commented Oct 25, 2023 •
edited by mgol
Loading

I had a weird problem with JQueryUI tabs. Instead of turning the divs into tabs it would create new divs and then load the page content into those divs on activation. Very, very weird! After much hair-pulling and code minimising it turns out to be something rather surprising that causes this - have a <base> tag in the HTML head.

Reproducing the problem is EASY!

  1. Copy the sample code from https://jqueryui.com/tabs/ and save as test,.html (for example).
  2. View the page in the browser - appears normal.
  3. Add a base element to the header. E.g. <base href="http://localhost/"/>
  4. View the page in the browser - Now each tab has a copy of the main content and the intended divs sit below.
@mgol
Copy link
Member

mgol commented Oct 26, 2023

You need to wrap code in backticks since Markdown is an extension of HTML and tags have a meaning. I edited your post for you.

The base tag affects links resolution pretty significantly so introducing it has consequences. There's a blog post from a former jQuery UI Team member, TJ Van Toll, that you may want to read here: https://www.tjvantoll.com/2013/02/17/using-jquery-ui-tabs-with-the-base-tag/
@mgol mgol closed this as not planned Won't fix, can't repro, duplicate, stale Oct 26, 2023
@xtempore
Copy link
Author

I appreciate your response, and the link to the blog post, but I'm disappointed that this is closed without further consideration.

The side-effects from having <base> in the head give very unintuitive results, and look to all intents and purposes like a bug.

The most typical use of JQueryUI tabs is to use the <a> tag to indicate a "page" of information to be shown, and the standard way of doing this is with a fragment that matches the id of the container to be shown.

Using <base> in the header should not change that functionality - especially when the <base> is pointing to the current page.

There's no logical reason to apply the base url to a fragment. A fragment indicates a point on the page, a bookmark, it does not represent the contents of that element. And, even if it did, the implementation is still wrong, because it loads the entire page - not just the contents of the element.

In summary:

  • Tabs should not apply <base> to simple fragments.
  • Doing so is counter-intuitive.
  • Doing so creates extremely unexpected results.
  • At the very least, this usage should be optional and configurable.
  • The documentation should provide clear warnings about unexpected results when the <base> tag is used.
@mgol
Copy link
Member

mgol commented Oct 27, 2023 •
edited
Loading

It's not jQuery UI which is applying <base>, it is the browser itself.

As explained in the blog post, the goal of the jQuery UI design here is to degrade gracefully - if the link is to the URL identical with the current one, just with the hash changed, the browser will scroll to the element with the ID matching the hash; if the URL is different beyond the hash, the browser will redirect to the new URL.

If you have a page with the address https://example.com/page1/ and you have the following in the HTML body:

<a href="#main">Go to main content</a>
<h1 id="main">Main content</h1>

then clicking on the link will scroll to the h1. However, if you have <base href="/"> in <head>, the link no longer scrolls but redirects to https://example.com/#main. To restore previous behavior, the href would need to be changed to either the absolute URL: https://example.com/page1/#main or to one relative to the base: page1/#main.

If you have HTML structure similar to the above and you expect the link to show you the main content, your HTML is just incorrect and that's true regardless of jQuery UI presence or not.

BTW, if base points exactly to the current page, hashes should still work. jQuery UI doesn't analyze the href attribute by itself, it doesn't "apply <base>" - it just reads the full URL the browser resolves the href attribute to and compares to the current URL. If that doesn't work then please submit a full test case.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants
@mgol @xtempore