JQuery mobile change page step back first time

Question

When I initialized a page and I try to navigate, at the first time the page step back. Why does the page step back.

I try to navigate in this way: $.mobile.changePage("#pagename");

For example. I try to go to the page of customers from the main after the initialization, I click to the icon. The webpage navigates when the navigate finished the page navigates back, but just at the first time, the url is still #... .

code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="styles/jquery.mobile-1.3.1.min.css" />
    </head>

    <body>

        <!-- //////////////////////////////////////////////////////
        //////////          MAIN PAGE          ///////////////
        ////////////////////////////////////////////////////// -->
        <section id="main-page" data-role="page" data-fullscreen="true">
            <header data-role="header">
                <h1>Főoldal</h1>
            </header>
            <div data-role="content">
                <table>
                    <tbody>
                        <tr>
                            <td>
                            <div class="metro-bt" onclick="$.mobile.changePage('#customer-page');" id="customer-btn"> <!-- <<<-------------- here I invoke the function change page and than change back, but just at the first time -->
                                <div></div>
                                <span>Customers</span>
                            </div></td>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_calendar_click" id="calendar-btn">
                                <div></div>
                                <span>Calendar</span>
                            </div></td>
                        </tr>
                        <tr>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_negotiation_click, enable:isNegBtEnable" id="negotiation-btn">
                                <div></div>
                                <span>Negotiation</span>
                                <span data-bind="text: durationOfNegotiation" style="line-height: 0; display: block;"></span>
                                <span data-bind="text: nameOfPartner" style="line-height: 15px;clear: both; display: block;">asdf</span>
                            </div></td>
                            <td>
                            <div class="metro-bt" data-bind="click: bt_logout_click " id="logout-btn">
                                <div></div>
                                <span>Logout</span>
                            </div></td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </section>

        <!-- //////////////////////////////////////////////////////
        //////////          Customer            ///////////////
        ////////////////////////////////////////////////////// -->

        <section id="customer-page" data-role="page" data-fullscreen="true">
            <header data-role="header">
                <h1>Ügyféltörzs</h1>
                <a data-role="button"  href="#main-page" data-icon="back" data-iconpos="notext" class="ui-btn-left"></a>
            </header>
            <div class="content" data-role="content">
                <div data-enhance="false" data-bind="event: { rowselect: rowselect }" id="customer-jqxGrid" style="margin: 0 auto"></div>
            </div>

            <div data-role="footer" data-position="fixed" data-tap-toggle="false">
                <a href="#add_customer-page" data-icon="plus"> Hozzáad </a>
                <a id="b-customer-negotation" class = "ui-disabled" data-icon="star" data-bind="click: startNegotiation">  </a>
                <a id="b-customer-modify" class = "ui-disabled" data-icon="edit" data-bind="click: modify"></a>
            </div>
        </section>



        <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="styles/main.css" type="text/css" />

        <script type="text/javascript" src="scripts/lib/jquery-1.9.1.min.js"></script>
        <script src="scripts/lib/knockout-2.2.1.js"></script>


        <script src="scripts/lib/jquery.mobile-1.3.1.min.js"></script>



        <script type="text/javascript">
            g_loginViewModel = null;
            m_tokenKey = "token";
            m_serverName = "http://localhost:49670";

            $(function() {
                $.mobile.ignoreContentEnabled = true;
                if (window.localStorage.getItem(m_tokenKey) != null) {
                    $.mobile.changePage("#main-page");
                    // bootstrap();
                } else {
                    g_loginViewModel = new LoginViewModel();
                    ko.applyBindings(g_loginViewModel, document.getElementById("login-page"));
                }
            });

        </script>
    </body>
</html>

Answer 1

Please post it in fiddle, also what do you mean by page steps back? i guess you need not specify the first page as change page it should directly load the first page with data-role page.

JQuery mobile change page step back first time

Question

1 answers

solution1
0 2013-07-24 08:37:29

JQuery mobile change page step back first time

Question

1 answers

solution1 0 2013-07-24 08:37:29

solution1
0 2013-07-24 08:37:29