so I have this code which displays data from elastic search, the purpose is to get some data, compute a average and display a red or green button.
I'm just starting.
<!doctype html>
<html ng-app="EsConnector">
<link rel="stylesheet" href="styles/main.css">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script><!-- // a recuperer -->
<script src="scripts/controllers/elasticsearch.angular.js"></script>
<script src="scripts/controllers/es_connect.js"></script>
</head>
<script type="text/javascript">
function addTpsGeocodage(p1) {
alert(p1);
}
</script>
<body>
<title>Dashboard</title>
<h1 align="center">Dashboard </h1>
<hr>
<h3>Services Externes</h3>
<div ng-controller="QueryController">
<div >
<table>
<tr ng-repeat="item in hits">
<td>
{{item['_source']['tpsGecodage']}}
<script>
addTpsGeocodage(item['_source']['tpsGecodage']);
</script>
<span class="green_circle" ng-if="item['_source']['tpsGecodage'] < 1">
Lien
</span>
</td>
</tr>
</table>
</div>
</div>
<br>
Above this line ^^^ should be the results of a test search on the ElasticSearch server.
</body>
</html>
Basically this addTpsGeocodage(item['_source']['tpsGecodage']); (line 29) is doing nothing.
How can I pass a variable from the angular JS scope to the javascript scope.
Thanks
Assign the function to a variable so that it can be accessed globally.
<script type="text/javascript">
var addTpsGeocodage = function(p1) {
alert(p1);
}
</script>
Now, you can access addTpsGeocodage anywhere.
Related
Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed
I am new to Ractive.js and just playing around with it. I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. Nothing gets rendered on my browser. However, the same code is running fine in JSFiddle. Can someone explain what is happening here?
Here is the fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>
<body>
<div id="main" class="page-container">
<script id='template' type='text/ractive'>
<div class="weather-widget">
<div class="input-group">
<label>City Name</label>
<input type="text" class="form-control" placeholder="Enter City Name" />
</div>
<div class="input-group">
<label>Recent Searches</label>
<select>
<option>Select from recent searches</option>
</select>
</div>
<div class="weather-details">
<table>
<tbody>
<tr>
<th>Wind</th>
<td>{{country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
</div>
</body>
</html>
Code in weather.js:
var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
country: 'London'
}
});
At the time weather.js executes, the element hasn't yet been created. You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body>, after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script>.
I'm trying to call a function in click function from my html page ,
added all typescript definition files from nuget but something is going wrong
My Click Function is not Working .... No error in console even
Here is my Hrml and Controller Code
Html Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="test">
<input type="button" ng-click="click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class test {
constructor() { }
click() {
alert();
}
}
angular.module("testModule").controller("test", test );
This does not work because ng-click="click()" tries to call $scope.click() which is not defined.
I would highly advise you to use the controller as-Syntax when working with AngularJS and Typescript
Demo
Here is the corrected code. Don't mark this as the answer, #Aides got here before me.
Html Page
<!DOCTYPE html>
<html> <!-- its 2016 -->
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="Test as test">
<input type="button" ng-click="test.click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class Test {
click() {
alert();
}
}
angular.module("testModule").controller("Test", Test );
I am getting a infinite digest cycle error with the filter code below. What is incorrect with it. I do not see an issue with this. Is there a different method of assignation or is it a known bug? I am not sure whats happening here with this error
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Directives</title>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<h1>Test Text for style</h1>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search">
<div ng-repeat="var in variable | filtername:'test':'test2':'test3' track by $index">
{{var}}
</div>
</div>
<script>
var app = angular.module("demo",[]);
app.filter("filtername",function(){
return function(array, arrayField, arrayField1, arrayField2){
/* modification here */
var myArr = [];
for(var i=0;i<array.length;i++){
if((array[i].name===arrayField) || (array[i].name===arrayField1) ||(array[i].name===arrayField2)){
myArr.push({name: angular.uppercase(array[i].name)});
}
}
return myArr;
}
})
app.controller("firstCtrl",function($scope){
$scope.variable = [
{name:"test"},
{name:"test2"},
{name:"test3"},
{name:"test4"}];
})
</script>
</body>
</html>
I can't update my label with Jquery. It should update after every second on my page but nothing happens. Is there something wrong with my javascript?
Basically what I want to do is update the label every second. But somehow this isn't working. Can anyone please help me out?
Below you can find the code for my 2 files:
////////////// Index.html: /////////////////
<!--AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Gebr. Gerrits Recycling Helmond</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
</head>
<body>
<div class="Maindiv">
<div class="header">
<img src="images/gerritslogo800.jpg" class="Logo">
</div>
<div class="content">
<br/>
<table>
<tr>
<th>Part</th>
<th>Value</th>
</tr>
<tr>
<td>Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Non-Ferro:</td>
<td>0 kg</td>
</tr>
<tr>
<td>Errors:</td>
<td><label id="amountOfErrors" name="amountOfErrors">:="webdata".AmountOfErrors:</label></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
$.ajaxSetup({ cache: false });
setInterval(function()
{
$.get("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
<div class="footer">
Gebr. Gerrits Metaalhandel Helmond B.V. <br/>
Gebr. Gerrits Metaalrecycling B.V. <br/>
Auto Verschrotings Industrie "A.V.I." Den Bosch B.V. <br/>
Euregio Recycling B.V.<br/>
</div>
</div>
</body>
</html>
////////////// IOamountOfErrors.htm: /////////////////
< !-- AWP_IN_Variable Name='"webdata".AmountOfErrors' -->
:="webdata".AmountOfErrors:
(added the space between '<' and '!' else it wouldn't show the code on this site)
Already searched the net for this: I actually found the same stuff that I needed but for me it isn't working: https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages
Please help me out!
Thanks in advance,
Bart
My best would be that you're debugging this local and not on a webserver right?
Because your javascript is trying to do a cross origin requests which doesn't work on file://
EDIT:
Can you try this code
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
setInterval(function()
{
$.post("IOamountOfErrors.htm", function(result)
{
$('#amountOfErrors').text(result);
});
},1000);
});
</script>
Well to update your label you can use setInterval. Here's Code which might be useful
var count = 20;
function myFunction() {
setInterval(function(){ startCounter() }, 1000);
}
$("#counterStart").click(function(e){
myFunction();
});
function startCounter() {
$("#counter").text(count);
}
HTML:
<input type="button" value="counter" id="counterStart" />
<span id="counter">dfsdfs </span>
Working FIDDLE