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
Related
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.
I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is
todoApp
Then I should put
$scope.todoApp
instead of
$scope.todo
but turned out that's not an issue.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To DO List</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var model = {
user: "Adam",
items: [{ action: "Buy flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That's what I get in a browser..
And that's what I guess I am supposed to get...
Why it doesn't work?
Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:
<link href="bootstrap-theme.css" rel="stylesheet>
^ ==> missing "
Working DEMO /* updated css */
Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delrow').click(function(){
alert(':)');
$(this).closest('tr').animate({'backgroundColor':'#EF3E23','color':'#fff'},300,function(){
$(this).remove();
});
return false;
});
});
</script>
</HEAD>
<BODY>
Hello
<table>
<tr>
<td>abc</td>
<td><a id="delrow" title="Click to remove" href="#">Delete</a></td>
</tr>
</table>
</BODY>
</HTML>
Here you can test my code: http://goo.gl/XNQb5j
The "Delete" button should remove the row from the table.
It's working when I don't include jQuery UI (but then, of course, animation is not working).
What am I doing wrong?
Sorry for my English errors.
the version of the jQuery UI that youve linked is incompatible with the version of the jQuery you linked. better take the version numbers from jQuery examples on their website.
notice how your code works when the versions are compatible:
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#delrow').click(function() {
alert(':)');
$(this).closest('tr').animate({
'backgroundColor': '#EF3E23',
'color': '#fff'
}, 300, function() {
$(this).remove();
});
return false;
});
});
</script>
</HEAD>
<BODY>Hello
<table>
<tr>
<td>abc</td>
<td><a id="delrow" title="Click to remove" href="#">Delete</a>
</td>
</tr>
</table>
</BODY>
</HTML>
i want to get date from and make SQL query with it, but i have a little problem :S
I cant get the date and i don't know how to give to an php variable :S
Even more i'm not allowed to use submit (Post and Get methods)
<?php
session_start();
if(isset($_SESSION['myusername']))
{
$hi='';
}else
{
header("location:login.php");
}
require_once '../../templates/DBconnect.php';
$link = DBconnect::connect();
?>
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
<link rel="stylesheet" href="../css/datepicker.css">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="Begin Date" id="example1">
</div>
</div>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="End Date" id="example2" onchange="hole()">
</div>
</div>
<!-- Load jQuery and bootstrap datepicker scripts -->
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker({
format: "dd-mm-yyyy"
});
});
$(document).ready(function () {
$('#example2').datepicker({
format: "dd-mm-yyyy"
});
});
function hole(){
this.$('.example1').datepicker('getDate');
alert($('#example1').val());
}
</script>
</body>
</html>
You have to use client side script such as JavaScript to pass the SQL query without submitting the page. Some JavaScript libraries such as jquery can be used with minimal JavaScript code.
I am trying to hide a table row with jQuery instead of with js as in this question. This is the script that I put in the header:
self.response.out.write("""
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
<title>User Admin Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script>
$(document).ready(function() {
$("#false").click(function() {
$("#hide").hide("slow");
});
});
</script>
<body>
""")
And here is the html:
...
<tr class="hide">
<td>
...
<a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
</td>
</tr>
</div>
...
This is not working. And this question is same as this but I cannot make mine work. What am I doing wrong?
Update
Edited code according to answers. But this is still not working although it is working in jsfiddle:
<html><head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
<title>User Admin Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script>
$(document).ready(function() {
$("a.false").click(function(e) {
$(".hide").hide("slow");
e.preventDefault();
});
}); </script> </head>
<body>
...
Update
The closing </script> was missing in the CDN call; but now the entire table is hidden; I am adding that section of the table. Thanks again for the answers:
self.response.out.write("""<table class="mytable">
<tr class="head">
<th width="80%">links</th><th>edit tags</th>
</tr>
""")
query = Main.all()
query.filter("owner", user)
query.filter("display", True)
query.order("-date")
cursor = self.request.get("cursor")
if cursor: query.with_cursor(cursor)
e = query.fetch(100)
cursor = query.cursor()
for item in e:
main_id = item.key().id()
self.response.out.write("""
<tr class="hide">
<td>%s<span class=small> (%s) </span><br />
<span class=small>%s</span>
<span class="small">(edit)</span>
<a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
<span class="small">(comments)</span></td>
<td>%s
</td>
</tr>
""" % tuple([item.url, item.title, urlparse(item.url).netloc,
f1.truncate_at_space(item.pitch), main_id, main_id, main_id,
item.url, main_id, (", ".join(item.tag_list)),
(", ".join(item.tag_list)),]))
self.response.out.write("""</tbody></table>""")
First thing, you have false as a class in your HTML
<a class="false" href=...
and an ID in your script
$("#false").click(function()...
Your hide is also an id and should be class.
Here is the fix: http://jsfiddle.net/A6jKm/1/
EDIT
now it hides the entire table
That's because all your rows are generated with the same hide class, as seen here
for item in e:
main_id = item.key().id()
self.response.out.write("""
<tr class="hide">
To get around this, I've modified the code a bit to search for the direct parent of the clicked item:
$("a.false").click(function(e){
$(this).parents('tr').hide();
e.preventDefault();
});
Updated Example: http://jsfiddle.net/A6jKm/3/
EDIT 2
Perhaps closest would work better.
Try this
$("a.false").click(function(e){
$(this).closest('tr.hide').hide();
e.preventDefault();
});
Example 3: http://jsfiddle.net/A6jKm/4/
You're using ID selectors:
$("#false").click(function() {
$("#hide").hide("slow");
});
when you want a class selectors:
$(".false").click(function() {
$(".hide").hide("slow");
});
Demo: http://jsfiddle.net/ambiguous/sw7Tr/