I am looking forward to use the list.js by Jonny. Here, in its examples, I am trying to use the same list code as given here. I copied the HTML,CSS and JS part in my code file. Also, I downloaded and saved the list.js given and pasted it in the same directory as my code file. I am using WAMP and when I open the page, the search function does not work as it works online. The table does not update dynamically and even it doesn't update when I click sort by name button.
Can someone please tell what might be the problem? Thanks :)
<!DOCTYPE html>
<html>
<head>
<script src="list.js"></script><meta charset=utf-8 />
<title>Existing list</title>
</head>
<body>
<script>
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>
<style>
.list {
font-family:sans-serif;
margin:0;
padding:20px 0 0;
}
.list > li {
display:block;
background-color: #eee;
padding:10px;
box-shadow: inset 0 1px 0 #fff;
}
.avatar {
max-width: 150px;
}
img {
max-width: 100%;
}
h3 {
font-size: 16px;
margin:0 0 0.3rem;
font-weight: normal;
font-weight:bold;
}
p {
margin:0;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:13px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-10px;
right:-5px;
}
</style>
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
<li>
<h3 class="name">Martina Elm</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Gustaf Lindqvist</h3>
<p class="born">1983</p>
</li>
</ul>
</div>
</body>
</html>
I am looking forward to use the list.js by Jonny. Here, in its examples, I am trying to use the same list code as given here. I copied the HTML,CSS and JS part in my code file. Also, I downloaded and saved the list.js given and pasted it in the same directory as my code file. I am using WAMP and when I open the page, the search function does not work as it works online. The table does not update dynamically and even it doesn't update when I click sort by name button.
Can someone please tell what might be the problem? Thanks :)
<!DOCTYPE html>
<html>
<head>
<script src="list.js"></script><meta charset=utf-8 />
<title>Existing list</title>
</head>
<body>
<script>
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>
<style>
.list {
font-family:sans-serif;
margin:0;
padding:20px 0 0;
}
.list > li {
display:block;
background-color: #eee;
padding:10px;
box-shadow: inset 0 1px 0 #fff;
}
.avatar {
max-width: 150px;
}
img {
max-width: 100%;
}
h3 {
font-size: 16px;
margin:0 0 0.3rem;
font-weight: normal;
font-weight:bold;
}
p {
margin:0;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:13px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-10px;
right:-5px;
}
</style>
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
<li>
<h3 class="name">Martina Elm</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Gustaf Lindqvist</h3>
<p class="born">1983</p>
</li>
</ul>
</div>
</body>
</html>
- Have you checked for errors in the browser console, or performed any other basic debugging tasks at all? – Pointy Commented Jan 16, 2014 at 15:39
-
Sure sounds like the .js file you are using isn't being loaded. Two possibilities: it's in the wrong directory, in which case the "network" tab of your developer tools will tell you where it's expected. Or, your html page isn't ever referring to the .js file in the first place, and you need to refer to it in a
<script>tag. – Scott Mermelstein Commented Jan 16, 2014 at 15:40 - I am using dreamweaver and it is not showing any errors. I am editing the question to include my whole code too.. :) – tigerden Commented Jan 16, 2014 at 15:44
- it is in the same directory as that of the above page. And BTW, I have the above page named as temp.php! Will the .php extension affect the behaviour? – tigerden Commented Jan 16, 2014 at 15:50
1 Answer
Reset to default 7The Javascript:
<script>
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>
Needs to be placed underneath the HTML (before the closing body tag), because the script needs to run after the html. Currently you have the script above the html - so it doesn't know that the markup exists yet.