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

Question

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?

which button doesn't work? are you attaching any event to that button? please elaborate and provide more details. — Omar, Jan 02 '14 at 09:43

score 0 · Answer 1 · answered Jan 23 '14 at 19:01

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 :)

score -1 · Answer 2 · answered Jan 02 '14 at 05:43

-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 :)

answered Jan 02 '14 at 05:43

msapkal

8,268
2
31
48

but I'm not loading the page using ajax. – Tao Jan 02 '14 at 06:08
then have a look at the Jquery Mobile docs, because JQM uses ajax for navigation. – frequent Jan 02 '14 at 07:43
your answer is entirely incorrect. _multi-page model_ means all pages in once HTML file. _single page model_ means each page in a separate HTML file. jQM __doesn't__ require refresh to work, and it's designed to work efficiently with _multi-page model_. – Omar Jan 02 '14 at 09:41
@Omar, OK, Let's say if you navigate from single page to multi-page using AJAX navigation. Will multi-page now work ? – msapkal Jan 02 '14 at 10:07
No, it wont work. It's either _multi_ or _single_, it's not possible to mix both. – Omar Jan 02 '14 at 10:09

score -1 · Answer 3 · answered Jan 02 '14 at 08:42

<!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>

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

3 Answers3