Back button appearing underneath menu-toggling control group

[noahscales]

Hi, Frequent, thanks for an awesome plugin, I'm integrating multiview into a project requiring a straightforward splitview with ability to data-switch (hide the menu). I don't have mid, but would like to integrate it, it's perfect for our project.

For the menu I have:

<div data-wrapper="true" data-role="page" data-switchable="true" data-scrollMode="true" />
<div data-role="panel" data-id="menu" data-panel="menu">
<div data-role="page" id="contents" data-show="first">
    <div data-role="header"  data-theme="b">
        <h1>Contents</h1>
    </div>
    <div data-role="content"  data-theme="c">
        <ul data-role="listview">
            <li><a href="#menu_page" data-panel="menu">Submenu</a></li>
                     </ul>
.
.
.
<div data-role="page" id="week11">
    <div data-role="header" data-theme="b">
        <h1>Submenu</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a  data-panel="main" href="main1.html"  data-icon="arrow-r" data-iconpos="right">A Page in the Main panel</a></li>
            <li><a  data-panel="main" href="main2.html"  data-icon="arrow-r" data-iconpos="right">Another Main panel page</a></li>
                   </ul>
.
.
.

and for the main section

<div data-role="panel" data-id="main" data-panel="main">
<div data-role="page" id="main_first" data-show="first">
    <div data-role="header" data-position="fixed" data-theme="b"> <a href="#"  data-icon="home" data-iconpos="notext">Home</a>
        <h1>Main</h1>
        <div class="headWrapRight ui-btn-right">
            <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div"></div>
        </div>
    </div>
    <div data-role="content">
        <p> this is the starting content section of the page</p>
    </div>
</div>
</div>

The behavior I'm seeing is that it works initially, and then fails in desktop test in FF 14 on Win 7. I am seeing, both with my code, and the example code online, back buttons appearing on the left underneath the menu toggle buttons in the header of pages contained in the main panel. The pages loaded into the main panel by the submenu links in the menu panel are regular JQM pages containing one div with data-role="page" each.

Ideally, the main panel section will be navigable using a separate script-generated navigation (previously working fine), dropped into the local page header of external pages, but without a back button created for the main page. Adding data-add-back-btn="false" to the main pages has no effect on the back button created by the multiview js (named after the title of the page in teh prior history).

How can I turn off that navigation feature of a labeled back button in the main panel?

Also, main2.html navigated to from splitview.html#submenu shows main2.html loaded into the main panel. However, a browser refresh only shows me main2.html in the browser, the multiview wrapper container is gone.However, browser refresh with the original splitview page "splitview.html#submenu" brings up the proper submenu visible in the menu panel.

Is there a way to avoid browser refresh causing this problem of loading a file intended to appear inside the main panel?

Thanks for your help, Frequent, and any advice or direction you can give me on better using your powerful plug-in.

[frequent]

Ok. First off I'm way behind with the Repo and current version. I had used last commit version on Github for my own platform and stumbled across a lot of the things you are mentioning, which I hopefully have fixed by now.

The back button had a lot of bugs, but it's working fine on my system now with switchable buttons, back buttons and even selects I'm putting top left in the header. Whatever is there will now be grouped into a controlgroup. There is an option backBtnOff which will prevent any back buttons to be created by multiview, so if you set this in your plugin code you should be ok for now (not sure it also works on the wrapper - will add this for the next commit)

The navigation also had a big bug, because I never really noticed how JQM pushState is actually working and how the URL would look without pushState. I have turned it off for my current project and the navigation seems to work, also with browser refreshes.

The problem with refreshes is, that the browser will refresh what's in the URL, so when you go from your multiview page

 www.foo.com/folder/bar.html

and load an external page into a panel, JQM will change your URL to

www.foo.com/folder/external.html

which, when you refresh, will only load external.html. I have tried forever to set up the URL correctly, but have not found a nice way to this with pushState enabled.

Without pushstate the URL would be:

www.foo.com/folder/bar.html/#folder/external.html

which can be refreshed and will load bar.html first and then deeplink to external.html

Anyway, I have one last bug I want to finish for the next commit (setting panel height in fullscreen mode), then I will commit the new version. Trying to finish tonight. Also need a new readMe and multiview doesn't have a real homepage yet, so... stuff to do.

When the commit is in, please try again if some of your problems still happen.

[noahscales]

Hi, I've updated my test case files to the latest commit,

see: http://noahjscales.com/multiview/wrapperandstartpages.htm

The sidebar menu does not appear in FF4 on Win7, it's contents overlap the full-screen view of the main page..

I'm using jquery 1.7.1 with this, should I be using 1.7.2 ?

[frequent]

Ok. Found the problem. My app is using multiple wrapper pages, so I was checking for length and selecting the last() or active-wrapper. This works fine in my app using requireJS, but without, ui-page-active seems to not have been assigned when the functions splitscreen() and splitview() inside the plugins are running. I have removed the check for active-page, so now I'm selecting:

  wrap = $('div:jqmData(wrapper="true")').length > 1 ? $('div:jqmData(wrapper="true")').last() : $('div:jqmData(wrapper="true")');

I have just played around with it a little. Seems to not break anything. Your page is here:

  http://www.franckreich.de/jqm/test.html

Please recheck if your backbtn and refresh issues are solved now. If not I would need some more info (and time...)

[noahscales]

Thanks, Frequent.

I appreciate your taking the time, and I like your product a great deal. I'm working on improving my ability to debug javascript and to grasp more advanced concepts you applied in the creation of your plug-in. Then I would be happy to help you with specific white-box testing that gives you a handle on the behavior I'm seeing.

If you can specify for me what level of detail above a white-box test I could provide you, that would be great.

I have another example posted, simplified from your file fix_triplepop.html, see: http://www.noahjscales.com/multiview/copied_doublepop.html .. using your latest files.

The problems it has are:

1. refresh problem continues, on first refresh it does OK, on the second refresh the page loaded into main is loaded by itself.
2. the toggle button changes to a back button, and then refuses to work.
3. a refresh at that point brings up a blank area where the main content should be.

Thanks, Frequent, and I understand you're busy, I appreciate any help you can give at the time you can.

-Noah

[frequent]

Ok. last one for today. I can't reproduce in FF or Chrome. What do you mean by refreshing? If I load the page and refresh it will just load the page again allright. Please explain some more what you mean by refreshing?

Do you load the page (wrapper=0), load external page (=1) and then refresh or do you just refresh the wrapper?

Back button I will check tonight.