I'd like to explain what does "Javascript not working" mean, but the only thing I can do is tell that the code is never executing, and don't know how to debug.
Let's start: I'm developing a Phonegap application - in that sense, I don't have a console object to check on.
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>1001Carros</title>
</head>
<body>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
adaptandose a dispositivo ...
</body>
</html>
And this is my javascript:
var app = {
// Application Constructor
initialize: function() {
switch(device.platform) {
case "iPhone":
location.href = "index-iphone.html"; break;
case "Android":
case "BlackBerry":
case "BlackBerry WebWorks":
location.href = "index-android.html"; break;
default:
location.href = "index-android.html";
}
}
};
My intention is: when the document is loaded, initialize() is called. Such method would verify the platform and redirect to the appropiate screen.
When I run my app in the emulator (which finally appends ?enableripple=cordova to my url), I get that "phonegap.js" does not exist. If that's the problem, it seems easy to explain why I'm not being redirected.
However, when I compile the application via local tools (i.e. phonegap run android) such file seems to be created in the assets directory (in android platform).
Question: How can I debug this issue? I'm using the emulator and, alternatively, a Samsung Galaxy Tab 3. I would like to debug the device and see if the problem is with the file (as it is shown in the emulator/ripple) or is it elsewhere.
It'd be great if someone with more experience could help me if they had a similar problem since it's my first phonegap application.
To answer your question about debugging, since your devices most likely don't have a console, you'll have to use alerts. I like to use alerts to test if a function is firing, if the appropriate data is being stored/passed, etc.
As for why your javascript is not working, I'm not positive but I think it has to do with you using "app". I believe that is reserved for native phonegap things, as seen in "navigator.app.exit()". I would suggest you rename the variable and try that.
I don't understand your question clearly. But i see your code has issue. In phonegap, all API device(provided by phonegap) must be call when event deviceready fired:
document.addEventListener('deviceready', function(){
// Code here
}, false);
In phonegap, support many tools to debug app now: phonegap debug, weinre is power
You can use console.log('...'), it support any device, see log in your IDE: Xcode, Eclipse,..
There are plenty of ways to debug your phonegap code on android:
logcat
Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
Chrome Remote Debugging (only Android 4.4+): https://developer.chrome.com/devtools/docs/remote-debugging
..
Related
I'm experimenting with Javascript modules both via desktop (latest Chrome) and mobile (Safari with iOS 14.6) and my code works perfectly on the desktop (standard browser or mobile emulation mode) but fails on my iPhone. The imported JS code using <script type="module"> simply doesn't execute despite being supported since Safari iOS 11 onward according to https://caniuse.com/?search=modules
The test code below, adapted from How to serve ES6 modules on Safari? , is hosted on a webserver in my local network reachable by both the mobile & desktop clients. For mobile debugging I'm using a locally copied version of https://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/ to render console.log commands on mobile.
test_ios.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
console.log("Start of test_ios.html...");
</script>
<title>TESTS IOS</title>
<script src="/static/hnl.mobileConsole.1.3.js"></script>
<script nomodule src="/static/fallback.js"></script>
<script type="module">
console.log("Starting the main script.");
// The following line seems to cause an error in Safari only
import { TestClass } from './static/test_module.js';
// The rest is not executed due to the error
let test_class = new TestClass;
console.log("Done.");
</script>
<script>
console.log("End of test_ios.html...");
</script>
<body>
</body>
</html>
/static/test_module.js
export class TestClass {
constructor() {
console.log("Created a test class in test_module.js");
document.body.append("test_module.js");
}
}
/static/fallback.js
console.log("Fallback.js");
document.body.append("Fallback");
Result on the desktop, as expected
Test string test_module.js gets written onto the web page & the following lines are in the console:
--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...
Starting the main script.
Created a test class in test_module.js
Done.
Result on iOS 14 - neither the module JS nor the fallback get executed
The page is blank (no document.body.append(...) was executed) & only the following lines are in the console:
--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...
Further checks already done:
I sniffed the network and I see that /static/test_module.js is requested by the mobile device (no request for fallback.js).
The content-type of /static/test_module.js returned by the webserver seems coherent (application/javascript; charset=utf-8).
Renaming test_module.js to test_module.mjs doesn't help (same outcome as above)
I found the issue: the following library broke the JS execution in Mobile Safari as soon as a call was done to console.log:
<script src="/static/hnl.mobileConsole.1.3.js"></script>
Removing this library inclusion or/and replacing all calls to console.log by alert made the code above work as expected. The example code also feature minor errors (e.g. no </head> closing) but this wasn't the root issue.
I checked if jshint would have caught it in ES6 mode, unfortunately without success.
Takeaway for next time in case of issues with Mobile Safari: litter your JS code with alert boxes to see when / where it breaks :(
I'm building an app that will have an interactive PDF form on a server (in HTML, CSS, JS). I have been trying to use the Grapecity PDF viewer, but to no avail. I've followed the documentation to a T, using these resources: one, two, three.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>GC Viewer Demo | PDF Plugin</title>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });
viewer.addDefaultPanels();
viewer.open("HelloWorld.pdf");
}
</script>
</head>
<body onload="loadPdfViewer('#root')">
<div id="root"></div>
<script type="text/javascript" src="gcpdfviewer.js"></script>
</body>
</html>
I currently have the "HelloWorld.pdf" and the gcpdfviewer javascripts in the same folder as the above index.html but every time I test the code in the browser, the PDF viewer loads, but the PDF doesn't, giving me an error that states "missing PDF."
This is really bothering me because the PDF is exactly where it's supposed to be, I think.
I'm currently not using a license key, but the documentation makes it seems like I don't need one. Maybe that's the issue.
Any ideas?
Edit - Here are the console errors in Chrome:
The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.
ce # gcpdfviewer.js:1
index.html:1 Access to XMLHttpRequest at 'file:///C:/HelloWorld.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
HelloWorld.pdf:1 Failed to load resource: net::ERR_FAILED
index.html:1 Uncaught (in promise) V
Firstly, the issue is not because of the non-license version.
The issue occurs because you are trying to execute the sample locally using the file system. To overcome this issue, you should host the application on a local server and the Pdf will be loaded in the PdfViewer.
While loading a Pdf in the PdfViewer, there is XMLHttpRequest which checks the origin. This is null in the case of the file system. Hence, throws the error on accessing the file.
Here is the documentation link for configuring the PdfViewer:
https://www.grapecity.com/documents-api-pdf/docs/online/view-pdf.html
Regards,
Manish Gupta
Thank you for using GCPDF Viewer. Is the filename exactly the same, it might be case-sensitive OS?
Can you look in the browser network tab and watch for the request going to retrieve the PDF file, is it looking in the same location where you have placed the file.
which server software are you running? is it serving the PDF file?
http://www.grapecity.com
As stated earlier, for security reasons, it is not possible to access files on your local filesystem via JavaScript, you need to set up a web server and open PDF files using the web server url.
But if you really want to do it, there is another workaround - start Chrome with disabled web security, and then open the index.html page from the local file system, for example:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/temp/CustomChromeSession" --disable-web-security "file:///C:/temp/gcpdfviewer-test/index.html"
Note, this workaround is not recommended due to security reasons and this approach can be disabled by browser developers later.
Here's a screenshot of how it works
I'm using WebStorm (8.0.4) in a Mac (Mavericks last version). I'm trying to debug this simple loop for script:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<10; i++)
{
console.log('hola!');
}
</script>
</body>
</html>
I am using Chrome with JB Extension with this configuration:
Host: 127.0.0.1 Port: 63342
In the settings of the Project, in Javascript, Debugger I have this configuration:
Built-in server port: 63342
The code STOP in the breakpoint (in the loop for), but after one second, I have a message that says:
Disconnected (browser disconnected)
and I lost the debug mode...
I'm very lost and I don't know what happens... any help please?
Regards
I had the same problem. Debugging stopped after 1 second
Two things I changed:
Downloaded the latest version of WebStorm (8.05)
Before the debug opened the configuration and looked at all pages and save it.
After this, it just worked again.
The issue is caused by Chrome update.
Chrome API changes in versions 37+ have made it incompatible with WebStorm debugger. WEB-12418 is fixed in WebStorm 8.0.5 and WebStorm 9 EAP.
I am developping a web app for iOS and Android, using the last version of PhoneGap.
I want to send Notifications to the users on their phone's status bar, and I cannot figure out how to do that.
It seems that there was a Cordova plugin (StatusBarNotification) that once existed, but all the links I find are dead.
If anyone knows a way to send notif to the statusbar, I would be grateful.
Thanks
Quentin
EDIT : I should have been more specific : I am trying to understand how to use the status area on phones (http://developer.android.com/guide/topics/ui/notifiers/notifications.html), and for that I have a simple html file with a button. I want a notification to appear on the status area when I click the button. (like when you receive a text message, you have a notification).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<input type="button" value="Notiiiiiiif" id="btNotif"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
btNotif = document.getElementById('btNotif');
btNotif.addEventListener('click', function(){
//There I want a notif to appear in the status bar
});
</script>
</body>
</html>
I am testing this app on my Nexus 4, with Android 4.4.2.
EDIT : I ended up using Google Cloud Messaging (gcm) for android devices and Apple Push Notification (apn) on my node server. This works pretty well with android devices, a bit harder for iphones
Perhaps its already to late for the answer, but I think this would make sence for your furhter work with notifications in PhoneGap. For using StatusBarNotifications in latest versions of PhoneGap (v3.x), you need to a proper Plugin that will work. This should be installed with Cordova CLI.
For the older versions of PhoneGap (v2.9 and below) you still can use DEPRECATED version of StatusBarNotifications from GitHub.
By the way, using of older version is less headache for not experienced developers :)
Hope this will help you.
I'm having real trouble with PhoneGap in the iPhone with the events. The app is running pretty smooth in my android device, but on my iPhone it doesn't anything. For example, a simple code like this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta charset="utf-8">
<title>WayAcross Mobile Application</title>
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" href="css/screen.css" />
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" charset="utf-8" src="jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile.js"></script>
<script type="text/javascript" charset="UTF-8" src="javascript/mainJavascript.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
// Now safe to use the PhoneGap API
alert('ready');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"></script>
</head>
<body onload="onLoad()">
(this is a code example that doesn't work with iPhone and works with android).
I think its a problem with the events, but I'm not sure. Even the code examples in PhoneGap docs don't work.
My environment is:
Mac OSX 10.7.1
Xcode 4.1
PhoneGap 1.1
jQuery Mobile 1.0RC
The only thing that it shows me is this: http://cl.ly/0h462Y2D2F0J0B1B0q1M
Thanks in Advance.
Regards,
Elkas
By the way, I've installed OSX Lion 10.7.2 and Xcode 4.2 now. Even in the IOS5 its not working. This is driving me crazy!!!
Even with this simple code is not working.
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Ready Example</title>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
alert('Hello World');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"</script>
</head>
<body>
</body>
</html>
try putting the addevent listener under document.ready like this.. worked for me for the same problem.
$(document).ready(function(){
document.addEventListener("deviceready",function(){
},false);
});
Problem Solved!!
I run the application without the phonegap.js and it created me a new one. I just changed the name of it to the the one i was loading and the application finally works.
When creating a Phonegap installation for iOS a specific version of the (ie) phonegap.1.4.1.js is used.
Replacing just this file with a newer version (like cordova.1.8.0.js) resulted in alerts not working.
If you want to upgrade to a newer Phonegap version you will have to "redo" your project.
I reverted back to phonegap.1.4.1.js and the events magically started to work again.
Sort of a wild guess here, not sure how you compile this thing into an app but you list XCode so.... The markup points to script files in folder jquery/ and javascript/. When compiling an app with XCode files are not placed in the actual folders that represent the group folders you normally use. In order for the files to actually end up in a directory inside the app you need to to add the folder on your harddrive as a folder reference (they show up as blue folders, not yellow).
The easiest way to check if this is the problem is to just remove the folder path of the script includes to just be the name of the file.
function testDialog() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert("This is message", function(){}, "HaHa", "Done");
}
}