Best regards,
I have tried several websocket plugins, but none worked for me.
I can't know what's wrong because when I try the code in a browser, it works successfully but after building the apk, nothing happens.
I have checked the configuration of config.xml, permissions and plugins.
me guess that Jelly beans inbrowser doesn't support websocket (we already know that) but even within the plugins? just a guess.
I am using jwebsocket as a websocket server.
cordova version 3.5.0
please tell me what is the wrong in my code
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
var ws = new WebSocket('ws://192.168.1.6:8787/');
ws.onmessage = function () {
alert('a message was recieved');
};
ws.onopen = function () {
ws.send('I just connected!');
};
}
</script>
<script type="text/javascript" src="websocket.js"></script>
</head>
<body onload="onLoad()">
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Related
I'm very new to javascript and I started to make some practice with Phonegap.
I'm trying to call a plugin function within html but if I call it within a button it works fine:
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
while if I try to call it directly I get: "autoStart is not defined" in the console.
<script type="text/javascript">
cordova.plugins.autoStart.enable();
</script>
How can I call it into html without the button?
Update1:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
<div class="perspective">
<img id="box1"/>
<img id="box2"/>
</div>
<p id="date"></p>
<p id="time"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
jQuery(document).ready(function () {
//THE ERROR IS HERE
cordova.plugins.autoStart.enable();
});
</script>
</body>
</html>
When you created your cordova project, whether you did so via Command Line Interface or Phonegap Desktop, an app.js file should have been created as well.
Plugins can only be used after the device is ready, so you should put your code inside of the onDeviceReady() function inside of app.js.
I am making a checklist app with Phonegap but it debugs in a browser too as they both use web technologies. Anyway, I am having a problem with using the HTML 5 local storage. Perhaps my code is broken, or I am using it wrong. When ever I refresh the page or exit out/come back the data is gone.
Appreciate any help :^)
I tested it on my live domain as well as locally but both do not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script>
$(function() {
var arr = [];
var i;
$("button").click(function() {
arr.push($(":text").val());
$(":text").val("");
localStorage.setItem("item" + arr.length, arr[arr.length - 1]);
$("#x").append(localStorage.getItem("item" + arr.length) + "<br>");
})
})
</script>
</head>
<body>
<div class="app">
<h1>Alex</h1>
<input type="text" id="item" placeholder="Enter an item">
<button id="add">Add Item</button>
<br>
<div id="x"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
As was said - the data is persisted and saved correctly.
However the logic is incorrect and overrides all the elements in the localStorage (first element overrides the first, second overrides the first two, third overrides the first three, etc.). Perhaps this is what masks the issue? :)
To be frank, I don't the the logic of running in loop and overriding all existing with the last item (and writing it to the list on the screen each time)...
I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something.
function goToCards() {
console.log('got to goToCards');
$(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BibHub Mobile</title>
</head>
<body>
<div class="app" data-role="page" id="loginPage">
<div data-role="header">
<h1>Biphub</h1>
</div>
<div data-role="content">
go to cards
</div>
</div>
<div class="app" data-role="page" id="cardsPage">
<div data-role="header">
<h1>Biphub</h1>
<h2>Your UID is <span id="uidSpan"></span></h2>
</div>
<div data-role="content">
<p>Your card stack is currently empty. Way to go!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?
The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?
If not, you need to use $.mobile.changePage : API DOC
I'm just trying to get the hang of using Ajax with FTP so it'll load my changes in real-time. However, not matter how I change the code it just won't do what i want it to and to my knowledge the code itself seems fine...All it's suppose to do is alert the contents of my test.html file ("this is some content") when I load it into the ftp.
Learning JQuery
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="CSS/jquery.css">
</head>
<body>
<h1>Asyncronous Javascript And XML </h1>
<script type="text/javascript" src="JS/index.js"></script>
</body>
</html>
Ajax:
$.get("test.html", function(data) {
alert(data);
});
Hi I'm trying to run a javascript function (an alert to test) but it is not firing when in a page other than the index.html.
here is an example of a page that is not firing the javascript alert ( note that < is removed from all of the tags so as to render in stack overflow):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("test");
navigator.notification.alert("PhoneGap is working");
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<link rel="stylesheet" href="n_style.css" />
</head>
<body onload="onBodyLoad()">
</body>
</html>
onDeviceReady only fires once when the app starts up. See documentation:
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#deviceready
It's the function that indicates PhoneGap is fully loaded.
Your Javascript isn't running because you don't have an onBodyLoad function. I would wrap document.addEventListener("deviceready", onDeviceReady, false); in an onBodyLoad function. Also, if you are having javascript errors, try opening the page in firefox and using firebug to check for errors.