I am new to Jquery and web-programming in general. I am trying to use the tablesorter jquery plugin, for one of my programs only to find that it is not working. After some tweaking, I was unable to make it work. So resorted to Stack Overflow.
Can you please explain what my mistake is? Thanks in advance :)
Now, my html file(following code) is in the same folder as my "jquery.tablesorter.js" is in. I'm trying to use google Jquery CDN from the W3 schools quoted below :
http://www.w3schools.com/jquery/jquery_install.asp
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
for filename in os.listdir (input_dir) :
f = open(file_name, 'rb')
file_content = f.readlines()
f.close()
len_file = len(file_content)
while( i < len_file ):
line = file_content[i].split(delimiter)
i +=1
Update1: I'm able to fix this error. Seems adding Content Distribution from Google caused the error changing it to a internal directory seems to solve the problem.
Actually, I changed,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
to this line.
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
and it worked :)
Any ideas why Google CDN didn't work ? Thanks! :)
Update2:
When you test the code locally, try to add http: before the google CDN call.ie,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Enjoy the plugin:)
I bet it is working, you're just not seeing any table styling because the tablesorter.css file isn't loaded. Try clicking on the table head and see if it sorts.
You can try - It works for me..
$(document).ready(function()
{
$("#myTable").tablesorter({sortList:[[0,0],[2,1]], widgets:'zebra']});
}
);
Related
I want to load a value from localStorage and then at page load set a style='display:none' or not on a table row.
One possibility I see is:
<script>
if(localStorage.getItem('test') == 'aja')
{
document.write('<tr style="display:none">');
}else{
document.write('<tr>');
}
</script>
but that doesn't seem to be a good solution as the editor doesn't recogize this and is then complaning about the missing
I could also hide it at after page load - but then it is visible for a split second before it is hidden - not ideal.
I am somewhat missing the possiblity to directly use variables in the html code itself. Like Razor / c# is doint it
#var hiddenOrNot = 'none';
<tr style="display:#hiddenOrNot">
but that is loaded on the server side, so no possibility to get the localStorage value...
Any suggestion? jquery or javascript
Thanks a lot
Something like this perhaps.
Select the row that needs to be removed if condition true
Create a class that contains style display:none
Add class to row if condition true
let tr = document.querySelector(".testRow");
let localStorageItem = localStorage.getItem("test") || "";
tr.classList.add((localStorageItem === 'aja') ? "hideRow" : null);
.hideRow {
display: none
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr class="testRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Edit: error on console here is due to StackOverFlow not allowing access to localStorage, should work fine on your system
You can try to set tr to display: none by default,and if localStorage.getItem('test') != 'aja' remove it.So that it will not be visible for a split second before it is hidden.Here is a demo:
view:
<table>
<thead>
<tr class="hidden">
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr class="hidden">
<td>1</td>
<td>Name1</td>
</tr>
<tr class="hidden">
<td>2</td>
<td>Name2</td>
</tr>
</tbody>
</table>
css:
<style>
.hidden {
display: none
}
</style>
js:
<script>
$(document).ready(function () {
if (localStorage.getItem('test') != 'aja') {
$("tr").removeClass();
}
});
</script>
ng-repeat not working with table,in the output only header part displayed? As i think the binding i did is perfectly fine, but something is there which i am missing?
When i try to run in Stackoverflow ide it is working fine.
I am using ADOBE Brackets.whether its the error in brackets??
Please suggest the best IDE for angularjs ?
Can anyone help me out where i am doing wrong?
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>
Please find your solution , https://plnkr.co/edit/hFIfPlTcP8VLVE72coth
And problem in your code is here :
var mycontroller=function($scope)
and myApp.controller('myController',mycontroller);
mycontroller variable is not getting called. put Alert(); in that block and see.
And for editor you can use SUBLIME editor , Visual studio code, : Intellisense for angular2
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>
I'm searching for a jquery popup that has a vertical scrollbar and that allows to show data as if it were imitating a Datagrid, except for the fact that rows are not visible.
I mean something like that should be showing in the popup
Field1 Field2 Field3
Value1 Value1 Value1
Value2 Value2 Value2
And if the lentgh of the elements that form the column is longer than the height of the screen a vertical scrollbar should display and allow to displace the values.
I've searched for it some time and I don't find anything, so I hope you can help me with this thing, as it seems to be very time consuming to do it from scratch.
Although I've been ordered to do it via jquery it doesn't really matter much as long as it works, so feel free to name other alternatives, that are more and less made, if they exist, the only limitation is that it has been done on client side using JavaScript as the rest of the code is done on that.
Thanks for your help.
For the dialog you could use jQuery UI. To meet the rest of the requirements just add a bit of css. Here you have an example of your case. I hope it helps you:
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
#dialog-content {
height: 200px;
/* Show scrolls if overflows! */
overflow: scroll;
}
#dialog-content th,
#dialog-content td {
/* Big rows! */
padding: 20px;
}
</style>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<div id="dialog-content">
<table>
<thead>
<tr>
<th>Field1</th>
<th>Field2</th>
<th>Field3</th>
<th>Field4</th>
<th>Field5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I am new to Dust.js and am trying to iterate a JSON object with records and render each of them into a row within a table. Below is the script, I am using to render the table, but am running into issues, I guess while rendering, especially the template argument of the render function. Appreciate if I could be pointed in the right direction
<div id="dustPlaceholder"></div>
<script id="goalTemplate">
<table id="dustGoals">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{#friends}
<tr>
<td>{name}</td>
<td>{age}</td>
</tr>
{/friends}
</tbody>
</table>
</script>
</div>
<script type="text/javascript">
var src = document.getElementById("goalTemplate").innerHTML;
var compiled = dust.compile(src);
dust.render("goalTemplate", { friends: [ { name: "Moe", age: 37}]},
function(err, out) {
document.getElementById('dustPlaceholder').innerHTML = out;
});
</script>
You need to include the entire Dust.js library if you are going to be rendering on the client, so you need to include the dust-full-0.3.0.min.js. Additionally,
<script src="dust-full-0.3.0.min.js"></script>
Also, what is "goalTemplate"?
Also what are you compiling? There are no variables in there. You need to compile the actual HTML - the content in the DIV tag. So everything including the div tags belong in the src variable.
Also, you must assume a name to the compiled template so it can be accessed. I'm really confused what you were doing before, but this example should work:
<script src="dust-full-0.3.0.min.js"></script>
<script type = "text/javascript">
var source = "<div id="dustPlaceholder"></div>
<script id="goalTemplate">
<table id="dustGoals">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{#friends}
<tr>
<td>{name}</td>
<td>{age}</td>
</tr>
{/friends}
</tbody>
</table>
</script>
</div>";
var compiled = dust.compile(src, goalTemplate);
dust.render("goalTemplate", { friends: [ { name: "Moe", age: 37}]},
function(err, out) {
document.getElementById('dustPlaceholder').innerHTML = out;
});
</script>
how can i append a new tr to the top of the table instead of under other tr.
Example:
<table width='100%'>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
After a click event in jQuery, how can i place
<tr><td>something3</td><td>else here3</td></tr>
at the top of the table so it now looks like
<table width='100%'>
<tr><td>something3</td><td>else here3</td></tr>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
Any help on this would be greatly appreciated.
$('table').prepend('<tr><td>something3</td><td>else here3</td></tr>');
or...
$('<tr><td>something3</td><td>else here3</td></tr>').prependTo('table');
More info on 'prepend': http://docs.jquery.com/Manipulation/prepend
More info on 'prependTo': http://docs.jquery.com/Manipulation/prependTo
This JS is IE specific at the moment, but it shouldn't be too hard to make it multi-browser compatible.
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow(0);
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">3</td>
<td width="100">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>