jQuery append adds more than one item - javascript

I'm trying to create a div automatically when clicking on a button, I have an issue here, for each time I click on the button its incremented the display of the div. Could you please help with this
$(document).ready(function() {
$("#btn2").click(function() {
$("div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>
I followed your suggestion and test it in my own code but I still have the same issue
please find below my code
JavaScript
function DisplayOffer(){
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
$('#row').append('<p id=aaa>'+ value_button + '</p>');
});
}
In my JS I have 4 buttons, when I click on a button it should create two new div for each one i'll display a name of the button and a description for the first step I just wanted to display the buttons's name but it is displayed wrong ( not one time only like I told you in the beginning of my question )
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button></div>';
HTML :
<div class="container" id="id_div_hide">
<div id="row" class="chattt col-sm-3 col-sm-offset-4 frame a">
<div id="test_id"></div>
<div id="output" class="ma"> </div>
<div id="outputh2" class="output2"></div>
<div id="outputh3" class="output3"></div>
</div>
<div id="az1" class="text text-r az1_class" style="background:whitesmoke !important">
<input id="input" class="mytext" placeholder="Type a message" />
</div>
</div>
Full JS :
var me = {};
me.avatar = "https://lh6.googleusercontent.com/-lr2nyjhhjXw/AAAAAAAAAAI/AAAAAAAARmE/MdtfUmC0M4s/photo.jpg?sz=48";
$('#outputh2').hide();
$('#outputh3').hide();
var timedQuestion=0;
var questionNum = 0;
var question = '<div class="text-chat1">Bonjour cher client, moi c est Djezzy bot, tu t appelles comment?</h1></div>';
var output = document.getElementById('output');
output.innerHTML = question;
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button><div id="zmar"></div></div>';
setTimeout(timedQuestion, 2000);
console.log("num question est :"+ questionNum);
}
function DisplayOffer(){
var date = formatAMPM(new Date());
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
//$('#row').append( value_button);
$('#row').append('<span class=aaa>'+value_button+ '</span>');
});
}
// to get the time
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
// to hide and display the chat
function toggle_div(img, id) {
var div = document.getElementById(id);
if(div.style.display=="none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
$(document).keypress(function(e) {
if (e.which == 13) {
bot();
questionNum++;
}
});
CSS :
.chat{
background-color:#fff4f6;
overflow-y:scroll;
width: 280px;
height: 370px;
position: fixed;
//float:right;
bottom: 0px;
right: 0px;
}
.title1{
font-size: 12px;
color: #183f88;
}
.btn_hdwm1{
padding-left: 20px;
padding-right: 15px;
border-radius: 8px;
padding-bottom: 5px;
background: #e11e26;
color: #fff;
}
.btn_hdwm{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
//color: #06c5a6;
color:#c52206;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
//border: 1px solid rgba(6,153,184,0.3);
border: 1px solid rgba(184, 6, 6, 0.3);
}
.mytext{
border:0;padding:10px;background:whitesmoke;
position: fixed;
/*margin: 10px;*/
height: 4%;
width: 15%;
/*margin: 67px 0px 0px -57px;*/
margin: 5px 0px 0px -11px;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:372px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:32px;
display:flex;
flex-direction: column;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
.a{
/*margin-top: 199px;*/
float: right;
}
.boutonHourely{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
color: #06c5a6;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(6,153,184,0.3);
}
.text_chat1{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
}
#output{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
.bt{
width: 30px;
}
.output:before {
width: 0;
height: 0;
content: "";
top: -5px;
left: -14px;
position: relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.logo-bule{
width: 50px;
height:50px;
border-radius: 40px;
/*float: right;*/
position: fixed;
right: 6%;
bottom: 0px;
}
.logo-bule:after{
/* position:relative;
float:right;
bottom:0px;*/
}
.chattt{
margin-top: 6.3%;
overflow-y: scroll;
}
.output2,.output4,.output5, .output7, .output9, .aaa{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output3{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
.output5{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output6, .output8, .output10{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
Thank you

The problem with this approach is, the inserted element is also <div>. Give a unique way of identification for the master <div>.
$("#btn2").click(function(){
$("body > div").append("<div>Appended item</div>");
});
For this current example, I have used body > div selector, as the <div> is directly under <body>. The better way is to use a class for the <div> and use this way:
<div class="master"></div>
$("#btn2").click(function(){
$(".master").append("<div>Appended item</div>");
});
Full Code
$(document).ready(function() {
$("#btn2").click(function() {
$("body > div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>

Related

How to show 1 form at a time on a page using JavaScript

I'm creating lists which contain cards that are created by the user via forms.
The issue that I'm having here is that I want to show only 1 add-item-form form * on the page at a time (Not 1 form in each list but 1 form on the page overall). So, If a user creates multiple lists, then opens a form by clicking on the Add a card button, and then goes and click on another Add a card button from another list on the page, the first form should disappear, and a new form should appear in the list that it was clicked. Right now, multiple forms are being shown in different lists when I click the Add a card button, especially whenever I create multiple lists.
So basically, whenever Add a card is clicked, if a form is already open somewhere else, it will be closed and a new form will be opened within the list that I clicked the Add a card button.
I hope my explanation is useful. A sample of the code is shown below.
Here's a link to the code on [Codepen][https://codepen.io/Joanc/pen/MZjJvy]1.
Your help will be appreciated.
ATTENTION: I only want to change the cards form with class add-item-form not the list form with id add-list-form. The (grey) lists are fine, my only issue is with the cards.
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->
It happens because you iterate with for loop over all add-item-form elements and add those styles. You add inline events listeners in addList() and you are not able to specify which of those elements were actually clicked, since you can't catch an event. I know how frustrating it may sound to you but I would recommend trying to write it all over again but keeping good practices. I advise you to use innerHTML as little you can, don't add inline styles to HTML in JS. Rather create classes that match your expectations like shown, hidden, style them and add them to events. Also use addEventListener instead of adding onclick() in HTML. You are really close to getting what you want, but its pretty messed up in this form.
Edit: The simplest workaround I can give you is this, but there is still much work to be done there:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
//Declaring index
var listIndex = 0
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
//Increasing index
listIndex++
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
document.getElementsByClassName('')
//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id){
// var getForm = document.getElementsByClassName("listContainer");
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form)[id].style.display == 'block'){
document.getElementsByClassName(form)[id].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[id].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->
Just add these two lines above your const list = document.createElement('div'); line inside your addList() function like this:
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
What the above does is assign the list-wrapper div to a variable called listWrap and then reset the list-wrapper div to an empty div whenever someone tries to submit a new form. After emptying the list-wrapper div, the function then proceeds to add the new "add-item-form form" submitted to the empty list-wrapper div.
Run the Code Snippet below to see how the above two lines work:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->

Alpha Vantage Json data fetch and display example

Could someone show me a code example on how to fetch data from Alpha Vantage than display it via javascript?
I'm having trouble displaying the json data.
I've come up with this code that I edited from another code I found here on stackoverflow.
I hope it helps.
var theURL = "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo";
$(document).ready(function() {
$("#stockIndicator").show();
doAjax(theURL);
$('.ajaxtrigger').click(function() {
$("#stockIndicator").show();
doAjax(theURL);
return false;
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
function doAjax(url) {
$.ajax({
url: url,
dataType: 'json',
contentType: "application/json",
success: function(data) {
var symbol = data['Meta Data']['2. Symbol']
var lastRefreshed = data['Meta Data']['3. Last Refreshed']
var lastTradePriceOnly = data['Time Series (1min)'][lastRefreshed]['4. close']
var lastVolume = data['Time Series (1min)'][lastRefreshed]['5. volume']
$('#stockSymbol').html(symbol);
$('#stockAsk').html(lastTradePriceOnly);
$('#stockVolume').html(numberWithCommas(lastVolume));
$("#stockIndicator").hide();
}
});
}
});
#stockIndicator {
text-align: left;
padding: 10px;
margin: 5px;
color: red;
}
.ajaxtrigger:hover {
cursor: pointer;
cursor: hand;
}
#stock_miniQuote_head {
background-color: #464A55;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
#stock_miniQuote {
border-bottom-color: #DDDDDD;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #DDDDDD;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #DDDDDD;
border-right-style: solid;
border-right-width: 1px;
border-top-color: initial;
border-top-style: none;
border-top-width: initial;
list-style-type: none;
margin-bottom: 10px;
padding-bottom: 0;
padding-top: 10px;
vertical-align: text-top;
height: 100%;
width: 99%;
}
.stock_divider {
border-bottom: 1px solid #B2B0AD;
padding-bottom: 5px;
}
#stock_left {
float: left;
width: 35%;
height: 50px;
border-right: 1px solid #B2B0AD;
padding: 0 15px;
}
#stock_right {
float: right;
width: *;
padding: 0 20px;
vertical-align: text-top;
}
.stock_label {
font-size: 14px;
}
.stock_strong {
font-size: 17px;
}
#stock_body {
padding: 10px 0 15px;
}
#stock_body_content {
float: left;
width: 170px;
padding: 0 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span> (common stock)</div>
<div id="stock_miniQuote">
<div id="stockIndicator">
<p>Retrieving stock information...</p>
</div>
<div class="stock_divider">
<div id="stock_left">
<span class="stock_label">Price</span><br/>
<strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
</div>
<div id="stock_right">
<span class="stock_label">Change</span><br/>
<strong class="stock_strong"><span id="stockChange"></span></strong><br />
<strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
</div>
<div style="clear: both;"></div>
</div>
<div id="stock_body">
<div id="stock_body_content">
<span class="stock_label">Volume</span><br/>
<strong class="stock_strong"><span id="stockVolume"></span></strong>
<br /><br />
<span class="stock_label">Average Daily Volume</span><br/>
<strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
<br /><br />
<span class="stock_label">52 Week Range</span><br/>
<strong class="stock_strong"><span id="stockRange"></span></strong>
</div>
<div style="clear: both;"></div>
</div>
</div>

Why is my page directing back to the login page when I press enter to add a comment

I have created an Instagram clone and all of my functionality (Like photos, add comments) is working fine when in jsbin: http://jsbin.com/tecaha/edit?js,output
For example, when I type a comment and press enter, the comment is added. However, when I copy this code into Atom and upload to my server, or use my local environment, when I press enter the page just loops back to the login.
Can someone tell me what is wrong here?
Here is the link to the page on the server http://jshuadvd.com/instagram/feed.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="top">
<ul>
<li><i class="fa fa-home fa-2x"></i>
</li>
<li id="logo">
<img src="http://i.imgur.com/SmdPZ6T.png" />
</li>
<li id="profile-photo">
<img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
<p class="username">username</p>
</li>
</ul>
</div>
</header>
<div id="container">
<main>
<div id="feed-container">
<ul id="images">
</ul>
</div>
</main>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
}
li {
list-style: none;
}
#container {
margin: 0 auto;
display: block;
}
header {
margin: 0 auto;
display: block;
background-color: #3E6D93;
height: 50px;
}
.top {
background: #467ea6;
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
background: linear-gradient(#467ea6 1%, #27608c 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
width: 100%;
}
.top li {
display: inline-block;
margin: 0 auto;
}
#home-button, .fa-home {
float: left;
background-color: #305F87;
color: #ccc;
padding: 7px;
margin-left: 200px;
width: 35px;
}
.fa-home {
padding-left: 12px;
}
#logo img {
float: right;
width: 110px;
margin-left: 400px;
padding: 6px;
}
#profile-photo {
float: right;
margin-right: 200px;
padding: 10px;
border-left: 1px solid #305F87;
border-right: 1px solid #305F87;
width: auto;
}
#profile-photo img {
width: 30px;
height: 30px;
border-radius: 5px;
}
#profile-photo p {
color: #fff;
font-weight: bold;
font-size: 14px;
text-align: center;
float: right;
margin-left: 10px;
padding: 5px;
}
#feed-container {
background-color: #DFDFDF;
width: 650px;
height: auto;
margin: 0 auto;
display: block;
}
#images {
margin: 0 auto;
display: block;
padding-top: 50px;
padding-bottom: 30px;
}
#images img {
margin: 0 auto;
display: block;
width: 550px;
height: 550px;
}
.below-image {
margin: 0 auto;
display: block;
width: 550px;
height: 52px;
background-color: #fff;
border: 1px solid #ccc;
}
.like {
float: left;
}
.fa-heart {
color: #5a5a5a;
padding: 10px;
border-right: 1px solid #ccc;
}
.liked {
color: #ff0000;
}
.image-info {
float: left;
text-align: left;
width: 437px;
height: 52px;
border-right: 1px solid #ccc;
}
.image-info p {
color: #467ea6;
font-weight: bold;
padding-top: 15px;
padding-left: 20px;
float: left;
}
.more {
float: right;
color: #5a5a5a;
}
.more, .info {
display: inline-block;
font-size: 45px;
color: #5a5a5a;
padding: 0 5px;
background-color: transparent;
border: 0;
cursor: pointer;
outline: none;
}
.clear {
clear: both;
}
.comment-container {
width: 550px;
margin-bottom: 65px;
}
.add-a-comment {
margin: 0 auto;
display: block;
background-color: #fff;
width: 550px;
height: auto;
margin-bottom: 50px;
}
.add-a-comment p {
margin: 0 auto;
display: block;
}
.add-a-comment input[type=text] {
width: 420px;
border: 1px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
background: transparent;
}
input, select, textarea{
color: #f00;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.inserted {
cursor: pointer;
}
.post-liked .fa-heart {
color: #f00;
}
.comment-click {
width: 30px;
text-align: center;
border: 1px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
background: transparent;
cursor: pointer;
float: right;
}
.comment-list {
width: 400px;
text-align: left;
}
.comment-list li{
margin-left: 20px;
color: #4f4f4f;
font-weight: 600;
padding-top: 5px;
}
.fixed-container {
height: 250px;
width: 530px;
overflow: scroll;
}
.un {
color: #467ea6;
}
JavaScript / jQuery
// Variable of html strings
var bottom = '<div class="below-image">' +
'<div class="like">' +
'<i class="fa fa-heart fa-2x"></i>' +
'</div>' +
'<div class="image-info">' +
'<p>User Info</p>' +
'</div>' +
'<div class="more">' +
'<button class="info">···</button>' +
'</div>' +
'<div class="clear"></div>' +
'</div>' +
'<div class="add-a-comment">' +
'<div class="comment-container">' +
'<form class="comment" action="index.html" method="post">' +
'<input id="enter" type="text" name="newcomment" value="" autocomplete="off" placeholder="Add a comment...">' +
'<button class="comment-click"></button>' +
'</form>' +
'<ul class="comment-list fixed-container">' +
'</ul>' +
'</div>' +
'</div>' +
'</li>' +
'</div>' +
'</div>';
// GET Request to grab the data from the JSON file
$(document).ready(function() {
var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";
$.getJSON(jsonURL, function(json) {
var imgList = "";
$.each(json, function (i) {
imgList += '<div class="post"><li><img class="inserted" src= " ' + json[i] + ' ">' + bottom;
});
$('#images').append(imgList);
// Like Photos
$('#images').on('click', '.inserted', function() {
// $('.fa-heart').toggleClass('liked');
var post_block = $(this).parents('.post').first();
post_block.toggleClass('post-liked');
});
// Add Comment
$('.comment-click').on('click', function() {
var userName = "Username";
//debugger;
//console.log("username", userName, $(userName));
var userComment = $(this).siblings('input[name=newcomment]').val();
$(this).parent().siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");
$.each($('input'), function () {
$(this).val("");
});
});
});
});
The issue you have is that the form gets submitted when the user presses the enter key, so how to fix that is to hook the onSubmit event of the form.
To make this work, you need to apply these two changes:
1. convert your button to a submit button so that clicking the button will submit the form
<button class="comment-click" type="submit"></button>
2. Hook the on submit event, which will be called either when the user presses enter or the user clicks the submit button:
$('form.comment').on('submit', function(evt) {
var userName = "Username";
// note: "this" references the <form> element!
var userComment = $(this).find('input[name=newcomment]').val();
$(this).siblings('.comment-list').append("<li>" + userName + ' ' + userComment + "</li>");
$(this).find('input[name=newcomment]').val("");
// prevents the standard behaviour
evt.preventDefault();
return false;
});
3. remove your old code i.e the $('.comment-click').on('click', function() { ...
Also you should escape the user's input to prevent HTML/JS injection:
$(this).siblings('.comment-list').append($("<li></li>").text(userName + ' ' + userComment));
You can try this by entering something like <h1>big! on your current implementation.
because your comment form's action points to index.html
your index.html asks for login: http://jshuadvd.com/instagram/index.html
<form class="comment" action="index.html" method="post">
---
---
---
</form>

How to change a dropdownlist menu to a table menu with Javascript

As what I've done, the menu was as the dropdownlist whenever mouseover. However, I would like to change it to a table menu as the image below. (I am not good at drawing so the image which I just make, is a sketch to let you amaze what I'm looking for).
Each row in the table will have 4 columns so that it would fix to 48 weeks as an example:
Week 1 | Week 2 | Week 3 | Week 4
Week 5 | Week 6 | Week 7 | Week 8
...
Week 45 | Week 46 | Week 47 | Week 48
Demo
HTML:
<ul id="out_per_chart">
<li>
<div class="yearly">
<a class="_link_year" href="/SiteAssets/OutputPerformanceChartForYear.aspx?week=48&month=12&year=2014">2014</a>
<div class="container1">
<ul class="sub-menu1">
<li>
<div class="monthly">
<div class="title">Monthly</div>
<div class="container2">
<ul class="sub-menu2"></ul>
</div>
</div>
</li>
<li>
<div class="weekly">
<div class="title">Weekly</div>
<div class="container3">
<ul class="sub-menu3"></ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
CSS:
#out_per_chart .title {
border: 2px solid #2676ac;
padding: 10px 30px;
width: 40px;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
margin-top: 20px;
}
#out_per_chart .title:hover {
border: 2px solid #259add;
cursor: default !important;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none !important;
}
.container1 {
position: absolute;
padding-left: -10px;
padding-top: -5px;
}
.container2 {
position: absolute;
margin-top: -15px;
margin-left: 50px;
}
.container3 {
position: absolute;
margin-top: -15px;
margin-left: 50px;
}
._link {
text-decoration: none;
border: 2px solid #2676ac;
padding: 7px 20px 7px 20px;
width: 30px;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._link:hover {
text-decoration: underline;
cursor: pointer;
border: 2px solid #259add;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._link_year {
text-decoration: none;
border: 2px solid #2676ac;
padding: 10px 30px;
width: 30px;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._link_year:hover {
text-decoration: underline;
cursor: pointer;
border: 2px solid #259add;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#out_per_chart li {
width: 300px;
height: 30px;
margin-bottom: 25px;
list-style-type: none;
}
#out_per_chart li.week_num, #out_per_chart li.month_num {
margin-left: 60px;
margin-top: -25px;
margin-bottom: 25px;
}
#out_per_chart .weekly {
margin-top: -10px;
}
Javascript:
$(document).ready(function () {
$(".ms-WPHeader").find(".ms-WPHeaderTd").closest("table").hide();
$(".monthly").hover(function () {
var num_week;
var num_month = 12;
var current_year = 2014;
for (i = num_month; i >= 1; i--) {
$(".sub-menu2").after("<li class='month_num'><a class='_link' href='/SiteAssets/OutputPerformanceChartForMonth.aspx?week=" + i + "&month=" + i + "&year=" + current_year + "'>Month " + i + "</a></li>");
}
},
function () {
$(".month_num").hide();
});
$(".weekly").hover(function () {
var num_week = 48;
var num_month;
var current_year = 2014;
for (i = num_week; i >= 1; i--) {
$(".sub-menu3").after("<li class='week_num'><a class='_link' href='/SiteAssets/OutputPerformanceChartForWeek.aspx?week=" + i + "&month=" + (parseInt(i / 4.01) + 1) + "&year=" + current_year + "'>Week " + i + "</a></li>");
}
},
function () {
$(".week_num").hide();
});
});
Check this Demo Fiddle.
I have updated the CSS,HTML and JS. Its tough to post all the changes here.
Main highlights:
HTML :
<table class="sub-menu2"></table>
<table class="sub-menu3"></table>
JS:
$(".monthly").hover(function () {
var num_week;
var num_month = 12;
var current_year = 2014;
$(".sub-menu2").after("<tr class='month_num'>");
for (i = num_month; i >= 1; i--) {
$(".container2").show();
if(i%4 == 0){
$(".sub-menu2").after("</tr><tr class='month_num'>");
}
$(".sub-menu2").after("<td><a class='_link' href='/SiteAssets/OutputPerformanceChartForMonth.aspx?week=" + i + "&month=" + i + "&year=" + current_year + "'>Month " + i + "</a></td>");
}
},
function () {
$(".container2").hide();
});
Similarly for Weekly.
To avoid repetition of the elements(to check if menu is existing),
if(!($(".container2").has('tr').length)){}
CSS :
#out_per_chart tr {
width: 300px;
height: 30px;
margin-bottom: 25px;
list-style-type: none;
}
ul li .yearly:hover .container1{
display:block !important;
top:26px;
left:5px;
}
.container1 {
display: none !important;
position: absolute;
}
http://jsfiddle.net/kisspa/NwV8f/3/

Custom Javascript Prompt Dialog Box (how to retrieve value and store it as var)

I frantically need your help,
The variable "x" can normally be set using the following method (default)
var x = prompt("Please enter your name:","John Smith")
I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript and have little experience in that impossible department.
Expected result:
var x = alertBox('Enter your firstname','prompt','John Smith')
Here is the HTML/CSS and Javascript Markup:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
add a return value to your alertBox() function.
function alertBox(arg1,arg2,arg3)
{
// do your stuff here
var ishallreturn = document.getElementById("ptext").value;
return ishallreturn;
}

Categories