Help: $.UIGotoArticle breaks Tab Bar Navigation

[Kenneth Hippolite]

Hi all...

So I made a custom tabbar with 3 articles in it. Let's call them Article-A, Article-B, Article-C

I have a button on Article-B that brings up an Article-D using $.UIGotoArticle

Problem:
After viewing Article-D, it is impossible to return to Article-B... Article-D has replaced B in the navigation history.

Note:
If $.UIGotoArticle leads to A or C, everything works fine. It's as if the example code for a custom toolbar can't support viewing articles that aren't in the toolbar. Can anyone confirm or deny this problem?

-Kenneth

[Robert Biggs]

To go back to an arbitrary position in your navigation history, use the $.UIGoBackTo() method with the id of the article, in your case: $.UIGoBackTo('#articleB'); For this to work, you also need to change the class of the back button to:

<button class='backTo'> instead of <button class='back'>

Here's the markup for the back button on D:

<nav class='current>;

    <button id='backToD' class='backTo'>Back</button>;

    <h1>Stuff</h1>

</nav>

<script>

$(function() {

    $('#backToB').on('singletap', function() {

       // provide the id without "#":

        $.UIGoBackToArticle('articleB');

    });

});

</script>

You can go to http://chocolatechip-ui.com/tutorials.html#/navigation and scroll down to "Non-Linear Back Navigation" to learn more.

Using the function $.UIGoBackToArticle enables you to pick where in the navigation history you want to go back to. It readjusts the navigation history so that article B is the current and the back button on it will return you to article A.

--
You received this message because you are subscribed to the Google Groups "ChocolateChip-UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chocolatechip-...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kenneth Hippolite]

Hi and thank you for your detailed response.

I did as instructed, but didn't get a spectacular result. The back-to button restores the navigation history but does not advance back to the given article.

After the singletap on the back button, the tabs now work correctly -- that is the navigation history is now correct. However, the user is still viewing "Article D"... he is not automatically returned to the article he left.

Here's a most-simple test case you can view in case I've done something wrong

http://www.skyfire.ca/keneto/chui/index.html

(You'll find that by entering page three, then entering article D, the back button does not bring you back to page 3, but at least now the tab-bar works)

[Robert Biggs]

Hi Kenneth. I went to your link and downloaded the resources so I could see what you had. I'm not sure why your trying to load the Cordova resources. They don't seem to be loading, perhaps a bad link, and so are cause a browser error. On top of that, I was curious why you're trying to customize the tab bar, what do you need it to do? It just toggles its panels. 

If you could take the time to explain what you need this to do, I'll be able to help you do this in the most efficient manner.

By the way, the $.UIGoBackToArticle() method expects a valid selector, so in your case you need to pass it "#page3" so that it knows its an ID of the article it should return to.

--

[Kenneth Hippolite]

Cordova resources because it's a phonegap application... I must have overlooked to delete that part when deriving the test case.

Ok... what am I trying to do... the user has three screens / articles to work with. As a result of their activities, they may be sent to a 4th screen.

Note: They cannot browse to the 4th article directly. Rather, clicking buttons in the main 3 articles will launch an ajax query which will bring up the 4th article when it completes.

Thus, the user may be shown the 4th article unexpectedly... sometimes after several minutes. They will often want to close the 4th article and return to what they were doing / reading.

Original problem: The 4th article was replacing the current article meaning the user could not return to the article they unexpectedly left.

New problem: After following your suggestions, the user can now return to the article they left provided they click "back" which does nothing and then pressed a tab. Pressing a tab by itself has no effect

[Kenneth Hippolite]

[Kenneth Hippolite]

Edit: Note that putting the # in front of the $.UIGoBackToArticle does not seem to work. It seems to work best without

[Robert Biggs]

Let me get this straight, while the user is on tab when, he/she can hit something, perhaps a button, that leads to another screen inside tab one. That second screen has the back button that should return the user to the first screen of tab one?

On Tue, Jun 16, 2015 at 6:10 PM, Kenneth Hippolite <ken...@execulink.com> wrote:

Edit: Note that putting the # in front of the $.UIGoBackToArticle does not seem to work. It seems to work best without

--

[Robert Biggs]

Hey Ken, try this link: http://wobba.io/tabs

It's an iOS theme, but it works for me on a Motorola as well. On the first screen hit go. That'll take you to a fourth screen. Hit the back button will return you to the first screen. If, while on the fourth screen you hit the second or third tab and then hit the first tab again, you'll still be on the fourth screen and hitting the back button will return you to the first screen. You can download the zip here: http://wobba.io/tabs.zip

[Kenneth Hippolite]

Hi. Just getting back to this. I was able to implement a variation of what you did in that example.

Thank you

(I ended up having to cache the article the user was on before the event triggered so the app would know what to go back to. Article #4 continues to supplant whichever one of Articles 1, 2 or 3 the user was viewing at the time of the event, but at least they can hit back to arrive there so not trapped anymore)

[Robert Biggs]

Oh, I see. Yeah, you would need to store what the current state of the tab bar is before going to a completely different destination. I'd proably do something like: 

$.storedTabbarState = $('.current')[0].id;

And then use $.UIGoBackToArticle($.storedTabbarState), or something similar.