Using a persistent footer with jQuery 1.8.0 adds Zeros to end of document #4887

Closed
grahamgilchrist opened this Issue Aug 22, 2012 · 5 comments

Comments

Projects
None yet
6 participants
@grahamgilchrist

Issue description

When using jQuery 1.8.0, in a site with a persistent footer toolbar containing a navbar, and no persistent header, extra text elements containing zeroes are being added to the end of the DOM whenever the page is changed through the footer navbar. This issue does not exist with jQuery 1.7.2

Persistent footer docs:
http://jquerymobile.com/demos/1.1.1/docs/toolbars/footer-persist-a.html

I've traced the problem to the file js/widgets/fixedToolbar.js, line 155:
https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js#L155

At this point, if there is no persistent header, the variable nextHeader has a value of 0. On line 159, nextFooter.add( nextHeader ) produces an array containing the footer jQ object and a value of zero. In jQuery 1.7.2, when appended to the document, the 0 is ignored. in jQuery 1.8.0, it is added as a text element.

It could be argued this is a bug with jQuery, but it seems like there might be a line missing which would fix this very easily. We already assign nextFooter to an empty jQ object if it is blank, so we could add the same for nextHeader after line 155:
nextHeader = nextHeader || $();

So the code would look like

...
var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ),
                            thisHeader = $( ".ui-header-fixed:jqmData(id)", this ),
                            nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ),
                            nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage );

                        nextFooter = nextFooter || $();
                        nextHeader = nextHeader || $();

                            if ( nextFooter.length || nextHeader.length ) {
...

Sample page using the jsbin template which uses latest code

http://jsbin.com/orucec/111/

Use the footer tabs in the output window to switch pages. Notice zeroes being added to the document. Uncomment the jQuery 1.7.2 script tag in the HTML header and remove the jQuery 1.8.0 script tag. Try the tabs again. The problem no longer occurs.

Steps to reproduce

  • Create a new jQuery mobile project using jQuery mobile 1.1.1 and jQuery 1.8.0
  • Add two pages to the project with header and footer regions using data-role="header"
  • Add data-id="test-footer" data-position="fixed" to the data-role footer element
  • Add a navbar list data-role="navbar" inside the footer and add list items with links to the two pages
  • Load the page and navigate between the two pages.

For more info see the JSBin example above.

Expected outcome

The fixed footer should stay in place while the page transitions behind it. Once the transition is complete, the target page should be rendered.

Actual outcome

The fixed footer stays in place, and the transition happens, but during the transition, extra text elements are added to the page.

Query Mobile version

Mobile: 1.1.1
jQuery: 1.8.0

Browsers/platforms tested

Problem in:
Webkit:

  • Safari 5.0
  • Safari iOS 5.1
    Does not occur in:
  • Firefox 8.0
@donghwakim

This comment has been minimized.

Show comment
Hide comment
@donghwakim

donghwakim Aug 27, 2012

Hi I am seeing the same issue.

Hi I am seeing the same issue.

@Udomaki

This comment has been minimized.

Show comment
Hide comment
@Udomaki

Udomaki Aug 29, 2012

I am also seeing this issue.

Udomaki commented Aug 29, 2012

I am also seeing this issue.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 29, 2012

Contributor

This is an odd one. I see the issue in your test page, but not in the latest docs which also use 1.8.0:
http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Contributor

toddparker commented Aug 29, 2012

This is an odd one. I see the issue in your test page, but not in the latest docs which also use 1.8.0:
http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Aug 29, 2012

Contributor

@toddparker

It seems this issue just happens, if just the footer is persistent, not the header.
The docs show just pages where both toolbars are persistent.

Contributor

MauriceG commented Aug 29, 2012

@toddparker

It seems this issue just happens, if just the footer is persistent, not the header.
The docs show just pages where both toolbars are persistent.

@ghost ghost assigned Wilto Aug 29, 2012

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Aug 29, 2012

Contributor

Start the drumroll; fix forthcoming. Thanks for an awesome bug report, @grahamgilchrist!

Contributor

Wilto commented Aug 29, 2012

Start the drumroll; fix forthcoming. Thanks for an awesome bug report, @grahamgilchrist!

@Wilto Wilto closed this in 5a6b2c3 Aug 29, 2012

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012

Fixes #4887 - Prevents `0` from being appended to the document when …
…using a persistent footer with jQuery 1.8.0.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment