I made a simple example using the android plugin for printplugin
Here the plugin:
https://github.com/EionRobb/phonegap-print-plugins/tree/master/Android
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Prueba de Impresion</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="printplugin.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function imprime(){
var html = document.getElementById("printHTML").innerHTML;
window.plugins.printPlugin.print(html,
function(result) {
alert("print ok");
},
function(result) {
if (!result.available){
alert("no printing available");
}
else{
//Localised error description
alert(result.error);
}
}
);
}
</script>
<div data-role="page" id="page">
<div data-role="header">
<h1>Prueba de Impresion</h1>
</div>
<div data-role="content">
<button data-icon="gear" onClick="imprime();">Imprimir</button>
Contenido</div>
<div id="printHTML">
<div style="color: red;">
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
</div>
<div style="color: green; page-break-before:always;">
<p>In the Propontis, as far as I can learn, none of that peculiar substance called BRIT is to be found, the aliment of the right whale. But I have every reason to believe that the food of the sperm whale—squid or cuttle-fish—lurks at the bottom of that sea, because large creatures, but by no means the largest of that sort, have been found at its surface. If, then, you properly put these statements together, and reason upon them a bit, you will clearly perceive that, according to all human reasoning, Procopius's sea-monster, that for half a century stove the ships of a Roman Emperor, must in all probability have been a sperm whale.</p>
</div>
<div style="color: blue; page-break-before:always;">
<p>They were not their families, nor their wives, nor their servants; the relationship was peculiar, and so unlike anything known to us that it is most difficult to describe. All property among the green Martians is owned in common by the community, except the personal weapons, ornaments and sleeping silks and furs of the individuals. These alone can one claim undisputed right to, nor may he accumulate more of these than are required for his actual needs. The surplus he holds merely as custodian, and it is passed on to the younger members of the community as necessity demands.</p>
</div>
</div>
<div data-role="footer">
<h4>Pie</h4>
</div>
</div>
</body>
</html>
the application runs and displays the message: no printing available, and in logcat I see the following message:
Error: Status=undefined Message=Class not found at file:///android_asset/www/phonegap.js:473
I have installed 1.4.4 send2printer
if someone could tell me I'm doing wrong
Thanks to all in advance
Related
I am working on building an mobile application on apache cordova. I am using the latest version 9.0.0 (cordova-lib#9.0.1).
I have created the index.html
The code works great on cordova browser. But it do not run on android device. I have not checked the emulator, because my system do not support emulators (you can say hardware acceleration fails).
So I install the apk on my android phone. But the app do not work.
Here is my code:-
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/swipe.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Swipe Left</h1>
</div>
<div data-role="content">
<p>Swipe Left to get to the next page.</p>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<h1>Swipe Right</h1>
</div>
<div data-role="content">
<p>Swipe Right to get to the next page.</p>
</div>
</div>
</body>
</html>
Below is my swipe.js
$(document).delegate("#firstpage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#secondpage", {
});
});
})
$(document).delegate("#secondpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#firstpage", {
});
});
});
Could any one would suggest how to achieve the page swipe in apache cordova.
What I want?
I want to go to next page(or div) by swiping my fingers on the mobile screen.
I have done searching all the web, but the code works in browser but not on android device.
Any help would be appreciated.
You should debug the app running on the phone with Chrome Device Inspector.
Anyway, try moving your JS and CSS resources to your local path in order to embed them with the app, probably their download is being blocked due to security policies.
I am new with ionic framework.Currently i am working on ionicsidemenu app. I want to show records according to date, having date as heading and respective date having multiple records.
For this i have two web services one is for heading date another is for date-wise records. In my HTML file i have two ng-repeat one is for display heading date. Now i am not able to understand how to get records of particular date as date has to be sent to web service for getting records.
I have tried this:
<div ng-repeat="d in dates track by $index">
<h2>d.edate</h2>
<div ng-init="datewiserecords(d.edate);" >
<div ng-repeat="n in res1 track by $index" class="text-white" >
</div></div></div>
but its not working.Please help me.
I am not sure what you are looking for, but the way I understand the question makes me to give you a solution as below:
My Solution:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="get_date in dates">
<h2>{{get_date.date}}</h2>
<h4>{{get_date.data}}</h4>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates = [{date:"1",data:"One"},{date:"2",data:"Two"},{date:"3",data:"Three"}];
});
</script>
</body>
</html>
Hope This is helpful
I am working on a PhoneGap application and am using jQuery Mobile. The last time I was working on the project it was looking great, but now jQuery Mobile stopped working. What's going on?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="content">
<h2>Login To Carpool Mobile</h2>
<p align="right">Don't have an account? →</p>
<form method="post" id="loginForm">
<label for="password">Email:</label>
<input class="required" type="text" name="username" id="username" placeholder="username#target.com">
<label for="password">Password:</label>
<input class="required" type="password" name="password" id="password" placeholder="password">
<input type="button" value="Login" id="submitButton" onClick="handleLogin()">
</form>
</div>
</div>
<script>
$(document).ready(function() {
checkPreAuth();
});
</script>
</body>
</html>
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!
You can't use below one with jQuery Mobile
$(document).ready(function() {
checkPreAuth();
});
You need to use custom jQuery Mobile specific events. You may have to change your code as below.
$('#page').live('pageshow', function(event){
checkPreAuth();
});
Check documentation for more relevant events.
From your code I can notice that you are using very old libraries of both jQuery and jQuery Mobile. I would recommend you to upgrade to the latest library which will enable you to use much more features than what you have in your current version.
Here is an example with latest framework from jsfiddle.
I don't have any problem with your code apart that checkPreAuth(); is not defined. You should also try to update your version of query and jquery mobile.
I will recommend that you download and include should include the JQuery mobile and Jquery files( script files) in your www project directory
Remove the $(document).ready(function() and keep checkPreAuth(); inside the deviceready event of PhoneGap.
I have weird behaviour using regular HTML input type button with phonegap (android/eclipse). This is the HTML that is causing my headache:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<form>
<input type="button" value="Rest Call" onClick="restCall(); />
<button type="button" onClick="restCall();">Rest Call</button>
</form>
</body>
</html>
The result of this is two buttons with the correct label/value, "Rest Call". But, to the left of both buttons the same text is also shown. So the label/value is shown twice.
I have spent some time on this now, not finding a solution. Hope someone can help.
Cheers,
OMA
I just tried to create a PhoneGap 1.4.1 project with your HTML in it.
I couldn't reproduce the problem until I added :
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
I thought this was a problem with that specific file but then I remove
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
and it worked fine.
So I think there is a conflict between these two files.
I'm no jQuery/jQMobile expert but are you sure you need both these files (especially jQuery-1.7.1.js) ?
Why don't you change your code to :
<input type="button" value="Rest Call" name="hei" onClick="restCall();"/>
There is some conflict between the two scripts, I get the same behaviour as mentioned by TDeBailleul.
I am doing some ajax calls etc which needs jQuery-1.x.x.js. All the how-to's on using phonegap with jquery also says to do this.
I found now that I need to use a specific version of jquery mobile (jquery.mobile-1.0a4.1.min.js), which is weird. Thanks for pointing me in the right direction TDeBailleul.
We're developing a jQuery Mobile application using ASP.NET 3.5, and we've run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here's a simple .aspx page that should reproduce the problem (I'm testing on Android 2.2.2 and iOs 4.2.6).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
With the ScriptManager, that h1 tag will produce a tap highlight each time it's touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
Adding a css rule to our stylesheet doesn't work, because the client-side initialization of the ScriptManager seems to override it somehow.
ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form - H1 just happens to be within it from a DOM perspective.
You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won't be practical for all your elements.
I think the approach of adding "-webkit-tap-highlight-color" is valid but perhaps you need to do this after script manager does its stuff:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.