Page title vs. data-title on initial page load #2865

Closed
toddparker opened this Issue Oct 27, 2011 · 12 comments

Projects

None yet

8 participants

@toddparker
Contributor

If you either deep-link (or refresh) a page in the docs that has a heading bar, the framework is incorrectly overriding the page title with the contents of the heading tag in the header instead of just leaving the title alone. I think our dynamic title re-writing uses the data-title tag if it finds it, then falls back to the heading string so this means the title is being re-written on initial page load when it should really just be left alone if it's a single page document. We're just missing a bit of logic for this scenario.

This is reproducible on any page in the docs except the homepage because that doesn't have a header. Start on the homepage and navigate to any inner page and you'll see the title is correct when it's loaded in via Ajax (title = title of the page Ajax'd in). If you then refresh the page, the title will be replaced with the string inside the heading tag:
http://jquerymobile.com/test/

Seems like we're being a bit overzealous with our title re-writing.

@gseguin gseguin was assigned Oct 27, 2011
@MauriceG
Contributor

@toddparker
When testing the docs for titling, i've recognized the follwing:
please go to http://jquerymobile.com/test/
click on pages & dialogs
click on Anatomy of a page
click on Single page template
click browsers back button
click on Multipage page template
something went wrong ...
click the docs home button
click browsers reload button
something more went wrong

after that steps I've clicked again on pages & dialogs and again on Multipage page template
and got this screen:
jqm

@gseguin gseguin closed this Oct 27, 2011
@gseguin gseguin reopened this Oct 27, 2011
@gseguin
Member
gseguin commented Oct 27, 2011

I had to revert that pull request as it was breaking some tests. I'm investigating.

@gseguin gseguin pushed a commit that referenced this issue Oct 28, 2011
Ghislain Seguin Fix for #2865: when it's the first time we load the page, use the pag…
…e title if there is one
f81888c
@gseguin gseguin closed this Oct 28, 2011
@MauriceG
Contributor

Good work @gseguin! Superb 👍

@timmywil timmywil pushed a commit to timmywil/jquery-mobile that referenced this issue Nov 5, 2011
Ghislain Seguin Fix for #2865: when it's the first time we load the page, use the pag…
…e title if there is one
a5d50e6
@yuripave

Recently I upgraded from 1.0rc2 to1.0 and notice this patch is undesirable to my jquery mobile web app.
When $.mobile.pushStateEnabled = false or any browser that doesn't support pushState and reload a deep link, this patch makes it get the first page title, while not using the deep link page title.
Ex. http://jquerymobile.com/test/docs/config/pushState.html#/test/docs/pages/page-anatomy.html
The page show to user is anatomy of a page (deep link on hash), but the title is "jQuery Mobile Docs - Configuration" because of this patch, while it should be "jQuery Mobile Docs - Anatomy of a Page".
In my case, I set $.mobile.pushStateEnabled = false because of my web app requirement and people coming directly from search engines or reload the page will see a incorrect title.

@gabrielschulhof
Contributor

If you either deep-link (or refresh) a page in the docs that has a heading bar, the framework is incorrectly overriding the page title with the contents of the heading tag in the header instead of just leaving the title alone.

I don't believe this is incorrect. When you deep-link to a page you should see the title of that page in the title bar, because that's what you would see if you were to navigate to that page using AJAX nav. This is true for both multi-page documents, and pages loaded via AJAX.

In the case of a multi-page document:

If you start navigating at http://jsbin.com/omacox/236/ and you click on the link that takes you to #page2, the title will be set to the title of page 2. However, if you start navigating like this: http://jsbin.com/omacox/236/#page2, the title will be set to the doucment title. Not only that, but if you AJAX nav to page 1 and then back, it's still set to the document title.

So, in one case, the title associated with page 2 is the document title, and in the other case it's the page title. IMO this is inconsistent.

The same thing happens when you deep-link to a page that is to be loaded via AJAX (also illustrated above by @yuripave):

http://jquerymobile.com/test/docs/forms/selects/custom.html#/test/docs/pages/page-dialogs.html

If you open that link, you will see the dialogs page, but the window title will be that of the custom select documentation page. This is terrible!

IMO, the title-choosing process for any given page (whether it is the initial page or some subsequent page) should be as follows:

  1. If the page's <div data-role="header">...</div> contains a title, use it.
  2. Otherwise, if the document has a title, use that.
  3. Otherwise, the title is undefined.

IINM, this is pretty much a revert of the patch that was supposed to fix this issue - and which did fix it as originally stated, thereby introducing the above-described inconsistency.

Let's remember that it is up to the user to provide sane titles for both the document and for the individual pages, but it is up to us to display a page consistently under all circumstances. IMO, we're not doing that right now.

@jaspermdegroot
Member

I changed the title of this ticket and closed issues #3292 and #4998 as duplicate. This way we have one ticket about the page title / data-title logic including the commit history.

@jaspermdegroot
Member

See also @robschmuecker his suggestions: #4998 (comment)

@jaspermdegroot
Member

I noticed this is still an issue in latest: http://jsbin.com/onibuc/41
Would be cool if we can fix this for 1.3. Changed the milestone (was 1.2.1).

@gabrielschulhof
Contributor

Let's review the sources of title information:

  1. <title> in <head>
  2. data-title in data-role='page'
  3. The text of the first <h*> inside the data-role='header'

These are all I can think of.

So, we need to establish when we use which and which takes precedence over which.

@DzenisevichK

@gabrielschulhof

It will be also good to have possibility to use

  1. <title> in <head>

across all pages in multi-page template.

@apsdehal
Member
apsdehal commented May 7, 2016

Closing as fixed.

@apsdehal apsdehal closed this May 7, 2016
@apsdehal apsdehal self-assigned this Aug 3, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment