I am currently doing some development for Windows Phone 7 using phonegap+jquery mobile
For some reason, Windows phone emulator included in the latest Visual Studio express could not render simple multipage app.
Anyone have some pointers on how to solve this? Thank you
below is the code. It is pretty much taken from jquery mobile documentation.
<!DOCTYPE html>
<html>
<head>
<!--
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no;" />
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<title>JQ Tester</title>
<link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/custom-scripting.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-title="Page One">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>
This is a multi-page single page template that has just one page within it.
</p>
<p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>
You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
</p>
<h3>Show internal pages:</h3>
<p>
Show page "two"
</p>
<p>
Show page "popup" (as a dialog)
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a" data-title="Page Two">>
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>
I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page popup -->
</body>
</html>
The viewport is the problem here, is not the same on all plataforms and devices, for Windows Phone 7 you can try add this code to the head tag
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
Good Luck!
I copied your code into a new Phonegap 1.4.1 project and it worked with both jQuery 1.6.4 and 1.7.1. I'd suggest trying a different version of jQuery and/or re-installing any dependencies for the project such as the Windows Phone SDK and Phonegap template.
Related
Good afternoon ...
My problem is this (link to issue image).
When using, for example, a COLLAPSIBLE control, this adds me a higher or lower margin.
I see no statement on the same CSS to display as well.
The code is nothing strange.
Appears well in the pages of demonstrations or others pages. This happens to me on multiple browsers including Chrome and Firefox only with my page.
Thanks for your help and sorry my English.
jQueryMobile version 1.4.5.min
jQuery version 1.11.2.min
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" data-content-theme="b">
<div data-role="header">
<h1>Definición de Formulario</h1>
<input type="text" placeholder="Nombre del formulario" value="" id="nombremapa" name="nombre" />
</div><!-- HEADER -->
<div data-role="content" data-position="fixed" id="campos">
</div><!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li>Agregar</li>
<li>Quitar</li>
<li>Editar</li>
<li>Información</li>
<li>Enviar</li>
</ul>
</div>
<div data-role="popup" id="popupMenuAgregar" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a id="add_texto">Texto</a></li>
<li><a id="add_numero">Numero</a></li>
<li><a id="add_fecha">Fecha</a></li>
<li><a id="add_lista">Lista</a></li>
</ul>
</div>
</div><!-- FOOTER -->
</div><!-- PAGE -->
</body>
</html>
http://jsfiddle.net/zwLvjrc2/
I want to build a JQM app of single page app.
I need the menu to be in a separate file and that every "page" will be also in saparate file and all the includes and the template will be in the index.html.
how can I do it?
Thank you
In JQM content visible only data-role='page' and you need to manage each page by id attribute only. And you need to manage menu, header, footer..etc for all common files to be saved in separated files, after you can load using load() function. Inside `$(this).trigger('create');' for applying JQM default styles and attributes. If you have any issues in this structure plz feel free to ask me.
<!DOCTYPE html>
<html>
<head>
<title>your app title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript">
$(document).on('pagecreate', function (event) {
$("[id*=header]").load('header.html', function () {
$(this).trigger('create');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header" id="header"></div>
<div data-role="content">
Page one content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageTwo">
<div data-role="header" id="header"></div>
<div data-role="content">
Page two content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageThre">
<div data-role="header" id="header"></div>
<div data-role="content">
Page three content
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
When I open the page directly, the maps section will load. However, when I open the page from a link on another page, the maps will not load. I saw previous posts that said that the script must not be in the Head tags because they will not load. However, when I place them in the data-role="page" section, its still fails to load the maps. My code is below. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boilerplate
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$(function() {
$('#map_canvas').gmap();
});
</script>
</head>
<body>
<div id="detailpage" data-role="page" data-theme="c" data-add-back-btn="true">
<div data-role="header" data-id="head1" data-position="fixed"> <h1>Header</h1>
</div>
<!-- /header -->
<div data-role="content">
<hr> <b>Title Section</b>
<hr> This is a detailed description section where we can insert some content here with
<br> some page breaks in it.
<br>
<hr> This section contains details about the businsess and some other controls and forms.
<br>
<br>
<hr>
<div id="map_canvas" style="width:100%;height:250px">
</div>
</div>
<!-- /content -->
<div data-role="footer" data-id="foot1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
D
</li>
<li>
C
</li>
<li>
P
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
</body>
</html>
The header is only loaded on the first JQuery Mobile page accessed. Scripts for each individual page should be included in the data-role="page" div for that page.
Also, your Google Maps load should look something like this.
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Here is Google's getting started section on the Google Maps API.
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link
When I redirect in a post going back to the page that shows the form, JQuery mobile shows me the results instead of the form.
Lets say I have three resources:
/ => Just shows a link to the /redirect_to resource, this is to test
/redirect_to => GET: Shows a form to say your name in /thank_you
/redirect_to => POST: Just redirects to /thank_you showing the name that you input
/thank_you => GET: Shows a text "Thank you name!"
After I get to the Thank You! page, if I try to go back home, and then go to /redirect_to I get the content of /thank_you instead of the form of /redirect_to, if I refresh the page I get the form.
So instead of looking at the form to redirect_to I see the thank_you page.
Here is the code in Sinatra if you don't understand it, at this point I'll re-write it in Flask, Snap, Rails, Django (my app is on Django)... but it should be good enough to read. Here is the code on Github (Since StackOverflow doesn't detect my ruby): https://gist.github.com/1061639
To run the app you basically install sinatra: gem install sinatra
And run it: ./jquerymobile_redirect_error.rb
#!/usr/bin/env ruby
require 'rubygems'
require 'sinatra'
get '/' do
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<h1>Go to /redirect_to here.
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
get '/redirect_to' do
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<form action="/redirect_to" method="post" accept-charset="utf-8">
<p><label for="name">Name</label><input type="text" id="name" name="name" value="" id="name" placeholder="input your name">
<p><input type="submit" value="Redirect to /thank_you →"></p>
</form>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
post '/redirect_to' do
redirect "/thank_you/#{params[:name]}"
end
get '/thank_you/:name' do |name|
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<h1>Thanks #{name}!</h1>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
Specify data-url for your thank_you page. That forces change of url on form submit.
<div data-role="page" data-url="/thank_you">
I found that info from the docs under Redirects and linking to directories.
This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission.