How to hide a table row with jQuery? - javascript

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/

Related

Dojo Toolkit - How to change the color of a table column with a button?

I am a complete beginner to dojo and have simply been following the tutorials on the website. Now I am trying to dynamically change the background color of a table when pressing a button. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script> require(['myModule.js']); </script>
<title>table</title>
</head>
<body class="claro">
<h1 id="greeting">test table</h1>
<table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
<thead>
<tr>
<th field="col1">Company</th>
<th field="col2">Contact</th>
<th field="col3">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</thead>
</table>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>
</body>
</html>
This is myModule.js file. When I click the button the function does not seem to work. When I use the commented out code it works fine
require(["dijit/form/Button", "dojo/dom", "dojo", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(dojo){
//dom.byId("result1").innerHTML += "Thank you! ";
dojo.style("tableContainer", "background-color", "red");
}
}, "progButtonNode").startup();
});
you need to apply the style on the node so
dojo.style(dom.byId("tableContainer"), "background-color", "red");
should work for you. Also other way is to change the css class. Let's say you have a css class which does what you want and you want to apply it onClick of a button. You can do something like
dijit.byId('yourgid').set('class','yourcssclass');
You can also use onStyleRow event ro style your rows

How to print html format while i have styled table into pdf in angular2?

here is while i trying to achieve, i want to export my data that generated to html table, but i think the style is gone, how can i print neat table while my html table is looked like this :
<button (click)="print()">print</button>
<div id="print-section">
<div class="row">
<div class="col-md-12">
<ba-card title="Result" baCardClass="with-scroll table-panel">
<!-- Hasil -->
<div class="table-responsive">
<table class="table">
<tr>
<td>No</td>
<td>Kode Claim</td>
<td>Paid/Not Paid</td>
<td>Kode Service</td>
<td>Tanggal</td>
<td>Nomor Nota</td>
<td>Kode Produk</td>
<td>Kerusakan</td>
<td>Biaya</td>
<td>Transport</td>
<td>Valid</td>
</tr>
<tr *ngFor="let claimReports of claimReport; let i=index" >
<td>{{i + 1}}</td>
<td>{{claimReports.KODE_CLAIM}}</td>
<td>{{claimReports.Paid}}</td>
<td colspan="11">
<tr *ngFor="let dt of claimReports['DETAILS']; let a=index">
<td>{{dt.Kode_Service}}</td>
<td>{{dt.Tanggal_Service | date: 'dd/MM/yyyy'}}</td>
<td>{{dt.Nomor_Nota}}</td>
<td>{{dt.Kode_Produk}}</td>
<td>{{dt.Kerusakan}}</td>
<td>{{dt.Biaya}}</td>
<td>{{dt.Transport}}</td>
<td>{{dt.Valid}}</td>
</tr>
</td>
</tr>
</table>
</div>
<!-- End Hasil -->
</ba-card>
</div>
</div>
</div>
and here is the app.component.ts :
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
here is the HTML looked like :
its like not formated, how can i print exactly like just like the html? or at least i can make the table neat, and i dont want the url showed when print
UPDATE :
i update my code with bootstrap css, so my code that looked like this, in my app.component.ts
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
and here is print the result :
the sixth column is combined in to first, second, third and fourth column, how can i make it just like my table?
when i do inspect the css with firebug, i see my colspan row is empty, here is how it looked like with firebug :
the result should looked like the first row, the original HTML is just like i posted above. Why the out from my
Adding style
You get an unstyled version, because in your print() function you do not include the styles. See your modified example:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
// You need to insert the stylesheet to the print function
<link rel="stylesheet" href="correct href to your stylesheet">
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
Removing page link
To remove the link from the top of the page follow instructions on this post: Disabling browser print options (headers, footers, margins) from page?

My AngularJS code doesn't work

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.

Refresh part of page with JS

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

Function that removes a row from the table is not working after adding jQuery UI

<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>

Categories