Back button not loading page content - JQuery Mobile

Question

I am building a hybrid app on jquery mobile and i wanna use back buttons to navigate between different pages.

I have created the back button and it DOES load the url of the last page, but it doesn't refresh the page content (it keeps showing the same page ie: the button doesn't realize the function)

Looking through the questions previously asked about back button - jquery mobile I can't find one exposing a problem of page loading (cause as I said the button gets the right url but doesn't load the page content)

NOTE: i am using IBM Mobile First

<a href="#loginPage" data-direction="reverse" data-role="button"
            id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
            data-corners="false">Button</a>

(I wanna move from main page --> login page)

Answer 1

Your HTML button tag is working fine in JSfiddle:

https://jsfiddle.net/pengyanb/a8pzr7gt/6/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <div data-role="page" id="mainPage" data-theme="a"> <div data-role="header" data-position="fixed"> <a href="#loginPage" data-direction="reverse" data-role="button" id="mainPageBackBtn" data-icon="back" data-iconpos="notext" data-corners="false">Button</a> <h5>Main Page</h5> </div> <div data-role="main" class="ui-content"> <h2>This is Main Page</h2> </div> </div> <div data-role="page" id="loginPage" data-theme="a"> <div data-role="header" data-position="fixed"> <a href="#mainPage" data-direction="reverse" data-role="button" id="mainPageBackBtn" data-icon="back" data-iconpos="notext" data-corners="false">Button</a> <h5>Login Page</h5> </div> <div data-role="main" class="ui-content"> <h2>This is Login Page</h2> </div> </div> 

Maybe try check you tag Id is correctly assigned?

Answer 2

You can try using data-ajax="false" here:

<a href="#loginPage" data-ajax="false" data-direction="reverse" data-role="button"
        id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
        data-corners="false">Button</a>