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.

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

Removing page affects header #7995

Closed
mdgross opened this Issue Mar 12, 2015 · 6 comments

Comments

Projects
None yet
6 participants
@mdgross

mdgross commented Mar 12, 2015

It seems that calling $.mobile.firstPage.remove() is removing .ui-page-header-fixed and padding-top from the active page. This was working all the way up to 1.4.3. The problem started occurring in 1.4.4 and 1.4.5.

  1. Click "Show Page B"
  2. Click "Remove First Page"
  3. Unexpected Behavior: Header moves

1.4.5 - Broken
http://jsbin.com/docona/1/

1.4.3 - Working
http://jsbin.com/docona/2/

@mdgross mdgross changed the title from Removing hidden page causes problems with active page to Removing first page causes problems with second page Mar 12, 2015

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Mar 12, 2015

Member

@mdgross thank you for reporting this. removing the first page is not supported this will defiantly break navigation. Closing as not a bug.

Member

arschmitz commented Mar 12, 2015

@mdgross thank you for reporting this. removing the first page is not supported this will defiantly break navigation. Closing as not a bug.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Mar 12, 2015

Member

@mdgross i was really jus commenting on what you said because your fiddle does not work because the resources are blocked from loading so i cant view your example please use are jsbin template at http://jsbin.com/ofuhaw/1/edit but either way what your doing is 100% not supported.

Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.11.1.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:34
Uncaught ReferenceError: $ is not defined
Member

arschmitz commented Mar 12, 2015

@mdgross i was really jus commenting on what you said because your fiddle does not work because the resources are blocked from loading so i cant view your example please use are jsbin template at http://jsbin.com/ofuhaw/1/edit but either way what your doing is 100% not supported.

Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.11.1.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:34
Uncaught ReferenceError: $ is not defined

@arschmitz arschmitz closed this Mar 12, 2015

@mdgross mdgross changed the title from Removing first page causes problems with second page to Removing page affects header Mar 12, 2015

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 3, 2015

Member

@mdgross

First of all, jQuery Mobile is a team/contributors effort. Even if this was an actual regression, it has nothing to do with who is project lead.

When you inspect your test page you'll see that the padding-top is removed from the page when you remove the first page. Probably because we had to make a change between 1.4.3 and 1.4.5 to fix an issue with page padding or fixed headers. Like @arschmitz said removing the first page is currently not supported. If you want to do it anyway you have to understand that your code might break, even in a maintenance release. We don't test it.
You might be able to work around the problem by calling updatePagePadding() on the active page after you removed the first page.

Member

jaspermdegroot commented Apr 3, 2015

@mdgross

First of all, jQuery Mobile is a team/contributors effort. Even if this was an actual regression, it has nothing to do with who is project lead.

When you inspect your test page you'll see that the padding-top is removed from the page when you remove the first page. Probably because we had to make a change between 1.4.3 and 1.4.5 to fix an issue with page padding or fixed headers. Like @arschmitz said removing the first page is currently not supported. If you want to do it anyway you have to understand that your code might break, even in a maintenance release. We don't test it.
You might be able to work around the problem by calling updatePagePadding() on the active page after you removed the first page.

@solymosi

This comment has been minimized.

Show comment
Hide comment
@solymosi

solymosi Apr 21, 2015

Contributor

I just bumped into the same issue and did a little debugging. It seems like that commit 3efe6fe caused the issue. The problem is with the _destroy function, which operates on the currently active page instead of the page that the toolbar (which is being destroyed as a consequence of calling remove on $.mobile.firstPage) is actually on. When the first page is being removed, another page is already marked as active.

Simply assigning this.page to the page variable instead of fetching the active page from the page container seems to solve the problem.

I'm running tests at the moment, will submit a pull request soon.

Contributor

solymosi commented Apr 21, 2015

I just bumped into the same issue and did a little debugging. It seems like that commit 3efe6fe caused the issue. The problem is with the _destroy function, which operates on the currently active page instead of the page that the toolbar (which is being destroyed as a consequence of calling remove on $.mobile.firstPage) is actually on. When the first page is being removed, another page is already marked as active.

Simply assigning this.page to the page variable instead of fetching the active page from the page container seems to solve the problem.

I'm running tests at the moment, will submit a pull request soon.

@wakiki

This comment has been minimized.

Show comment
Hide comment
@wakiki

wakiki Jul 22, 2015

@solymosi looks like your PR was merged but it won't be released until v1.5.

Is there a fix that we can use for the time being?

For now I'm using fix from @mdgross but this doesn't work:

$(document).on 'pagecontainerchange.fixcache', $.mobile.pageContainer, (event, ui) ->
  if $.mobile.firstPage.is('[data-dom-cache="true"]') or $.mobile.page::options.domCache and $.mobile.firstPage.is(':not([data-dom-cache="false"])')
    $(document).off 'pagecontainerchange.fixcache'
  else if ui.prevPage != undefined
    if !($(ui.toPage).is('[data-role="dialog"]') or $(ui.prevPage).is('[data-role="dialog"]'))
      if ui.toPage.attr('data-url') != ui.prevPage.attr('data-url')
        $.mobile.firstPage.remove()
        $(document).off 'pagecontainerchange.fixcache'
  return

wakiki commented Jul 22, 2015

@solymosi looks like your PR was merged but it won't be released until v1.5.

Is there a fix that we can use for the time being?

For now I'm using fix from @mdgross but this doesn't work:

$(document).on 'pagecontainerchange.fixcache', $.mobile.pageContainer, (event, ui) ->
  if $.mobile.firstPage.is('[data-dom-cache="true"]') or $.mobile.page::options.domCache and $.mobile.firstPage.is(':not([data-dom-cache="false"])')
    $(document).off 'pagecontainerchange.fixcache'
  else if ui.prevPage != undefined
    if !($(ui.toPage).is('[data-role="dialog"]') or $(ui.prevPage).is('[data-role="dialog"]'))
      if ui.toPage.attr('data-url') != ui.prevPage.attr('data-url')
        $.mobile.firstPage.remove()
        $(document).off 'pagecontainerchange.fixcache'
  return
@thenewguy

This comment has been minimized.

Show comment
Hide comment
@thenewguy

thenewguy Feb 14, 2016

@wakiki I posted an alternate workaround that may be of interest #3249 (comment)

thenewguy commented Feb 14, 2016

@wakiki I posted an alternate workaround that may be of interest #3249 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment