this is my js function...
var invocationData={
adapter : 'Health_Care',
procedure: 'update',
parameters:[uname,cp,np]
};
WL.Client.invokeProcedure(invocationData,
{
onSuccess: function(){
alert("Password successfully changed");
},
onFailure: function(){
alert("failed");
}
}
);
my adapter is...
var updateStatement = WL.Server.createSQLStatement("UPDATE EMPLOYEE SET PASSWORD=? WHERE UID=? AND PASSWORD=?");
function update(pid,curP,newP) {
return WL.Server.invokeSQLStatement({
preparedStatement : updateStatement,
parameters : [newP,pid,curP]
});
}
my adapter is alone working when i invoke adapter... but with java script i'm getting the above mentioned error for all the pages....
Seems like you're trying to use Worklight features in other HTML pages without having all the required script tags (worklight.js, wlclient.js, etc.). Worklight is geared towards single page applications, if you want multiple HTML files make sure all the right JavaScript is getting loaded (look at the native folder, www/default/[appname].html in the head tag).
Here's an example: native/www/default/wlapp.html
<!-- Static App properties + WL namespace definition -->
<script src="wlclient/js/cordova.js"></script>
<script src="common/js/wljq.js"></script>
<script src="common/js/base.js"></script>
<script src="wlclient/js/messages.js"></script>
<script src="common/js/wlcommon.js"></script>
<script src="wlclient/js/diagnosticDialog.js"></script>
<script src="wlclient/js/deviceAuthentication.js"></script>
<script src="wlclient/js/window.js"></script>
<script src="wlclient/js/worklight.js"></script>
<script src="wlclient/js/wlclient.js"></script>
<!-- More script tags... -->
The JavaScript file that defines WL.Client.invokeProcedure is wlclient/js/wlclient.js.
Related
I am experiencing some very odd problems with Polymer.dart when compiled to javascript. It works fine in Dartium. This app did work a couple of months ago. However Polymer has undergone lots of changes since then, so I have had to make loads of changes just to get it to compile. I have tried this in polymer 3.2 through to the latest build in pub, all behave the same. I am running an up to date Dart install on the stable branch.
I get the following Javascript error:
TypeError: $document.register is not a function
On the last line of the js below. The tag variable is "polymer-element".
})(H.convertDartClosureToJS(W._callAttributeChanged$closure(), 4)))};
proto = Object.create(baseConstructor.prototype, properties);
t2 = H.makeLeafDispatchRecord(interceptor);
Object.defineProperty(proto, init.dispatchPropertyName, {value: t2, enumerable: false, writable: true, configurable: true});
options = {prototype: proto};
if (!t1)
options.extends = extendsTagName;
$document.register(tag, options);
From what I can see the polyfills aren't loading so the document.register method hasn't been declared.
Below is from my HTML File
<head>
<script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</head>
My index.dart looks like
void main() {
window.alert("Dart Lives!");
initPolymer().run(() => initPresentation());
}
void initPresentation() {
//Show the first screen
}
When running under Javascript I get the alert box showing followed by the Javascript error. So I don't think there is anything wrong with the basic dart environment.
EDIT
This has changed.
An up-to-date answer is here
Polymer querySelector working on DartVM but not in Chrome after compile
OLD
Hard to tell.
I think index.dart should look like
<head>
<script type='application/dart'>
export 'index.dart';
</script>
</head>
or
<body>
...
<script type='application/dart' src='index.dart'></script>
</body>
see https://code.google.com/p/dart/issues/detail?id=17546#c16
until now I was not using this index.js that Phonegap recommends :
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
Where should I put my own js functions and events (all my js file), into this, out of this, in another file ?
Where should I call those js files and where should I call the app.initialize, in relation to the position of the calls to the js files ?
Here's my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/boardDims.js"></script>
<script src="js/functions.js"></script>
<!-- <script src="cordova.js"></script>-->
</head>
<body>
For now I am compiling using the remote service : $ phonegap remote run android
It would be really useful to have a default template of an app using Phonegap + JQM, for beginners like me ;-)
That index.js is included as an example, you don't really need to use it. It is basically showing you how to work with ondeviceready. You need to use ondeviceready when you work with plugins, since most of their calls will only be available after ondeviceready has been fired. So you hook up your calls to plugins on a listener to ondeviceready. I am doing it like this for instance:
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", MYAPP.events.onDeviceReady, false);
}
</script>
</head>
<body onload="onLoad();">
And inside MYAPP.events.onDeviceReady I do the calls to geolocation, camera, or whatever plugin I'm working with.
BTW, two important things to notice in you example: You need to include cordova.js before you can access ondeviceready or work with any plugin, plus you are including index.js twice. Perhaps you duplicated the <script src="js/index.js"></script> to edit it and include js/cordova.js and forgot to change the name/path?
Apart from that, what I do is separating the app's JS and the external libs in two separate directories for better organisation, like "lib" and "js", so you would include "js/functions.js" and "lib/jquery.js".
I include both the libs and custom JS files at the bottom of the body tag for a slight better performance: Where should I put <script> tags in HTML markup?
And I name the files under "js" (custom JS files for the app) according to their purpose/content, like: events.js, models.js, settings.js, util.js, ... You can see in the snippet above that I have "namespaced" my custom JS objects under the capitalised name of the app, so everything in util.js will be called like: MYAPP.util.formatDate().
I'm trying to get jQuery plug-in meioMask to work in a MVC Partial View.
As a trial, the following works:
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
$('#StartTimeText').setMask('time');
});
</script>
</head>
<body>
<input type="text" id="StartTimeText" />
</body>
The text edit box gets a mask edit applied. However, my text edit box is in a MVC partial view that gets shown when user clicks on an item in the main view. In the main view's <head> I added the following:
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.meio.mask.min.js")" type="text/javascript"></script>
In CustomFormPartialView.cshtml, I have the following:
<script type="text/javascript">
jQuery.ajax(
function ($) {
$('#StartTimeText').setMask('time');
}
);
</script>
<input type="text" id="StartTimeText" />
But the text box remains a regular text box with no edit mask applied. I assume this is because the setMask function isn't getting run. I've tried using jQuery.get and jQuery.post as well, none of them made any difference.
Sorry if this has already been asked, I've tried other solutions without any luck. I'm a bit new in this area, so if someone can post as complete code example as possible it'll be greatly appreciated. Thanks.
EDIT:
Following JasCav's suggestion, I've put the following in the <head> section of the file. As far as I can tell, the ajax function isn't getting run at all. This is using DevExpress's MVC Scheduler if that's any help. I'm not getting any errors in FireBug.
<script type="text/javascript">
jQuery.ajax({
url: '/WebTMS_MVC/Calendar/SchedulerPartial',
type: 'POST',
success: function (data, textStatus, xhr) {
$('#StartTimeText').setMask('time');
}
});
</script>
You can use jQuery's ajax function provides a number of callbacks that you can use to perform specific actions after completion of the ajax call (success and complete are two). See more at jQuery's documentation for the ajax function.
$.ajax({
url: yourUrl,
type: "GET",
data: formData,
success: function(data) {
// Do your stuff here.
});
Following this guide, I did a little variation and I keep receiving this error:
self.port is undefined
at base.js[my content code]
here my add-on code:
PageMod({
include: [data.url('base.html')],
contentScriptWhen: 'start',
contentScriptFile: [data.url('jquery-1.7.2.min.js'),data.url('jquery-ui-1.8.21.custom.min.js'),data.url('base.js')],
contentStyleFile: [data.url('css/mint-choc/jquery-ui-1.8.21.custom.css'),data.url('css/base.css')],
onAttach: function(worker) {
worker.port.on("request", function(txt) {
console.log(txt);
worker.port.emit("response","response for "+txt);
});
}
});
and my content code:
// initialized by jQuery
$(function() {
self.port.on("response",function(txt){console.log("response "+txt);}) //this line is where the error point to.
$('#tabs').tabs();
testLoadLinks();
});
function testReceiveRequest(request) {
console.log('received:',request);
self.port.emit("request",request);
}
I'm using the browser editor with the SDK version 1.8, can someone please help me fix this?
After some testing and debugging, I found out my two mistakes and i'm sorry i didn't put the whole code because I thought it wasn't related:
I had this in base.html
<link type="text/css" href="css/mint-choc/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<link type="text/css" href="css/base.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
and this on main.js
PageMod({
include: [data.url("base.html")],
contentScriptWhen: 'start',
contentScriptFile: [data.url('jquery-1.7.2.min.js'),data.url('jquery-ui-1.8.21.custom.min.js'),data.url('base.js')],
contentStyleFile: [data.url('css/mint-choc/jquery-ui-1.8.21.custom.css'),data.url('css/base.css')],
onAttach: function(worker) {
console.log("attaching...")
worker.port.on("request", function(txt) {
console.log(txt);
worker.port.emit("response","response for "+txt);
});
}
});
My scripts are on the /data/js/ folder, they couldn't be found thus not loading the pageMod part of script in the main.js, but they were being loaded by the content script itself inside the DOM, where self.port is undefined. I just removed the script and styles tags from the base.html because they are already in the pageMod, and fixed the path in the data.url('js/base.js') and the others. Now i learned the scripts in the add-on scope can access the DOM scope and change it, but scripts inside the DOM cannot (they can?) communicate with the add-on scope. If you want scripts to interact with the add-on, you should left them in the add-on scope. I hope to help someone who commits the same mistake.
Thanks canuckistani.
I'm using jquery mobile and phonegap to create an android application. I followed the short guide "20 Recipes for Programming Phonegap" which recommends using a callback from a custom script loaded on index.html to a function named onPageLoad() where Page is the name of the destination page's html file.
I'm stuck however, because the javascript, which I included inside the data-role="page" div with a script tag, is not loading.
https://stackoverflow.com/a/8838639/153382 points to the jQuery mobile guide that says this should work. I've read the guide, it's not working. Now what?
Has something changed with jquery mobile that makes this no longer work?
Update
Some testing shows that inline scripts run, but the script src attribute is not being evaluated for the script I am trying to load from a file.
also tried <script type="text/javascript">$.getScript("js/lookup.js");</script>. It did not work either.
code
common.js included on index.html after <div data-role="page">...</div>:
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
relevant contents of common.js:
function executeCallback() {
if (isPhoneGapReady) {
// get name of current html page
var pages = currentUrl.split("/");
var currentPage = pages[pages.length - 1].
slice(0, pages[pages.length - 1].indexOf(".html"));
// captalize the first letter and execute the function
currentPage = currentPage.charAt(0).toUpperCase() +
currentPage.slice(1);
if (typeof window['on' + currentPage + 'Load'] ==
typeof(Function)) {
window['on' + currentPage + 'Load']();
}
alert('on' + currentPage + 'Load: ' + typeof window['on' + currentPage + 'Load']);
// says onLookupLoad: undefined
}
}
$(document).bind("pageload", function(event, data) {
init(data.url);
});
window.onload = init;
init(url) calls onDeviceReady() which calls executeCallback()
lookup.html includes the following line inside <div data-role="page">:
<script type="text/javascript" charset="utf-8" src="js/lookup.js"></script>
Seems as if the issue was that Eclipse was not generating a new apk. I guess this is because the assets directory changed, but the src directory had not. If I delete the apk in the bin folder and run the emulator my code works as designed.