jquery mobile multipage doesn't work, but works after refreshing

Question

jquery mobile multipage doesn't work, but works after refreshing

1.2k Views Asked by Tao At 27 April 2025 at 06:46

I'm using jquery mobile 1.3.2 and have a multipage html as follows:

<div data-role="page" data-add-back-btn="true" id="form">
   <div data-role="header" data-position="fixed">
      <a href="#queue" data-icon="star" data-iconpos="notext" class="ui-btn-right" data-transition="flip">Queue</a>
   </div><!-- /header -->
...
</div><!-- /page #form -->

<div data-role="page" id="queue" data-title="xxx">
...
</div><!-- /page #queue -->

clickign on the button doesn't work, but when I refresh the page and click again, it works. I've compared the html source before and after refreshing, and found them identical.

Is anything wrong or is this a bug of jquery mobile?

Original Q&A

There are 3 best solutions below

**msapkal** · Answer 1

Multi-page template doesn't work with JQM (jQuery Mobile) AJAX navigation system. If you load the multi-page template using AJAX it won't work.

Multi-page template requires page refresh to work. This is not a bug with JQM, instead this is how multi-page template works :)

**Ved** · Answer 2

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="form">
    <div data-role="header">
        <a href="#queue" data-icon="star" data-iconpos="notext" class="ui-btn-right" data-transition="flip">Queue</a>
        <h1>Form</h1>
    </div>
    <div data-role="content"> 

    </div>
    <footer data-role="footer" data-position="fixed"></footer>
</div> 
<div data-role="page" id="queue">
    <div data-role="header">
        <a href="" data-rel="back" id="back" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Queue</h1>
    </div>
    <div data-role="content" id="content">         
    </div>
</div> 
</body>

</html>

**Juan Carlos Alpizar Chinchilla** · Answer 3

Is there any previous page calling the one you're having conflicts with, or is this the first page that your application launches?

Multipage environment requires page to refresh as part of the jQuery Mobile core functionality, adding to that there's the fact that jQuery Mobile default method to link pages is through ajax, which obviously, causes no refresh.

You can use both single page and multipage environments in your project, but if you're redirecting from a single page html to a multipage one, you need to add the data-ajax=false attribute in the link you're using to refer to the multipage page.

Using in a link:

<a id="link_sample" href="multipage_destination.html" data-role="button" name="link_sample" data-ajax="false">Take me to it</a>

If you need to reference a multipage from a form into a single page environment, you need to add the data-ajax=false attribute to the <form> tag:

<form method="post" action="multipage_destination.html" data-ajax="false">

You can find this and more detailed information about redirecting in the jQuery Mobile Documentation for your version here:

http://demos.jquerymobile.com/1.3.2/widgets/links/

Hope that helps :)

jquery mobile multipage doesn't work, but works after refreshing

There are 3 best solutions below

Related Questions in JQUERY-MOBILE

Related Questions in MULTIPAGE

Trending Questions

Popular # Hahtags

Popular Questions