CODEWITHSUNDEEP
jqueryjquery-mobile
Roel
Roel

Reputation: 764

jQuery Mobile Changing page on PageCreate

Good'ay to all of you.

I thought I wanted to know a little more about jQuery mobile so I started yesterday, but I am already stuck at the very beginning.

What I am trying to achieve is:

That way, pages/home.html would be the default page. Is this somehow possible? Currently, I have this:

<body>
    <script>
    $(document).bind('pagecreate', function()
    {
        $.mobile.changePage("pages/home.html");
    });
    </script>
</body>
</html>

It shows kind of odd behaviour, sliding in twice and displaying the Error-message (saying the page was not able to load).

I want all my pages to be in the pages subdirectory. Is this possible or am I being impossible again?

Thanks.

EDIT

The other page contains the following in the body;

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

</div>

Upvotes: 2

Views: 1011

Answers (2)

Derek
Derek

Reputation: 2735

It is possible, the odd behavior occurs because of binding event to document, the pagecreate event will be fired everytime page loaded. ( The first is from index to pages/home.html and the second time is from pages/home.html to pages/home.html ) To avoid this issue, set an id in your index page like this and bind the event to #indexPage instead of document.

<div data-role="page" id="indexPage">

<script type="text/javascript">
   $("#indexPage").bind('pagecreate', function()
   {
    $.mobile.changePage("pages/home.html");
   });
</script>

Please note that $.mobile.changePage() works only if your html is put to hosting/ local sever(localhost). If you don't want to put the files to server. There is an alternative way, use window.location instead of $.mobile.changePage(). Because $.mobile.changePage() will programmatically change from one page to another page by using ajax to load html instead of refreshing the whole page in browser.

<script type="text/javascript">
 $("#indexPage").bind('pagecreate', function()
 {
   window.location = "pages/home.html;
 });
</script>

For more detail steps, please refers to http://demanstudio.blogspot.com/2013/02/change-pages-in-jquery-mobile.html

Hope this can help you.

Upvotes: 2

Ranjith
Ranjith

Reputation: 510

Here the index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<script>
    $(document).bind('pagecreate', function()
    {
        $.mobile.changePage("home.html");
    });
    </script>

</body>
</html>

Here is home.html

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

</div>

Run it in a local server, don't open directly in browser. Its working fine

Upvotes: 0

Related Questions