Skip to content
This repository

When leaving from a page contains nested listview, pageremove event does not fire. #4185

Closed
fukudayasuo opened this Issue April 23, 2012 · 13 comments

4 participants

Scott Jehl Jasper de Groot Todd Parker

When move to a page from the page contains listview, pageremove event does not fire.

I create the pages for test.
http://jsbin.com/atodiz/6
test1 is top page. test3 contains listview. When move from test3 to test1, pageremove event does not fire.

I tried jQueryMobile ver 1.0.1 and 1.1.0, and also I tried jQuery-1.6.4, 1.7.1.
But the result is same.
Trying Chrome, Firefox, IE, but the result is same.

Isn't this a bug?

Jasper de Groot
Owner

Hi @fukudayasuo

I was about to comment that your pages should have unique ID's but I noticed you just changed that.
Can you change your fiddle so it loads jQuery 1.7.1 instead of 1.7.2 (not supported yet).
Also your list looks like

    That should be other way around ;-)

    Update: sometimes code is not shown in comments here. In case it is not visable on last line: LI UL / UL / LI

    Jasper de Groot
    Owner

    When you inspect the code after you returned from page with ID test3 (title in heading says test2) to the first page with ID test1 you'll see that test3 has been removed from the DOM. So it is only the alert that doesn't pop up. What happens when you put the function in the head section?

    Thank you for comment.

    I fixed jQuery 1.7.2 to 1.7.1
    http://jsbin.com/atodiz/20

    But result is same. I tried to put the function in the head section, but result is same.

    I know that DOM is removed. I care "pageremove" event does not fire.

    "pageremove" event is binded in line2898 in jquery.mobile-1.1.0.js. But when the page has listview, "pagehide.remove" event is unbinded and binded the new function named newRemove in line 5166-5181. But newRemove function does not trigger event "pageremove".

    So, when page has listview, "pageremove" event does not fire.

    Jasper de Groot
    Owner

    You're welcome! Always nice to help former prime minister of Japan ;-)

    Anyway... I looked at your new fiddle and it seems to work (test on Chrome/Windows). I get pageremove alert when going back from test3 to test1. Did you test again on Chrome? Mac or Win?

    I know it's just a test and I don't want to be over-fussy, but to rule out possible causes of the issue...
    You now have two UL's with data-role="listview" and nested the second directly inside the first . For listview you only have to use data-role listview on the first UL and the framework generates a new page to display nested lists.

    <ul data-role="listview">
        <li>list1-1</li>
        <li>list1-2
            <ul>
                <li>list2-1</li>
                <li>list2-2</li>
            </ul>
        </li>
    </ul>
    

    Oh... Certainly running. I haven't notice...

    OK, I understand when the issue happen. It is when use nested listview. That is when generated new page.

    I tried nested listview. The issue happens.
    http://jsbin.com/atodiz/24

    Jasper de Groot
    Owner

    Yes I can confirm this issue:

    When a page contains a list with a nested list, both the page and the framework generated nested list page get removed from the DOM but you can't bind to pageremove.

    I compared the page remove function with the 'specialized' version used when there are subpages. Triggering the pageremove event is indeed missing in last one.

    Thank you for checking the code.
    I think the 'pageremove' should be triggered even when we use a nested listview,
    So I'm hoping for the fix this issue.

    Todd Parker

    I updated the title to reference nested listviews. @uGoMobi - do you think you know the nav script well enough to create a pull request?

    Jasper de Groot
    Owner

    @toddparker Sure, I will create a PR to fix this.

    Todd Parker

    Thanks @uGoMobi!

    Jasper de Groot
    Owner

    There is more to fix. In case you leave a listview page that contains a nested list it is just the pageremove event that doesn't fire, but when you leave a generated nested listview page nothing is removed from the DOM as well.

    To reproduce:
    Go to Nested Lists in the docs (http://jquerymobile.com/test/docs/lists/lists-nested.html) > Animals > Pets > Canary
    This brings you back to Lists index.html and all nested listview pages (and the parent listview page) are still in the DOM.

    I am looking into a complete fix.

    Jasper de Groot
    Owner
    uGoMobi commented May 03, 2012

    On second thought... maybe it is on purpose that the pages remain in the DOM when you leave a nested listview page. Otherwise it seems you can't nav back to them with the back button, unless they are still in the browser cache.

    Anyway, I saw a couple of 'TODO' comments in the JS regarding page removal handling, so I figured it was better not to touch this for now. I will just create a PR to fix the original issue about the pageremove event that doesn't fire.

    Todd Parker

    @uGoMobi - yes, I think we decided to leave the nested list pages in the DOM until you load another page so if you hit back, the pages are still there. Sort of a practical compromise.

    Scott Jehl scottjehl closed this in 5b38553 May 16, 2012
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Something went wrong with that request. Please try again.