Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Alpha 2: Linked page/screen in Header not staying open. #486

Closed
Martinator opened this issue Nov 16, 2010 · 12 comments
Closed

Alpha 2: Linked page/screen in Header not staying open. #486

Martinator opened this issue Nov 16, 2010 · 12 comments

Comments

@Martinator
Copy link

I have an "About" button in my header:

<div data-role="header" data-position="fixed" data-theme="b">
  <h1>Bike Frame Sizer</h1>
  <a href="#aboutFCalc" data-icon="info" class="ui-btn-right">About</a>
</div>

In Alpha 2, when I click on it (in Safari for Windows set to User Agent Mobile Safari 4.0.2 - iPhone), the page/dialog opens, then immediately closes and returns to the main screen.

The same behavior also happens with links in lists:

<ul data-role="listview" data-inset="true" >
  <li><a href="#pane1">Pane 1</a></li>
  <li><a href="#pane2">Pane 2</a></li>
  <li><a href="#pane3">Pane 3</a></li>
</ul>


The desired screen appears, then immediately disappears.
@toddparker
Copy link
Contributor

Can you test on latest:
http://jquerymobile.com/test/

...and provide a sample URL?

@Martinator
Copy link
Author

http://jquerymobile.com/test/#docs/lists/lists-ul.html

In Google Chrome, when I click on a car brand, like Cadillac, funky things happen and I am left with a white screen. This happens in Safari 5.0.2 also.

Now when I change the user agent in Safari to Mobile Safari 4.0.2 iPhone, it seems to work, though it goes backward to the previous list.

If I keep clicking though, it goes haywire and I am once again stuck with a white screen.

@toddparker
Copy link
Contributor

I see this is I click on Cadillac > Numbered list > 12 Angry Men. If you can tryt o narrow down the conditions for this, it will help us track it down. Seems to happen if you re-visit the same page from a different referring page?

@Martinator
Copy link
Author

I definitely do not see that.

Using Chrome 7.0.517.44 on a Windows XP Box starting from page:

http://jquerymobile.com/test/#docs/lists/lists-ul.html

I click on Cadillac >

It brings me to http://jquerymobile.com/test/#docs/lists/index.html where I click on Numbered List

I click on 12 Angry Men: here the screen appears to slide back to the previous screen before going completely white.

The url in the address bar is http://jquerymobile.com/test/#docs/lists/index.html

@toddparker
Copy link
Contributor

Yeah, we're saying the same thing. Each list demo links back to the list index page. The issue crops up when you go from the list index, click a row in a demo to go back to the list index, choose another demo and then click a row = white blink. We've had some weird regressions with the navigation stuff so maybe this si just a symptom of that.

@Martinator
Copy link
Author

I reviewed the Markup in my little app and while cleaning it up I noticed something regarding Dialogs:

  1. The link needs to have data-rel="dialog" in it
  2. The target needs to have data-role="dialog"

If those do not match up, then the Back button in the second screen doesn't work correctly.

I have created 4 scenarios around the (your inseam) help icon in the following example:

http://martinator.com/mobile/FrameCalculator_a2-Dialogs.html

  1. It simply links to a DIV with Data-role="page" (no "data-rel" is set).

    Works as intended.

2 The link has data-rel="dialog" while the targeted DIV has Data-role="page".

The back button goes back -2 rather than -1.
  1. The link has data-rel="dialog" while the targeted DIV has Data-role="dialog".

    Works as intended

  2. The link has no data-rel set while the targeted DIV has Data-role="dialog".

    The dialog pops open then immediately bounces back to the initial screen.

So I think it might be good to note in the documentation the importance of having the data-rel match up with the targeted data-role.

@jstreb
Copy link

jstreb commented Dec 3, 2010

This sounds like two different issues.

  1. When navigating through the list views you were able to get to a blank page. I believe that patch I submitted for 493 should resolve this issue, at least it is not reproducible for me locally anymore.
  2. The documentation should be updated to stress the importance of having the data-rel match up.

Is that correct? Todd/Scott if you agree with this let me/Rob know and we can make sure the blank page issue does not occur and that the documentation gets updated.

  • Jesse

@scottjehl
Copy link

Okay, I think we can address the dialog issue internally so that data-rel dependency can go away. For now, I'll check out your pull request and see if it fixes the first issue.

@toddparker
Copy link
Contributor

Is this working better in latest? We fixed up the nav and dialog stuff quite a bit:
http://jquerymobile.com/test

@Martinator
Copy link
Author

It looks like it is still an issue:

http://jquerymobile.com/test >
Pages & Dialogs >
Dialogs >
Share Photos... >
Tweet Photo

The next screen displays briefly and is then immediately followed by a blank white screen.

@toddparker
Copy link
Contributor

There is a big re-factor needed to fix this:
https://github.com/jquery/jquery-mobile/issues#issue/866

@toddparker
Copy link
Contributor

Scott just landed a bid dialog fix that makes links in dialogs work. If you go here and click on the photo button at the bottom, you can click through the links in the dialog that open:
http://jquerymobile.com/test/docs/pages/docs-dialogs.html

This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants