Hi I am trying to catch an array of string from a class called AjaxFacade using DWR and I am using jquery to autocomplete a text box snippetof my jsp code is as follows
<%
String path = request.getContextPath();
%>
<script type='text/javascript' src='<%=path%>/dwr/interface/ajaxFacade.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
<script>
$(function()
{
var countries ;
countries = ajaxFacade.getCountries();
$("#tags").autocomplete({source : countries});
});
</script>
<tr>
<td align="left" valign="top" bgcolor="e3ddc7">
<div align="right"><strong> <font color="red">*</font>Old E-mail Address:</strong></div>
</td>
<td align="left" valign="top" bgcolor="#FFFFFF">
<html:text name="amsUserRequestForm" property="oldEmail" size="20" styleClass="ui-widget" styleId="tags">
</html:text></td>
</tr>
Function in AjaxFacade class is as follows
public String[] getUsers() {
String[] countries = {
"India",
"Iran",
"Iraq",
"Indoneshia",
"Ireland"
};
return countries;
}
No matter what I do it keeps me giving error this.source is not a function. Any help is greatly appreciated
make sure that the countries are filled with data make sync json call if needed.
Related
I am working on Xamarin forms IOS application calling HTML pages, styles and scripts by using Hybrid WebView. I am not able to render styles and scripts and my code is
HybridWebViewRenderer.cs
protected override void OnElementChanged (ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged (e);
if (Control == null) {
userController = new WKUserContentController ();
var script = new WKUserScript (new NSString (JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
userController.AddUserScript (script);
userController.AddScriptMessageHandler (this, "invokeAction");
var config = new WKWebViewConfiguration { UserContentController = userController };
var webView = new WKWebView (Frame, config);
SetNativeControl (webView);
}
if (e.OldElement != null) {
userController.RemoveAllUserScripts ();
userController.RemoveScriptMessageHandler ("invokeAction");
var hybridWebView = e.OldElement as HybridWebView;
hybridWebView.Cleanup ();
}
if (e.NewElement != null) {
string fileName = Path.Combine (NSBundle.MainBundle.BundlePath, string.Format ("Content/{0}", Element.Uri));
//fileName = "/var/containers/Bundle/Application/2DC89563-D118-4092-B7A5-4549AF07F3B2/StoneApplication.iOS.app/Content/index.html"
Control.LoadRequest (new NSUrlRequest (new NSUrl (fileName, false)));
}
}
public void DidReceiveScriptMessage (WKUserContentController userContentController, WKScriptMessage message)
{
Element.InvokeAction (message.Body.ToString ());
}
and my index.html, here I am calling scripts, Images and styles
<html>
<head>
<title>STONEAPP TEMPLATE</title>
<!--Scripts-->
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/fileServer.js"></script>
<script src="/Scripts/fileupload.js"></script>
<script src="/Scripts/ng-cordova.js"></script>
<script src="/Scripts/app.js"></script>
<!--Styles-->
<link href="/Styles/bootstrap.css" rel="stylesheet"/>
<link href="/Styles/main.css" rel="stylesheet"/>
</head>
<body ng-app="stoneApp" style="background-color: #ffffff;">
<div ng-controller="templateCtrl">
<div id="Header" style="background-color:#293846;min-height:50px">
<table style="width:100%;padding-top:5px;padding-left:5px;padding-right:5px">
<tr>
<td align="center" width="5%" valign="middle" ng-if="jobView == true" ng-click="showActList()">
<img src="/Images/arrow-back.png" alt="" style="height:50px;width:50px"/>
</td>
<td align="center" width="5%" valign="middle">
<img src="/Images/wifi_on.png" alt="" style="height:50px;width:50px" ng-click="ShowWifiSettings()"/>
</td>
<td align="center" width="5%" valign="middle" ng-click="ShowTabSettings()">
<img src="/Images/settings.png" alt="" style="height:50px;width:50px" ng-if="loginView == false"/>
</td>
<td width="5%" valign="middle" ng-if="activityView == true"></td>
<td width="60%" valign="middle"></td>
<td width="20%" valign="middle" align="right">
<span style="color:white" ng-if="loginView == false">{{userName}} !</span>
</td>
<td width="5%" align="right" valign="middle" ng-click="logout()" >
<img src="/Images/power_button.png" style="height:50px;width:50px" ng-if="loginView == false"/>
</td>
</tr>
</table>
</div>
</div>
</body>
I gave build action as bundle resource for styles and scripts even though I am not able to call styles and scripts and program structure is as attached image.
I am using iOS 10.2 tablet. How can I investigate my issue and make call the scripts styles and images as the links given in the HTML page?
You can't do that with Control.LoadRequest
You're problem is that you can't define baseUrl for your webview with this method and no other method let you define it.
So when your index.html is loaded into the webview, the webview can't retrieve script or css because the baseUrl is not defined and it doesn't know where to load them.
A workaround is to use LoadHtmlString (String htmlContent, NSUrl baseUrl)
Where htmlContent is your index.html content loaded into a var and baseUrl NSUrl baseurl = new NSUrl(NSBundle.MainBundle.BundlePath, true);
I need a table structure using kendo binding for which I have a row-template and item-template ,as I had red telrik(kendo) documentation which says only one line is allowed within row-template.The requirement is that I want to have more than one row in row-template.But as soon as I add more than one line It renders only for the first row.
<script type="text/kendo-template" id="tableEditRows">
<tr class="tableRow" data-bind="source:cells" data-template="tableEditCell"></tr>
<tr>
<td >testsal</td>
</tr>
</script>
<script type="text/kendo-template" id="tableEditCell">
<td class="tableCell" align="center">
<p>value</p>
</td>
</script>
<div id="numeric" ></div>
<script>
var table = $('<table class="tableEdit" style="width:200px">' +
'<tbody align="center" data-bind="source:rows" data-template="tableEditRows">');
$("#numeric").append(table);
var viewModel = kendo.observable( {
rows:[{
cells:[{
Id:1,
Value:"asas"
}]
},{
cells:[{
Id:1,
Value:"asas"
}]
}]
});
kendo.bind($("#numeric").get(0), viewModel);
here a link http://dojo.telerik.com/ifoBA/3 to that I am trying to do.
Is there a way to achieve having more than one line in row-template
I was able to solve this issue by making use of static templating as I had a fixed set of rows.I created a html template within which I used a for loop for each row and for each rows I called a item-template within a <tr> tag. Along with this, I had a additional row template to how additional details.below is a code snippet to show what I had done.
<script type="text/html" id="testTemplate" >
#for(var i=0;i<rows.length;i++){#
<tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
#if(rows[i].index==0){#
<tr >
<td class="tableCell" >
some value
</td>
</tr>
#}#
#}#
</script>
And here is the compiling and appending of template
var table = $('<table class="elvi"><tbody align="center"></tbody></table>');
var template = kendo.template($("#testTemplate").html());
var itemHtml = template(self.viewModel);
table.append(itemHtml);
table.appendTo($(self.element));
I want to show a dynamic table which has records coming from a custom search.
Now I want to make the table row as an inline editable row.
I also need pagination with the table since I have 30 to 40 table columns which I need to display on the same table (scroll for columns).
I used Handsontable to achieve this as seen below, however, the image is not coming as I have entered in the table cell.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Scroll - Handsontable</title>
<script data-jsfiddle="common" src="handsontable.full.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="handsontable.full.css">
</head>
<body>
<div id="example1" style="width: 700px; height: 400px; overflow: auto">
<table id="example" class="row-border hover order-column" cellspacing="0" style="Display: none;" >
<thead>
<tr>
<th>Action</th>
<th>ID</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>1</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td><img src="edit.jpg" height="20" width="20"/></td>
<td>3</td>
<td>test3</td>
<td>test3</td>
</tr>
</tbody>
</table>
</div>
<script data-jsfiddle="example1">
var data=$('#example tr').map(function(tr){
return [$(this).children().map(function(td){return $(this).text()}).get()]
}).get()
var
example = document.getElementById('example1'),
maximize = document.querySelector('.maximize'),
maxed = false,
resizeTimeout,
availableWidth,
availableHeight,
hot1;
hot1 = new Handsontable(example,{
data: data,
// colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
rowHeaders: false,
colHeaders: false,
fixedColumnsLeft: 2,
fixedRowsTop: 1,
minSpareRows: 1,
contextMenu: true
});
function calculateSize() {
var offset;
if (maxed) {
offset = Handsontable.Dom.offset(example);
availableWidth = Handsontable.Dom.innerWidth(document.body) - offset.left + window.scrollX;
availableHeight = Handsontable.Dom.innerHeight(document.body) - offset.top + window.scrollY;
example.style.width = availableWidth + 'px';
example.style.height = availableHeight + 'px';
}
}
</script>
</div>
</body>
</html>
From the looks of it, your definition of the Handsontable is correct. Are you pasting that HTML after it's rendered or is that what Handsontable is creating for you? I'm not sure if you knew or not but you don't need to define the table in the HTML for this to work. As a matter of fact you should NOT be defining it.
If this was just the rendered code, could you please elaborate on what you mean by "I have used Handsontable for achieve this as below. but image not coming as i have entered in table cell."? What parts are wrong and what do you need changed?
Try this:
cells : function (row, col, prop) { return { renderer: 'html' }; }
as an option in your hot1 definition.
In my firefox extension I need user input to do further computations on my extension.
I used a panel to do this. With panels I can get input form user and pass it to my content script and emit this from there using self.port.emit and receive it on main.js using panel.port.on. But my problem is panels auto hide. I want to show my panel until user closes it.
I tried getting the above scenario by opening a html page using window window.open. But I could not pass the user input from my html window to main.js. I used the following code.
MY SR.html code
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script>
var t= {
CallExtension : function(e) {
var text = document.getElementById("p").value;
var element = document.createElement("MyExtDE");
element.setAttribute("phNu", text);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("SREvent", true, false);
element.dispatchEvent(evt);
}
}
</script>
<style>
table{ padding-top:30px;}
h1{ color:orange; }
td{ font-family:"Arial"; font-size:12px; }
</style>
</head>
<body>
<table cellspacing=5 cellpadding=5 align="center" border=0>
<tr>
<td colspan=3><h1>MyRMN Start Registration</h1></td>
</tr>
<tr>
<td>Phone Number</td><td>:</td><td><input type="text" id="p" name="pn"/>
</td>
</tr>
<tr>
<td><input type="button" id="btnSSubmit" value="Submit"
onclick="t.CallExtension(event);" /></td>
</tr>
</table>
</body>
My main.js code
function SR(){
try {
win = window.open(data.url("SR.html"), "SR",
"chrome,centerscreen");
win.document.defaultView.addEventListener("SREvent", S1Submit, false, true);
//window.window.document.defaultView.addEventListener("SREvent", S1Submit, false,
true);
} catch(e) {
prompts.alert(null, "main() SR", " Exception: " + e);
}
}
function S1Submit(evt){
var text = evt.target.getAttribute("phNu");
prompts.alert(null, "main() S1Submit", text);
if (text) {
mSR(text);
}
}
UPDATE
I introduced page-mod in my main.js page and i could not still communicate with my main.js
from my webpage.
main.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
function StartRegistration(){
try {
winSReg = window.open(null, data.url("SR.html"), "Title",
"chrome,centerscreen", null);
} catch(e) {
prompts.alert(null, "Title", "SR Exception: " + e);
}
}
pageMod.PageMod({
include: data.url("SR.html"),
contentScriptFile: data.url("SR.js"),
onAttach: function(worker) {
worker.port.on("gotInput", function(inputValue) {
doSomethingWith(inputValue);
});
}
});
SR.JS
function SubmitSReg(){
try {
var text = document.getElementById("p").value;
alert("SR.js text:" + text);
self.port.emit("gotInput", text);
} catch(e) {
alert(e);
}
}
SR.Html
<!DOCTYPE HTML>
<html>
<head>
<title>SR</title>
<script type="text/javascript" src="SR.js"></script>
<style>
table{ padding-top:30px;}
h1{ color:orange; }
td{ font-family:"Arial"; font-size:12px; }
</style>
</head>
<body>
<table cellspacing=5 cellpadding=5 align="center" border=0>
<tr>
<td colspan=3><h1>Title</h1></td>
</tr>
<tr>
<td>Phone Number</td><td>:</td><td><input type="text" id="p"
name="pn" /></td>
</tr>
<tr>
<td><input type="button" id="btnSSubmit" value="Submit" onclick =
"SubmitSReg()"/></td>
</tr>
</table>
</body>
</html>
Any kind of help is greatly appreciated.
Thanks in advance
Your approach is right but there's a missing part: in order to allow communication between the main.js and your static page you need to use a page-mod matching your static page local url.
Add this to your main.js:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: data.url("SR.html"),
contentScriptFile: [data.url("script.js")],
onAttach: function(worker) {
worker.port.on("gotInput", function(inputValue) {
doSomethingWith(inputValue);
});
}
});
And also create a data/script.js file containing:
/* Here add a listener to the form's submit event and then
get the input element and its value.
Then do this with yhe input value:
*/
self.port.emit('gotInput', inputValue);
This way you achieve communication between your page and the addon main.js.
I am trying to bind an observableArray from an ajax server read but not able to bind it to the html. The json data is returning but not sure how to parse or get it to bind. I am new to Knockout.
Code:
<html>
<head>
<title></title>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>
function SurnameViewModel() {
var self = this;
self.Surnames = ko.observableArray();
$.ajax({
crossDomain: true,
type: 'POST',
url: "http://localhost/GetSurnames/Name/CID",
dataType: 'json',
data: { "Name": "d", "CID": "17" }, // <==this is just a sample data
processdata: true,
success: function (result) {
self.Surnames= ko.mapping.fromJS(result.data);
alert(self.Surnames()); // <== able to see the json data
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Failure!");
alert(xhr.status);
alert(thrownError);
}
});
}
// Activates knockout.js
$(document).ready(function() {
ko.applyBindings(new SurnameViewModel())
});
</script>
</head>
<body>
<h2>Surnames</h2>
<table>
<thead><tr>
<th>ID</th><th>Surname</th>
</tr></thead>
<tbody data-bind="foreach: Surnames">
<tr>
<td data-bind="text: Surnames().id"></td>
<td data-bind="text: Surnames().homename"></td>
</tr>
</tbody>
</table>
</body>
</html>
Json Data Returned from the alert
data: "[{"id":3,"homename":"DCosta"}]"
What am doing wrong here?
Edit: Working code
This is what worked for me.
I change this
ko.mapping.fromJS(result.data, {}, self.Surnames);
to
ko.mapping.fromJSON(result.data, {}, self.Surnames);
and in the html from this
<tr>
<td data-bind="text: Surnames().id"></td>
<td data-bind="text: Surnames().homename"></td>
</tr>
to this
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: homename"></td>
</tr>
You have two problems:
In your view when using the foreach binding you are "inside" of the context of the array so you don't need to write out the array name (Surnames()) again:
<tbody data-bind="foreach: Surnames">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: homename"></td>
</tr>
</tbody>
When you are getting back the data from the server you are overriding the Surnames array, the correct way of using the mapping plugin here:
ko.mapping.fromJS(result.data, {} /* empty mapping options */, self.Surnames);
Or
self.Surnames(ko.mapping.fromJS(result.data)());
Note the () in the above code, you need this because the ko.mapping.fromJS(result.data) will return an ko.observableArray without getting its underlaying value with the () you would end up with your Surnames containing another ko.observableArray