This question already has answers here:
How to change page in jQuery mobile (1.4 beta)?
(2 answers)
Closed 9 years ago.
Im working on a JQuery Mobile App.
im using the Multipage template feature to navigate between content.
i can easily navigate between pages with an "a" tag using the div page ID ref...
<a href="#page2" />
if i have the following page stricture...
<div data-role="page" id="page1">
<!-- content -->
</div>
<div data-role="page" id="page2">
<!-- content -->
</div>
<div data-role="page" id="page3">
<!-- content -->
</div>
how can i open page 2 using javascript rather than an a tag?
You can use $.mobile.navigate(). For example,
$.mobile.navigate("#page2");
Related
I am using jqm 1.4.5. for my web app. I have a problem changing to a page programmatically using the pagecontainer change widget in a certain situation. I have a home page that is part of the index.html file. From the home page if I load an external page via jqm ajax method and then from that page have a button that changes back to the home page (via javascript) it fails silently. However, it works if the external page has an anchor button with an href="#home_page".
The JS code is being executed. All the id's are correct.
Why does it work using the anchor button but not programmatically with the button tag using the JS code?
What am I doing wrong?
index.html
<div id="page_home" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
load in the external page
</div>
page_external.html
<div id="page_external" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
go to home page <!-- this works -->
<button id="mybutton" data-role="button" > go to home page (script)</button> <!-- this does not work -->
</div>
JS
$(document).on("click", "#mybutton, function () {
//this fails silently and does not change the page
$(":mobile-pagecontainer").pagecontainer( "change", "#page_home" );
});
I found the answer here on SO:
Similar Question
I was using the wrong syntax. It should be
$(":mobile-pagecontainer").pagecontainer( "change", $("#page_home" ));
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>
I am new to phonegap. I am trying to implement a simple sliding menu in all pages. How do I get this menu to come on all pages without re-writing the same code on all pages?
Do let me know.
Checkout JQuery Mobile (http://jquerymobile.com) or JQTouch (http://jqtjs.com) for some examples.
If you are using jQuery Mobile Framework,then you can write the below code in the body tag of your html page:-
<div data-role="header" data-tap-toggle="false" data-theme="a" data-position="fixed" id="gs-header">
<h1 id="groupName"></h1>
</div>
<div data-role="panel" data-position="left" data-display="push" data-theme="b" id="nav-panel"></div>
I'm trying to show a pop up which will close when touched and also keep the underlying page as it was left because it will have open accordions on it. This works in the browser but wont close on android. I'm using android 2.3, jquery mobile and phonegap.
My code is:
<div data-role="page">
<div>
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="true" data-history="true" data-overlay-theme="c" onclick="closePopup();" >
<p>This is a basic popup.<p>
</div>
</div>
</div>
and:
function closePopup(){
$('#popupBasic').popup('close');
}
Any help would be great.
Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:
<li>Link1<span class="icon"></span></li>
The content of the link1.html page:
<!-- page -->
<div data-role="page" class="pages" id="link1">
<!-- header -->
<div data-role="header"> Menu
<div class="headerlogo"></div>
</div>
<!-- /header -->
<div data-role="headerimage" class="headerimage"><img src="images/headerimages/bild1.jpg" /></div>
<div data-role="content">
<h3>Link1</h3>
<p></p>
</div>
<!-- /content -->
</div>
<!-- /page -->
When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.
What I want is: http://example.com/#link1.html
But what I get is: http://example.com/link1.html
So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.
What I am doing wrong?
Thx
Stefan
You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.
Edit - This may actually achieve what you're trying to do.
$(document).on('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
Make sure the event handler is placed before jQuery Mobile is loaded.