Back link in header does not work

[Mostafa_M_]

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>

[Elroy_A_Intel]

Are you using the App Designer (Design) tab?

[Mostafa_M_]

Yes I am using the App designer tab.

Regards

[Alan_D_1]

Hey!, somebody are here?

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

[Diego_Calp]

Hi Alan,

Which framework are you using? F7 or another?

Could you post some code?

Regards,

Diego

[Alan_D_1]

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.

[Diego_Calp]

Hi Alan,

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

Regards

Diego

[Alan_D_1]

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.

[Diego_Calp]

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