Joakim M
Joakim M

Reputation: 1803

Flickering jQueryMobile

I am developing a jQueryMobile site using MVC (MVC-n00b).

I have a footer with a navbar (see image below)

When clicking on one of Start/Test etc. the screen goes white and then the new "screen" appears. I guess I get a postback. What am I doing wrong?

My "Home" view Code:

 <div data-role="page" id="page1">
        <div data-role="header">
            <h1>page1
            </h1>
        </div>
        <div data-role="content">
            Content1</div>
        <div  data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li>
                    <li><a href="#page2">Two</a></li>
                    <li><a href="#page3">Three</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>page2
            </h1>
        </div>
        <div data-role="content">
            Content2</div>
        <div  data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page1">One</a></li>
                    <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li>
                    <li><a href="#page3">Three</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="page" id="page3">
        <div data-role="header">
            <h1>
                page3
            </h1>
        </div>
        <div data-role="content">
            Content3</div>
        <div  data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page1">One</a></li>
                    <li><a href="#page2">Two</a></li>
                    <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li>
                </ul>
            </div>
        </div>
    </div>

enter image description here

I actually tried the "same" with a normal asp.net-project with the same result.

Upvotes: 1

Views: 67

Answers (1)

Joakim M
Joakim M

Reputation: 1803

Adding data-transition="none" solved it.

 <li><a href="#page2" data-transition="none">Two</a></li>

Thanks Gajotres!

Upvotes: 1

Related Questions