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.
Related
I am trying to embed tableau object into razor page in blazor application but its not working it shows blank page and it will not log any error in browser console.
Below is the razor page.
Tableau.razor
#page "/tableau"
<h3>Tableau Example</h3>
<body>
<div class='tableauPlaceholder' style='width: 1700px; height: 950px;'>
<object class='tableauViz' width='1700' height='950' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Ftableau.xxxxxx.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='/t/ITRD' />
<param name='name' value='AgileDEStrainingStatus/Agilemind-setTrainings' />
<param name='tabs' value='yes' /><param name='toolbar' value='yes' />
<param name='showAppBanner' value='false' />
<param name='filter' value='iframeSizedToWindow=true' /></object></div>
</body>
#code {
}
_host.cshtml
#page "/"
#namespace BlazorApplication.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApplication</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script type='text/javascript' src='https://tableau.xxxxxx.com/javascripts/api/viz_v1.js'></script>
</body>
</html>
What I am doing wrong?
Thanks
I can't replicate your exact sample as the URL for your data is obviously private, but I created a Tableau sample at https://github.com/conficient/TableauSample which uses the basic example from the Tableau website
I used Server-side Blazor as per your example and was able to load the sample. What I think you're missing in your code is that there is no initiation of the Tableau library? In the Tableau sample they invoke the setup function:
<body onload="initViz();">
You can't do this in Blazor since embedded JS isn't permitted but you can use JavaScript interop
I created a basic interop file to do this:
window.initViz = function (containerDiv, url) {
// containerDiv: element to update - use #ref in Blazor to get this
console.log("initViz called for " + url);
var options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
console.log("initViz calling .Viz()");
var viz = new tableau.Viz(containerDiv, url, options);
}
I also changed the sample by passing an ElementReference rather than an id - if you're going to build a component in future this is good practice since you don't need to name the elements and can have multiple instances on a page.
I then amended the Index.razor page to invoke the initViz function in OnAfterRenderAsync.
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".
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
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 created a dojo based Worklight project and a hybrid application it.
I did a drag and drop of a dojo mobile button which gets added inside a dojo mobile view. All of this works fine and renders fine in the various environments (common, android etc.). It also correctly shows the look and feel in Rich Page Editor.
But then i added a script that has a very simple dojo.ready call. Now when i run this application i get a console error saying ReferenceError: dojo is not defined. Any idea why that is happening?
I know that i have correctly setup the dojo as other pieces seem to work. I have also checked that the dojo.js is loading (which is obvious as the other pieces are working). I am using IBM Worklight 6.0 developer edition with all capabilities installed.
Here is my sample code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jmdwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/jmdwl.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<script>
dojo.ready(function() {
alert("Here");
});
</script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<!--application UI goes here-->
<button data-dojo-type="dojox.mobile.Button">Label</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/jmdwl.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Thanks,
Gaurav
If you want to use dojo.ready you must initialize it first.
<script>
require(["dojo/ready"], function(ready){
ready(function() {
alert("Here");
});
});
Here's the reference : http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
Update 1
Which Version of dojo do you use by now? 1.6 or 1.7+ ?
The new AMD requires to initialize the modules like i write before.
Have you read this threads? There seem to be an failure while importing the dojo Libarys. I guess this could have something to do with your error.
worklight fail to require DOJO Combobx on real device -fail to load ... /dijit/form/nls/it/ComboBox.js
and
Worklight core-web-layer.js errors
Regards, Miriam