My adapter works fine but cant able to invoke in client side code. I have created a button and if I click it should display the database table.
Yes I have copied this code from other blog but modified here so need help.
<html>
<head>
<meta charset="UTF-8">
<title>vikdemodb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="header">
<h1>database demo</h1>
</div>
<div id="wrapper">
<input type="button" id="databasecon" value="click me to get data from db" /><br />
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
my main.js
function wlCommonInit(){
$('#databasecon').click(loadSQLRecords);
}
function loadSQLRecords(){
var invocationData = {
adapter : 'vikadap',
procedure : 'getstudinfo',
parameters : []
};
WL.Client.invokeProcedure(invocationData,{
onSuccess : loadSQLQuerySuccess,
onFailure : loadSQLQueryFailure
});
}
function loadSQLQuerySuccess(result){
console.log("Retrieve success" + result);
console.log(result.invocationResult.resultSet);
}
function loadSQLQueryFailure(result){
WL.Logger.error("Retrieve failure");
}
My adapter implementation
var procedure1Statement = WL.Server.createSQLStatement("select * from studentinfo");
function getstudinfo() {
return WL.Server.invokeSQLStatement({
preparedStatement : procedure1Statement,
parameters : []
});
}
here my adap.xml
<wl:adapter name="vikadap"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:wl="http://www.ibm.com/mfp/integration"
xmlns:sql="http://www.ibm.com/mfp/integration/sql">
<displayName>vikadap</displayName>
<description>vikadap</description>
<connectivity>
<connectionPolicy xsi:type="sql:SQLConnectionPolicy">
<!-- Example for using a JNDI data source, replace with actual data source name -->
<!-- <dataSourceJNDIName>java:/data-source-jndi-name</dataSourceJNDIName> -->
<!-- Example for using MySQL connector, do not forget to put the MySQL connector library in the project's lib folder -->
<dataSourceDefinition>
<driverClass>com.mysql.jdbc.Driver</driverClass>
<url>jdbc:mysql://localhost:***/***</url>
<user>****</user>
<password>****</password>
</dataSourceDefinition>
</connectionPolicy>
</connectivity>
<procedure name="getstudinfo"/>
I must say that this is quite sad. You copy the entire "implementation" from elsewhere, but do not copy the one thing that will finish it - displaying the data that is retrieved by the adapter. Then, you ask a question how to do it... I don't know what is your end goal with your project, but I don't think you'll get there if you will continue like this.
One way you could display the result is a function like this:
function displayFeeds(items){
var ul = $('#itemsList');
for (var i = 0; i < items.length; i++) {
var li = $('<li/>').html(items[i].sid);
li.append($('<li/>').html(items[i].sname));
li.append($('<li/>').html(items[i].sgrade));
li.append($('<hr>'));
ul.append(li);
}
}
This function assumes there is a UL in your HTML, and then appends LI's into it with items.
You will need to change this to fit your table design, as well as change sid, sname and sgrade with the correct property names from your database.
Next time you copy, at least copy everything: http://javatechig.com/ibm-worklight/invoking-adapter-procedure-in-ibm-worklight
Related
kindly need ur help.i have copy pasted and modified the below project from idan adar post about inserting data .i already have an table with 2 rows of data and i need to add an additional one into it .although everything looks fine i cant able to insert data into table. no error also is showed in console help please folks,thanks in advance
index.html
<html>
<head>
<meta charset="UTF-8">
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<h1>Please Enter The Student Details</h1>
<form >
student id:<input type="number" id="stdid" ><br><br>
student name<input type="text" id= "stdname" > <br><br>
<input type="submit" value="Register" onclick="insertValuesToDB();">
</form>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
main.js
function wlCommonInit(){
}
function insertValuesToDB(){
var invocationData = {
adapter:"Insertadap",
procedure:"insertvaluesprocedure",
parameters:[$('#stdid').val(),$('#stdname').val()]
};
WL.client.invokeProcedure(invocationData,{
onSuccess :loadFeedsSuccess1,
onFailure :loadFeedsFailure1,
});
}
function loadFeedsSuccess1() {
alert("success");
}
function loadFeedsFailure1() {
alert("failure");
}
adapter.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed Materials - Property of IBM
5725-I43 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
US Government Users Restricted Rights - Use, duplication or
disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->
<wl:adapter name="Insertadap"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:wl="http://www.ibm.com/mfp/integration"
xmlns:sql="http://www.ibm.com/mfp/integration/sql">
<displayName>Insertadap</displayName>
<description>Insertadap</description>
<connectivity>
<connectionPolicy xsi:type="sql:SQLConnectionPolicy">
<!-- Example for using a JNDI data source, replace with actual data source name -->
<!-- <dataSourceJNDIName>java:/data-source-jndi-name</dataSourceJNDIName> -->
<!-- Example for using MySQL connector, do not forget to put the MySQL connector library in the project's lib folder -->
<dataSourceDefinition>
<driverClass>com.mysql.jdbc.Driver</driverClass>
<url>jdbc:mysql://localhost:****/hello</url>
<user>****</user>
<password>***</password>
</dataSourceDefinition>
</connectionPolicy>
</connectivity>
<!-- Replace this with appropriate procedures -->
<procedure name="insertvaluesprocedure"/>
<procedure name="procedure2"/>
</wl:adapter>
ADAP imp.js
var users = WL.Server.createSQLStatement("INSERT INTO studentdb(stdid,stdname) VALUES(?,?)");
function insertvaluesprocedure(stdid,stdname) {
return WL.Server.invokeSQLStatement({
preparedStatement : users,
parameters : [stdid,stdname]
});
}
When previewing the application in Chrome and Chrome DevTools are open and you use the app - what is the error that you see in the Chrome DevTools console?
Additionally, the error may just be that you declared in the adapter XML a procedure "procedure2", but in your client code you are calling "procedure1".
Change "procedure1" to "procedure2".
Edit: based on the comments it appears to be a type mistmatch.
Assuming the stdid is supposed to correspond to the int field in the database, this will obviously be a problem because in JavaScript by default it is treated as a string.
So you have two options:
In your database, change int to varchar
In your JavaScript, do something like var stdid = stdid * 1;, which should then change it to number, and then it will likely be accepted by the database.
I am in process of learning so kindly help me to do how the retrieval of table from mysql in ibm mobile first by just clicking an button from my html page. I have tried but not working help please
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>vikdemodb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="header">
<h1>database Demo</h1>
</div>
<div id="wrapper">
<input type="button" id="databasecon" value="click me to get data from db" /><br />
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
My main.js
function wlCommonInit(){
$('#databasecon').click(loadSQLRecords);
}
function loadSQLRecords(){
var invocationData = {
adapter : 'vikadap',
procedure : 'getstudinfo',
parameters : []
};
WL.Client.invokeProcedure(invocationData,{
onSuccess : loadSQLQuerySuccess,
onFailure : loadSQLQueryFailure
});
}
function loadSQLQuerySuccess(result){
window.alert("success");
console.log("Retrieve success" + result);
console.log(result.invocationResult.resultSet);
}
function loadSQLQueryFailure(result){
WL.Logger.error("Retrieve failure");
}
You have a button in your HTML:
<input type="button" id="databasecon" value="click me to get data from db" />
You handle this button in wlCommonInit():
$('#databasecon').click(loadSQLRecords);
In loadSQLRecords() you call an adapter procedure to retrieve data from the database. If this operation succeeds then it calls the loadSQLQuerySuccess callback function.
It is this function that you are supposed to handle the display of the response from the backend (your database). But what are you doing? You only print to the console the response. You do not handle at all, displaying it in the application - in the HTML.
So in your HTML, you need to prepare a place holder that you will append the result into. For example: <table id="mytable"></table>
Then you need to populate the table with the data...
So in loadSQLQuerySuccess, you could for example do the following... this is where you need to learn HTML and JavaScript to accomplish what YOU want it to look like:
function loadFeedsSuccess(result) {
if (result.invocationResult.resultSet.length > 0)
displayFeeds(result.invocationResult.resultSet);
else
loadFeedsFailure();
}
function loadFeedsFailure() {
alert ("failure");
}
function displayFeeds(result) {
for (var i = 0; i < result.length; i++) {
$("#mytable").append("<tr><td>" + result[i].firstName + "</td></tr>");
$("#mytable").append("<tr><td>" + result[i].lastName + "</td></tr>");
}
}
Note that you need to create your own code in the for loop to make it look like how you want it to look, and of course append your own properties from the database, instead of "firstName" and "lastName".
The Control is going to failure function when I'm trying to invoke Http Adapter.Here My adapter is running fine and I'm getting data also.
Here is My html code
<html>
<head>
<meta charset="UTF-8">
<title>IIB_WL_App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/IIB_WL_App.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<form name="f1">
Enter Employee ID :<input type="text" id="EmpId">
<br>
<input type="submit" value="GetDetails" onclick="GetDetails()">
</form>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/IIB_WL_App.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Here is My .js code For getting details
function GetDetails(){
//alert("Function Called");
var id=f1.EmpId.value;
//var id=document.getElementById("EmpId").value();
alert(id);
var invocationData = {
adapter : 'IIB_WL_Adapter',
procedure : 'getData',
parameters : [id]
};
var options={
onSuccess : getDataSuccess,
onFailure : getDataFailure,
};
WL.Client.invokeProcedure(invocationData,options);
};
function getDataSuccess(result) {
//WL.Logger.debug("Retrieve success" + JSON.stringify(result));
alert("Success");
var httpStatusCode = result.status;
alert(httpStatusCode);
}
function getDataFailure(result) {
//WL.Logger.debug("Retrieve success" + JSON.stringify(result));
alert("Failure");
var httpStatusCode = result.status;
alert(httpStatusCode);
}
And I want to display that data in a list view
Here is MY adapter.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- Licensed Materials - Property of IBM 5725-G92 (C) Copyright IBM Corp.
2011, 2013. All Rights Reserved. US Government Users Restricted Rights -
Use, duplication or disclosure restricted by GSA ADP Schedule Contract with
IBM Corp. -->
<wl:adapter name="IIB_WL_Adapter" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:wl="http://www.worklight.com/integration" xmlns:http="http://www.worklight.com/integration/http">
<displayName>IIB_WL_Adapter</displayName>
<description>IIB_WL_Adapter</description>
<connectivity>
<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
<protocol>http</protocol>
<domain>172.17.14.228</domain>
<port>7080</port>
<!-- Following properties used by adapter's key manager for choosing specific
certificate from key store <sslCertificateAlias> </sslCertificateAlias> <sslCertificatePassword></sslCertificatePassword> -->
</connectionPolicy>
<loadConstraints maxConcurrentConnectionsPerNode="2" />
</connectivity>
<procedure name="getData" />
Here is My adpater-impl.js
function getData(interest) {
//path = getPath(interest);
var input = {
method : 'get',
path : '/DBRetrive',
returnedContentType : 'xml',
parameters : {'id' : interest}
};
return WL.Server.invokeHttp(input);
}
I got the solution for this problem. The problem is in my Html page i.e instead of using this.
<input type="submit" value="GetDetails" onclick="GetDetails()">
use the following tag with button type then its working.
<input type="button" value="GetDetails" onclick="return GetDetails()">
And for displaying the data I added some code in .js file
function GetDetails(){
var id=f1.EmpId.value;
alert(id);
var invocationData = {
adapter : 'IIB_WL_Adapter',
procedure : 'getData',
parameters : [id]
};
var options={
onSuccess : getDataSuccess,
onFailure : getDataFailure,
};
WL.Client.invokeProcedure(invocationData,options);
};
function getDataSuccess(result) {
display(result.invocationResult.Employee.Data);
}
function getDataFailure(result) {
alert(JSON.stringify(result));
alert(result.errorMsg);
var httpStatusCode = result.status;
}
function display(items){
var ul=$("#itemList");
ul=$("#itemList").html(" ");
var li=$('<li/>').html("Id:"+items.ID);
li.append($('<li/>').html("Name:"+items.NAME));
li.append($('<li/>').html("Age:"+items.AGE));
ul.append(li);
}
I've ran your code.
The code itself appears to be sound.
It's failing though, so I don't understand what do you mean by "The Control is going to failure function when I'm trying to invoke Http Adapter.Here My adapter is running fine and I'm getting data also."
You say you tested it in the browser and it is failing with "The Service Currently not available". It is also failing the same for me in the browser, and also the same when invoking the adapter from the Studio - same error message.
So again, where exactly is it working for you?
As I see it, the problem is in your adapter configuration, the location you're pointing to does not exist or is the wrong location to point to: http://172.17.14.228:7080/DBretrieve
I have an sql table named clients where each client is stored in a row, with a unique (auto increment) id and the column names are: clientname, clientlastname, clientmobile and so on.
I want to make an array that will retrieve the contents of a specific client (row) and will be like : clientname => lalala, clientlasthname=>lalalala... and so on.
Then I want to display the results in an html form (non submitable, just display)
each cell in the form has a unique id and name same as the column names of the sql db.
I just new at it and cant seem to get it.
Here's what I've done so far:
<?php
header("Content-Type:text/html; charset=utf-8");
if ($_POST) {
$link = mysql_connect("localhost","userid","pw");
if (!$link) { die("Database Connection Failed". mysql_error()); }
mysql_set_charset('utf8',$link);
$db_select = mysql_select_db("form2",$link);
if(!$db_select){ die("Database Selection Failed " . mysql_error()); }
} else { echo "Search:"; }
?>
<html>
<head> </head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/dsearch.css" />
<link rel="stylesheet" href="css/base.css" />
<link type="text/css" href="css/selected/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/dropdowndata.sql/dropdowndata.clients.js"></script>
<script language="javascript" type="text/javascript" src="js/buttons.js"></script>
<body>
<form class="form" id="dsearch" name="dsearch" action="dsearch.php" method="POST" enctype="application/x-www-form-urlencoded">
<div class="dsearch">
<li class="ui-widget"><label for="clients">client id: </label><input class="client" name="searchcid" style="width:100px" /></li>
<li class="cell3"><input type="submit" value="Αναζήτηση" style="color:green; width:210px; " /></li>
</div>
</form>
<div class="results">
<?php
$result1 = mysql_query("SELECT * FROM clients WHERE id='$_POST[searchcid]'", $link);
if(!$db_select) { die("No Data found in db " . mysql_error()); };
$items=array();
while($row = mysql_fetch_array($result1)){
$items[$row['id']] = $row['dlastname'];
/* here is where I need the help I guess,
I need to fill the $items array with the data formatted as mentioned above.
And after that I want to populate a form that I haven't already written with the
values ,any help or maybe any suggestions on some tutorials I could go study
would be appreciated.
It goes on like this: */
}
print_r ($items);
?>
</div>
</body>
</html>
<?php
if ($_POST) {
mysql_close($link);
}
?>
Edit: figured out how to get the array
$clinfo=array();
$clinfo=mysql_fetch_assoc($result1);
print_r ($clinfo);
Now I need a way to go put the data where the field id equals the id of the docinfo array
figured out how to do it with a little php and jquery,
here it is:
$(document).ready(function(){
<?php
if($_GET){
foreach($docinfo as $key=>$val) {
echo "$('#" . $key . "').val('" . htmlspecialchars($val) ."');";
}
}
?>
});
This creates a jquery line for each cell id and fills it with the appropriate value
Any comments or improvements are extremely appreciated
I want to use an observable object within a ListView in the Windows 8 RT (Developer Preview from BUILD 2011) (using JavaScript).
The code below seems like it should work. It has a simple template for displaying a title and a description of each object in the HTML and a basic use of the WinJS.UI.Listview component.
I expect to see a list of objects, but always see the "wait spinner" when the list contains observables.
Experimentally, I've noticed that if the code doesn't convert the entire list (all but 3) to observables, then the list will show up. From doing some debugging, it would appear that it's somehow timing related and that the WinJS framework miscounts and fails to render the ListView entirely (as some of the objects are "pending") for some reason (the miscount confusion happens deep in a call to realizeItems in the ScrollView code). If I comment out the enableFirstChanceException function call, it fails while comparing two objects (but I don't know if it's relevant) in the function itemChanged (circular reference in value argument not supported).
Any idea on how to make this work with observable objects?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024, height=768" />
<title>WinWebApp1</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript" src="/WinJS/js/base.js"></script>
<script type="text/javascript" src="/WinJS/js/ui.js"></script>
<script type="text/javascript" src="/WinJS/js/binding.js"></script>
<script type="text/javascript" src="/WinJS/js/controls.js"></script>
<script type="text/javascript" src="/WinJS/js/res.js"></script>
<script type="text/javascript" src="/WinJS/js/animations.js"></script>
<script type="text/javascript" src="/WinJS/js/uicollections.js"></script>
<script type="text/javascript" src="/WinJS/js/wwaapp.js"></script>
<!-- WinWebApp1 references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="itemTemplate" data-win-control="WinJS.Binding.Template" >
<div class="itemContainer">
<!-- Displays the "title" field. -->
<div class="itemTitle" data-win-bind="innerText: title">
</div>
<!-- Displays the "description" field. -->
<div class="itemDescription" data-win-bind="innerText: description">
</div>
</div>
</div>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixed-layout">
<div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemRenderer: itemTemplate}">
</div>
</div>
</div>
</body>
</html>
And the JavaScript:
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
//Debug.enableFirstChanceException(true);
var myData = [
{ title: "Banana", description: "Banana Frozen Yogurt"},
{ title: "Orange", description: "Orange Sherbet"},
{ title: "Vanilla", description: "Vanilla Ice Cream"},
{ title: "Mint", description: "Mint Gelato"},
{ title: "Strawberry", description: "Strawberry Sorbet"},
{ title: "Kiwi", description: "Kiwi Sorbet" }
];
// this works:
//var myDataSource = new WinJS.UI.ArrayDataSource(myData);
// this does not:
for (var i = 0; i < myData.length ; i++) {
myData[i] = WinJS.Binding.as(myData[i]);
}
var myDataSource = new WinJS.UI.ArrayDataSource(myData);
document.addEventListener("DOMContentLoaded", function (e) {
WinJS.UI.processAll()
.then(function () {
var basicListView = WinJS.UI.getControl(document.getElementById("basicListView"));
basicListView.dataSource = myDataSource;
// when the observable works correctly, this should work (and live change the list)
//setTimeout(function () {
// basicListView.refresh();
// myData[0].title = "Yellow Banana";
// myData[5].title = "Kiwisicle";
//}, 3000);
});
});
WinJS.Application.start();
})();