I want to connect my IBM MobileFirst apps to my database,
I use wampserver (localhost),
username = "root", password ="...", database name = "mydatabase".
In my MobileFirst project, I created a SQL adapter "myAdapter".
Inside the myAdapter.xml, this is the code:
<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:3306/mydatabase</url>
<user>root</user>
<password></password>
</dataSourceDefinition>
</connectionPolicy>
</connectivity>
<!-- Replace this with appropriate procedures -->
<procedure name="insertMyTable1"/>
Below is myAdapter-impl.js file
var insertMyTable = WL.Server.createSQLStatement(
"IESERT INTO mytable" +
"VALUES (? , ? , ?);");
function insertMyTable1(id, name, age){
return WL.Server.invokeSQLStatement({
preparedStatement : insertMyTable,
parameters : [id, name, age]
});
}
//--------------------------------------
in one of my pages, I have a addData.html file, below is the code:
<html>
<script>
function insertData(){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var age = parseInt(document.getElementById("age").value);
WL.Client.invokeProcedure({
adapter : "myAdapter",
procedure : "insertMyTable1",
parameters : [ id, name, age ]
});
}
</script>
<body>
<form action="javascript:insertData();">
<table align="center">
<tr>
<td>Id : </td>
<td><input type="text" id="id"></td>
</tr>
<tr>
<td>Name : </td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age : </td>
<td><input type="text" id="age"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" style="width:100px;">Add</button>
</td>
</tr>
</table>
</form>
</body>
</html>
But I fail to insert the data into mydatabase->mytable, anyone know why ??
error log (in my addData.html)
Uncaught ReferenceError: WL is not defined
This question is completely unrelated to your SQL adapter.
The problem here is that you have used a href to navigate to another HTML file. By doing so you have exited the scope, or context, of the MFP framework, which is why you are unable to use MFP API methods such as WL.Client.invokeProcedure.
A MFP Hybrid application is a Single Page Application. In the app's index.html there are references to the MFP JavaScript framework in order to load it... Without these, things will break.
In order to use multiple "pages" in your application, see the following tutorial:
Building a multi-page application
You must never actually navigate away from the context of the framework, so operations such as a href are not allowed.
If you want to separate your "pages" to separate HTML files, you can see this example project using jQuery Mobile. Other UI frameworks such as Dojo also provide their own implementation for multi-page support which you could use in your MFP application.
Related questions: https://stackoverflow.com/search?q=%5Bworklight%5D+multipage+is%3Aquestion
Related
I would like to insert this script to nuxtJS project and I want it to load dynamically by page.
<!-- LINE Tag Base Code -->
<!-- Do Not Modify -->
<script>
(function(g,d,o){
g._ltq=g._ltq||[];g._lt=g._lt||function(){g._ltq.push(arguments)};
var h=location.protocol==='https:'?'https://d.line-scdn.net':'http://d.line-cdn.net';
var s=d.createElement('script');s.async=1;
s.src=o||h+'/n/line_tag/public/release/v1/lt.js';
var t=d.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);
})(window, document);
_lt('init', {
customerType: 'account',
tagId: 'xxxxx'
});
_lt('send', 'pv', ['xxxxx']);
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://tr.line.me/tag.gif?c_t=lap&t_id=xxxxx&e=pv&noscript=1" />
</noscript>
<!-- End LINE Tag Base Code -->
The important thing is tagId: 'xxxxx' this should be change dynamically by page. for example,
wwww.sample.com/shop1 will load tagId: 'shop_tag1'
wwww.sample.com/shop2 will load tagId: 'shop_tag2'
What kind of tracker is this ? If it does not have any way of setting it app-wise, I guess that you need to have a middleware that is running your function and grabbing the dynamic part from each page.
This can be helpful: https://nuxtjs.org/docs/2.x/directory-structure/middleware/
Also, I did found some issues on using a middleware in a layout, but maybe it's just me, if it does work on your side, you could just dump your js there too.
I have a RESTful API web service. I'm programming a simple pure Javascript client app to interact with the APIs. I also use Knockout framework. My Javscript code:
self.movies = ko.observableArray();
$.get(self.moviessURI, function(data){
var obj = JSON.parse(data);
for (var i=0; i < obj.movies.length; i++) {
self.movies.push(obj.movies[i]);
}
}, "json");
My HTML code:
<table class="table table-striped">
<tr><td><b>Title</b></td><td><b>VideoID</b></td></tr>
<!-- ko foreach: movies -->
<tr>
<td><p><b data-bind="text: title"></b></p></td><td><p data-bind="text: videoId"></p></td>
</tr>
<!-- /ko -->
</table>
After running, I have a request status 200 on the web service, but my client app does not display anything. I also used Postman to test the API and its working.
Where did I do wrong? Thanks for any help!
I'm using the dataTables jQuery plugin with xpages and have a custom control I drop onto any page, pass in a custom property of viewName and it will display a table using REST - All based on some great examples by Oliver Busse.
Everything works perfectly if this custom control is used on a basic page, however, if it is within a tab, which is not default, when I then click on the tab containing the control, I receive an error when calling viewjson.getId()
I think the issue is because I set viewjson on beforePageLoad?
Any idea how I can get this to work in a tabbed interface?
Code below:
<xp:this.beforePageLoad><![CDATA[#{javascript:var viewjson = new org.openntf.rest.DynamicView(compositeData.viewName);}]]></xp:this.beforePageLoad>
<table
id="#{javascript:viewjson.getId()}"
class="table table-hover table-striped">
<thead>
<xp:repeat id="repeat1" rows="30" disableOutputTag="true"
var="col">
<xp:this.value><![CDATA[#{javascript:try {
viewjson.getCols()}
catch (e) {
openLogBean.addError(e,this)
}}]]></xp:this.value>
<th>
<xp:text escape="true" disableTheme="true"
value="#{col}">
</xp:text>
</th>
</xp:repeat>
</thead>
<tbody></tbody>
</table>
UPDATE
I've tried the following to try and load jQuery first
<xp:this.resources>
<xp:headTag
tagName="script">
<xp:this.attributes>
<xp:parameter
name="type"
value="text/javascript" />
<xp:parameter
name="src"
value="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js" />
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>
And also this in xsp properties
xsp.client.script.dojo.djConfig="dojo-amd-factory-scan": false
But I'm still getting a blank page with no dojo elements displaying
I believe the main problem is that for the XPages core controls a non active tab is not actually rendered to the browser until it becomes active. So what you called in the beforePageLoad() was looking for content that didn't exist at the time.
There's probably a CSJS thing that could re-init the data tables. Another option is to not use the tab core control but use the dojo version from the ext. library. I'm pretty sure that the dojo version renders all content and just uses CSS to hide non active tabs.
Custom control's beforePageLoad event gets executed when XPage is loaded already.
When later the tab is activated and with it the table is rendered the variable viewjson is gone.
One approach would be to put Java object into a composite data variable compositeData.viewjson in beforePageLoad and use it in table later. But, you would calculate all views for every tab before rendering page. In addition, this class is not serializable and couldn't be stored in composite data variable. You could make the class serializable though.
The better approach is to instantiate Java bean in table - without a beforePageLoad event:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<table
id="#{javascript:
var viewjson = new org.openntf.rest.DynamicView(compositeData.viewName);
return viewjson.getId();
}">
<thead>
<xp:repeat id="repeat1" rows="30" disableOutputTag="true"
var="col" value="#{javascript: viewjson.getCols()}">
<th>
<xp:text escape="true" disableTheme="true" value="#{col}">
</xp:text>
</th>
</xp:repeat>
</thead>
<tbody></tbody>
</table>
</xp:view>
I tested the custom control above (ccView with property viewName) with this XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:br />
<xp:panel id="tabs">
<xe:djTabContainer id="tabContainer"
selectedTab="djTabPane1" defaultTabContent="one">
<xe:djTabPane id="djTabPaneView" title="one" closable="false"
partialRefresh="true">
tab rendered first
</xe:djTabPane>
<xe:djTabPane id="djTabPane2" title="two" closable="false"
partialRefresh="true">
<xc:ccView viewName="ByCity" />
</xe:djTabPane>
<xe:djTabPane id="djTabPane3" title="three" closable="false"
partialRefresh="true">
<xc:ccView viewName="ByName" />
</xe:djTabPane>
</xe:djTabContainer>
</xp:panel>
</xp:view>
Views in tabs "two" or "three" get loaded per REST services when user clicks the respective tab.
I've created a small app using ReactJS.Net and ASP.NET 5. If I render a component serverside using #Html.React and tie that to the MVC
#using System.Threading.Tasks
#using React.AspNet
#model Models.DashboardViewModel
#Html.React("MessageBoard", new
{
recentPosts = Model.RecentPosts
})
messageBoard.jsx
"use strict";
var MessageBoard = React.createClass({
render: function(){
return (<table className="table forum table-striped">
<thead>
<tr>
<th className="cell-stat"></th>
<th>Topic</th>
<th className="cell-stat text-center hidden-xs hidden-sm">Replies</th>
<th className="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
</tr>
</thead>
<tbody>
{this.props.recentPosts.map(function(boardPost){
return <BoardPostRow post={boardPost}/>;
}, this)}
</tbody>
</table>)
}
});
This all works great. The problem is that when I go to sources, there is no .js file so I have no way to debug. This is probably ok for some simple read-only elements. But now I want to render some interactive elements that contain state, a form for creating a new Post to the "message board". Here's the code in the same *.cshtml file.
<div id="newPost"></div>
#section scripts
{
<script src="#Url.Content("~/scripts/Components/Board/boardPostForm.jsx")"></script>
<script src="#Url.Content("~/scripts/Components/Common/textInput.jsx")"></script>
<script>React.render(BoardPostForm({}), document.getElementById("newPost"))</script>
#Html.ReactInitJavaScript()
}
The error I get in the console is:
Uncaught SyntaxError: Unexpected token <
textInput.jsx:19 Uncaught SyntaxError: Unexpected token <
(index):69 Uncaught ReferenceError: BoardPostForm is not defined(anonymous function) # (index):69
(index):70 [.NET] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MessageBoard. See http://fb.me/react-warning-keys for more information.
(index):71 [.NET] Warning: Unknown DOM property class. Did you mean className?
(index):71 Uncaught ReferenceError: MessageBoard is not defined
It seems an error trying to read the .jsx, because it takes me to the render function when I click on the error. What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?
What happens if you hit /scripts/Components/Board/boardPostForm.jsx in your web browser? It should show the compiled JSX and have some ReactJS.NET info at the top of the file. If it doesn't, make sure the *.jsx handler is configured in your Web.config. It should look something like this:
<add name="ReactJsx" verb="GET" path="*.jsx" type="React.Web.JsxHandlerFactory, React.Web" preCondition="integratedMode" />
What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?
You can use Gulp if you like, up to you. I have a sample here that uses Webpack for bundling, and ReactJS.NET for server-side rendering: https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack
I am really new in ASP.Net MVC 4.
I need to Display columns and their data in a grid -or webgrid or what- in a page of web application. I should implement the application by Asp.net MVC 4, Visual Studio 2012.
Any help or source to guide me?
Env.
SQL server 2012
Visual Studio 2012
Considering that you have a data model based on that database (use Entity Framework), you can achieve that by using regular HTML tables, on your view (let's call it Table.cshtml):
#model IEnumerable<YourModelClass>
<!-- Using Regular HTML Tables -->
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().Property1)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().Property2)
</th>
(...)
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Property1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Property2)
</td>
(...)
</tr>
}
In your YourModel controller you have something like:
public ActionResult Table()
{
return View("Table", db.YourModel.ToList());
}
This is pretty simple, and is usually generated by scaffolding. I don't know if this fits your purpose.
This is a good tutorial for begginers: http://www.asp.net/mvc/tutorials/mvc-music-store
Other than that, there's plenty of good "grid" components around the Web with all sorts of "fancy features" like sorting/filtering/etc. (e.g.: I've used DevExpress).