topic Back link in header does not work in Software Archive

Back link in header does not work

Mostafa_M_ — Thu, 11 Feb 2016 14:46:22 GMT

I am using Framework7 in intel xdk. I need to add back button or link that do the slide transition in the header navbar. I add the following in the html file but the back link does not work. I followed framework 7 documentations for this code snippet.

<div class="navbar">
<div class="navbar-inner">
    <div class="left">
        <a href="#" class="link">
            <i class="icon icon-back"></i>
            <span>Back</span>
        </a>
    </div>
    <div class="center">Center</div>
    <div class="right">
        <a href="#" class="link">
            <i class="icon icon-bars"></i>
            <span>Menu</span>
        </a>
    </div>
</div>

Are you using the App

Elroy_A_Intel — Thu, 11 Feb 2016 15:27:08 GMT

Are you using the App Designer (Design) tab?

Yes I am using the App

Mostafa_M_ — Thu, 11 Feb 2016 15:31:05 GMT

Yes I am using the App designer tab.

Regards

Hey!, somebody are here?

Alan_D_1 — Thu, 02 Jun 2016 19:33:20 GMT

Hey!, somebody are here?

I have a problem with back button on header, this btn displayed but doesn't handle any event.

Hi Alan,

Diego_Calp — Thu, 02 Jun 2016 19:54:16 GMT

Hi Alan,

Which framework are you using? F7 or another?

Could you post some code?

Regards,

Diego

Hi Diego.

Alan_D_1 — Thu, 02 Jun 2016 20:19:28 GMT

Hi Diego.

I use AP3 and the code is very simple, just is an blank page with 1 header and 2 subpages that I change but the back btn doesn't return me to my initial page, this just in a real device, in the emulator all works great.

Note: the back btn is automatic appear

thnks for you reply.

Hi Alan,

Diego_Calp — Fri, 03 Jun 2016 12:03:14 GMT

Hi Alan,

I don't understand the automatic back button. Where it is placed?

Regards

Diego

Hi Diego.

Alan_D_1 — Fri, 03 Jun 2016 16:31:19 GMT

Hi Diego.

Well, let me explain you.

I created a new blank HTML5+cordova template, then i added a new subpage and a heder for the page next i used a simple button to change the focus of the active view to my subpage. How you can see, i don´t declare a back button anywhere, so in the emulator when i click my btn, the view is change and in the header appears a back button and works.

Finally I create the ipa and apk for install in real devices, the install is good and all works except the back btn in the header.

Here is the header code in the main view.

<header class="container-group outer-element uib_w_1" data-uib="app_framework/header" data-ver="3" id="af-header-0">
                <h1>TRM Mobile.</h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
</header>

Here is the code of the header in the subpage.

<header class="container-group outer-element uib_w_1" data-uib="app_framework/header" data-ver="3" id="af-header-0"><a class="backButton back">Back</a>
                <h1>TRM Mobile.</h1>
                <div class="widget-container wrapping-col single-centered"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-left"></div>
                <div class="widget-container content-area horiz-area wrapping-col header-right"></div>
</header>

Regards, A.Díaz.

Hi Alan,

Diego_Calp — Fri, 03 Jun 2016 18:13:26 GMT

Hi Alan,

Sorry, I'm unable to reproduce your project, if I create a new AF3 project and drop a page with header and subpages, there is no automatic back button.

Doesn't matter, you have a back button declared. In your subpage code is

<a class="backButton back">Back</a>

you could try this:

<a class="backButton back" href="javascript:parent.history.back();">Back</a>

Regards,

Diego