Giter VIP home page Giter VIP logo

Comments (3)

mgol avatar mgol commented on September 27, 2024

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/

from jquery-ui.

xtempore avatar xtempore commented on September 27, 2024

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.

from jquery-ui.

mgol avatar mgol commented on September 27, 2024

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.

from jquery-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.