I have this problem, which had been working in previous versions, and I dont know what happend since its not working now.
The problem is that only the header and footer in jqm is "sliding/showing".
I've included the problem visually:
My code is:
<!DOCTYPE html>
<html>
<head>
<title>AP</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="js/jqm/jquery.mobile-1.4.3.min.css" rel="stylesheet" />
<style>
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
</head>
<body id="body">
<!-- LOGIN -->
<div data-role="page" id="loginPage" data-theme="a">
<!-- HEADER -->
<div data-role="header" data-theme="b">
<h3>AP</h3>
</div>
<!-- CONTENT -->
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" value="" name="username" id="username" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password" />
</div>
<input type="button" data-theme="b" name="submit" id="loginSubmit" value="Log ind">
</fieldset>
</form>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<!-- MAP -->
<div data-role="page" id="mapPage">
<!-- PANEL LEFT -->
<div data-role="panel" id="mapPanel">
<ul data-role="listview" data-inset="true" id="mapPanelList"></ul>
</div>
<!-- HEADER -->
<div data-theme="b" data-role="header" id="mapHeader">
Menu
<h3 id="headerTitle"></h3>
<a id="logout" data-icon="delete">Exit</a>
</div>
<!-- CONTENT -->
<div data-role="content" style="margin: 0; padding: 0;" id="mapContent">
<div id="map" class="ui-panel-wrapper"></div>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/googlemaps3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/jqm/jquery.mobile-1.4.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="georescue.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
Same code works without googlemaps..
Any help appreciated.
Related
So i am trying to export a specific div to a PDF file and i am failing miserably...
This is the page:
<!DOCTYPE HTML>
<html>
<head>
<title>Testpage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="../assets/css/jquery.dataTable.min.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="../assets/css/toastr.css" />
<link rel="stylesheet" href="../assets/css/chart.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="../assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="../assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner" id="inner">
<!-- Header -->
<header id="header">
<h2><strong>Test</strong></h2>
</header>
<!-- Content -->
<section>
<!-- Table -->
<h3>Table</h3>
<div class="table-wrapper">
<table id="myTable">
<thead>
<tr>
<th>Time</th>
<th>Speed</th>
<th>Meters</th>
</tr>
</thead>
<tbody>
<?php
require_once ('showData.php');
?>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menü -->
<nav id="menu">
<header class="major">
<h2>Menü</h2>
</header>
<ul>
<li>Home</li>
<li>
<span class="opener">Test</span>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</li>
</ul>
</nav>
<!-- Filter -->
<section>
<header class="major">
<h2>Filter</h2>
</header>
<form method="post" id="submitdata" name="submitdata">
<div class="row uniform">
<div class="12u 12u$">
<input type="text" name="datefrom" id="datefrom" value="" placeholder="Date from" />
</div>
<div class="12u 12u$">
<input type="text" name="dateto" id="dateto" value="" placeholder="Date to" />
</div>
<div class="12u$">
<div class="select-wrapper">
<select name="dropdown" id="dropdown">
<option value="0">- Choose -</option>
<option value="1">All</option>
<option value="2">Speed</option>
<option value="3">Meter</option>
</select>
</div>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" id="btnSubmit" value="Clickme" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!-- Exportmenü -->
<section>
<header class="major">
<h2>Export</h2>
</header>
<div class="12u 12u$">
<button id="btnExport" class="button special icon fa-file-pdf-o">Export as PDF</button>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p> Stuff </p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/jquery.dataTables.min.js"></script>
<!--[if lte IE 8]><script src="../assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../assets/js/main.js"></script>
<script src="../assets/js/toastr.js"></script>
<script src="../assets/js/submitData.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</body>
</html>
I am trying to get everything in <div class="inner" id="inner"> into an PDF-File but nothing seems to work. I tried with jsPDF and html2canvas (html -> img -> pdf) but the quality is VERY bad. Nothing else seems to work.
I would appreciate some pointers like what i can use to get it working.
Thank you very much,
Skar
EDIT:
This is what i included after the jsPDF recommendation
<script src="../assets/jsPDF/jspdf.debug.js"></script>
<script src="../assets/jsPDF/examples/js/html2canvas.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#header': function(element, renderer){
return true;
}
};
$('#btnExport').click(function(){
var html=$("#inner").html();
doc.fromHTML(html,0,0, {
'width': 500,
'elementHandlers': specialElementHandlers
});
doc.save("Test.pdf");
});
</script>
Try this library, it is built for client side PDF generation.
https://parall.ax/products/jspdf
Here is the github link
I have a very simple page with two sections identified with a , and linked using a Jquery Mobile formatted link on the same page (Refresh Rate), and it doesn't seem to work consistently.
Although I am using this in a PhoneGap application, the same problem happens when I try to load the page locally in Chrome.
<head>
<title>TPS/TFS CAD Page</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tfscad.mobile.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/js.cookie.js"></script>
<script src="cordova.js"></script>
<script type='text/javascript'>
function save_val(va) {
localStorage.setItem('refreshrate', va );
var refreshrate=localStorage.getItem('refreshrate');
alert('The refreshrate is set to ' + refreshrate);
}
</script>
</head>
<body>
<div id="options" data-role="page">
<!-- Start of first page -->
<div data-role="header">
Back
<h1>Options</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
Alerts
Filters
<a href="#refopt" class="ui-btn ui-icon-carat-r ui-btn-icon-right" >Refresh Rate</a>
</div><!-- /content -->
<div data-role="footer">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="refopt">
<div data-role="header">
Back
<h1>Refresh Rate</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<fieldset data-role="controlgroup" data-iconpos="right">
<legend>The frequency that the application refreshes the dispatched events.
Increasing this may reduce data usage, but will slow down how quickly you are notified of a new event</legend>
<input type="radio" name="refreshtime" id="10" value="10000" checked="checked" onclick="save_val('10000')">
<label for="10">10 Seconds (Default)</label>
<input type="radio" name="refreshtime" id="20" value="20000" onclick="save_val('20000')">
<label for="20">20 Seconds</label>
<input type="radio" name="refreshtime" id="30" value="30000" onclick="save_val('30000')">
<label for="30">30 Seconds</label>
<input type="radio" name="refreshtime" id="60" value="60000" onclick="save_val('60000')">
<label for="60">1 Minute</label>
<input type="radio" name="refreshtime" id="120" value="120000" onclick="save_val('120000')">
<label for="120">2 Minutes</label>
</fieldset>
</div><!-- /content -->
<div data-role="footer">
<h4></h4>
</div><!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?
I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the "pageshow" event to the page div:
<!DOCTYPE HTML>
<html>
<head>
<title>Funil de Vendas</title>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="lib/jquery.mobile-1.3.0.min.js"></script>
<script>
var nice = false;
$(document).ready( function(){
$("#other_page").bind('pageshow',function() {
alert('The page was called!');
});
});
</script>
</head>
<body>
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
</div>
<div data-role="page" class="Page" id="other_page">
<div data-role="content">
...
</div>
...
...
...
</div>
</body></html>
How can I do the same using multiples HTML files. I cannot bind to the page the because this div is in another HTML file.
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
Thanks in advance!
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});