hello people,
i am pretty new at this and i have a first project using express js and
html, css and javascript.
i have a row of divs with columns and i would like to update them with data
from the database once the page is uploaded.
i really don't know how to go about it. i have read through AJAX, socket.io
and still can't figure it out.
i am successfully rendering the html pages via express.
i need help out on the missing link to get my html divs updated with the
data from mongodb
any help will be appreciated.
in my views and public folder my html, css, javascript. how do i create a
connector to talk with html and give it the data from express js? thank u
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="/javascript/index.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="container">
<form action="">
<div id="bodydiv" > <div id="leftdiv" > <script type="text/javascript" >
multidivs();</script></div>
</div>
</form>
</div>
</div>
</body>
</html>
css
Enter code here...
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
.comp1
{
margin-left: 20px;
}
.comp2
{
margin-left: 30px;
}
.comp3
{
margin-left: 25px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
.comp
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:100px;
margin-top: 10px;
}
.comp5
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:20px;
margin-top: 10px;
}
.comp6
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:10px;
margin-top: 10px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid
border-color: green;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:80vh;
height:75vh;
float:left;
/* border-width: 4px;
border-style: solid;
border-color: yellow;*/
}
.innerdiv
{
align-content: center;
align-self: center;
width:80vh;
/* height:20vh;*/
background-color: gray;
border-width: 1px;
border-style: solid;
display:inline-block;
border-color: black;
}
#tabDiv
{
/* align-content: center;
align-self: center;*/
width:80vh;
/* height:20vh;
background-color: gray;*/
/* border-width: 1px;
border-style: solid;
border-color: black;*/
display:inline-block;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:20vh;
height:15vh;
margin-top:2vh;
display:inline-block;
margin-left:1vh;
}
.arrowdiv
{
width:8vh;
height:19.8vh;
margin:0vh;
line-height: 1vh;
vertical-align: middle;
background-color:#131212;
display:inline-block;
float:left;
}
.ccontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: red;
display:inline-block;
}
.rcontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: beige;
text-align: center;
display:inline-block;
}
.imgdiv
{
margin-top: 50px;
margin-left: 10px;
width:20px;
height:20px;
}
/*div on mouseover*/
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
.popup
{
width:145px;
height:40px;
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
/* border-width: 2px;
border-style: solid;
border-color: green;*/
}
.col1
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-right:1px solid white;
/* border-width: 2px;
border-style: solid;
border-color:black;*/
}
.col2
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-left: 1px solid white;
}
.col4
{
width:20px;
height:30px;
margin-bottom: 3px;
margin-top: 5px;
text-align: center;
display: inline-block;
}
.img{
max-width:180px;
}
its javascript file
var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var
columnnames=["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles
for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
var rows=100;
var col = 4;
for( x=0; x<rows;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(var i=0; i<col; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
var socket =io();
socket.on('content', function(msg){
console.log(msg);
document.getElementById("content").innerHTML=msg;
})
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
// alert("total rows"+x);
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);
domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);
columndiv.appendChild(popup);
}); }
function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
}); }
}
--
Job board: http://jobs.nodejs.org/
New group rules:
https://gist.github.com/othiym23/9886289#file-moderation-policy-md
Old group rules:
https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
---
You received this message because you are subscribed to the Google Groups
"nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/nodejs/a2bdc1aa-b843-40dc-b842-a0aa64acfe82%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
