update html (with embedded javascript file) file with data from mongodb database using express js

10 views

Skip to first unread message

Kelly Blue

unread,

Dec 29, 2017, 1:32:50 PM12/29/17

to nodejs

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>

 cssEnter 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);
});   }
                 
       
}

Reply all

Reply to author

Forward

0 new messages