I'm trying to make Create Quiz Page. there should be dynamically inputs on-page. there is no defined number of questions and a number of answers to each question. for add question, I'm using bootstrap accordion and it works. after click add question it appends new accordion and inputs inside. but in a second-level load more after button click, nothing happens. also, I want dynamically add answers. I'm using same logic. after #question click I creating HTML element ad trying to append inside answersAccordion.
jQuery click event not working.
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
let _html = '';
_html+='<div class="card">';
_html+='<div class="card-header" id="heading'+next+'">';
_html+='<h5 class="mb-0">';
_html+='<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+next+'" aria-expanded="true" aria-controls="collapse'+next+'">';
_html+='Quiz question: '+next;
_html+='</button>'
_html+='</h5>';
_html+='</div>';
_html+='<div id="collapse'+next+'" class="collapse" aria-labelledby="heading'+next+'" data-parent="#accordion">';
_html+='<div class="card-body">';
_html+='<input form="myform" type="text" name="questions[][question]">'
_html+='<input form="myform" type="file" name="questions[][image]">'
_html+='<div class="col-md-3">';
_html+='<button id="question" name="add-question" class="btn btn-primary">Add Question</button>'
_html+='<div id="answersAccordion">';
_html+='</div>';
_html+='</div>';
_html+='</div>'
_html+='</div>'
_html+='</div>'
$('#accordion').append(_html);
next+=1;
});
$("#question").click(function(e){
console.log(12121)
let _html = '';
_html+='<div class="ml-5">'
_html+='<input type="text" name="questions[][answers][][title]">';
_html+='<textarea name="questions[][answers][][description]"></textarea>';
_html+='<input type="file" name="questions[][answers][][image]" ';
_html+='</div>'
$(this).next().append(_html);
console.log($(e))
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-md-12">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
<form id="myform" method="post" action="post.php" enctype="multipart/form-data">
<button>send</button>
</form>
<div class="col-xs-12">
<div class="col-md-12" >
<h3> Actions</h3>
<div id="accordion">
</div>
</div>
</div>
</body>
</html>
console.log not working also
in the console, there is no error
There is other way to make the code better and cleaner.
I hope it helps.
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
let _html = `
<div class="card">
<div class="card-header" id="heading ${next}">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-${next}" aria-expanded="true" aria-controls="collapse-${next}">
Quiz question: ${next}
</button>
</h5>
</div>
<div id="collapse-${next}" class="collapse" aria-labelledby="heading ${next}" data-parent="#accordion">
<div class="card-body">
<input form="myform" type="text" name="questions[][question]">
<input form="myform" type="file" name="questions[][image]">
<div class="col-md-3">
<button id="question" name="add-question" class="btn btn-primary add-question-${next}">Add Question</button>
<div id="answersAccordion">
</div>
</div>
</div>
</div>
</div>
`;
$('#accordion').append(_html);
$(`.add-question-${next}`).click(function(e){
let _html = `
<div class="ml-5">
<input type="text" name="questions[][answers][][title]">
<textarea name="questions[][answers][][description]"></textarea>
<input type="file" name="questions[][answers][][image]"
</div>
`;
$(this).next().append(_html);
});
next+=1;
});
});
Related
i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.
I'm trying to make a relatively simple JavaScript file that allows me to click one of 5 buttons and information is revealed on the screen. Currently, I have it working a single reveal but the others do not appear.
Simply put the goal would be to have it so that if I click "Selection 1" then the text "test 1" would appear, "Selection 2" and "test 2", so on and so on...
Any help would be much appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4, from LayoutIt!</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 card">
<div class="row">
<div class="col-md-2">
<h3>
1
</h3>
</div>
<div class="col-md-10">
<h3 class="text-center">
Choose Your Selection
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button1" class="btn btn-success btn-lg btn-block">
Selection #1
</button>
<button type="button2" class="btn btn-success btn-lg btn-block">
Selection #2
</button>
<button type="button3" class="btn btn-success btn-lg btn-block">
Selection #3
</button>
<button type="button4" class="btn btn-success btn-lg btn-block">
Selection #4
</button>
</div>
</div>
</div>
<div class="col-md-6 card">
<div class="row">
<div class="col-md-2">
<h3>
2
</h3>
</div>
<div class="col-md-10">
<h3 class="text-center">
Choose Your Option
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p id="select1" class="select">test 1</p>
<p id="select2" class="select">test 2</p>
<p id="select3" class="select">test 3</p>
<p id="select4" class="select">test 4</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script type="text/javascript"> var tag = document.getElementById('select1'); var button = document.querySelector('button[type="button1"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
<script type="text/javascript"> var tag = document.getElementById('select2'); var button = document.querySelector('button[type="button2"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
<script type="text/javascript"> var tag = document.getElementById('select3'); var button = document.querySelector('button[type="button3"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
<script type="text/javascript"> var tag = document.getElementById('select4'); var button = document.querySelector('button[type="button4"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
</body>
</html>
.container-fluid {
width:40%;
padding: 50px 0;
}
.card {
background-color: rgb(24, 26, 27);
border-top-color: rgba(102, 102, 102, 0.13);
border-right-color: rgba(102, 102, 102, 0.13);
border-bottom-color: rgba(102, 102, 102, 0.13);
border-left-color: rgba(102, 102, 102, 0.13);
border-radius: 20px;
padding: 20px;
border: 5px solid;
}
body {background-color: #000;}
.select {display:none;}
.selecton {display: block;}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 card">
<div class="row">
<div class="col-md-2">
<h3>
1
</h3>
</div>
<div class="col-md-10">
<h3 class="text-center">
Choose Your Selection
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button1" class="btn btn-success btn-lg btn-block" data-btn='btn-1'>
Selection #1
</button>
<button type="button2" class="btn btn-success btn-lg btn-block" data-btn='btn-2'>
Selection #2
</button>
<button type="button3" class="btn btn-success btn-lg btn-block" data-btn='btn-3'>
Selection #3
</button>
<button type="button4" class="btn btn-success btn-lg btn-block" data-btn='btn-4'>
Selection #4
</button>
</div>
</div>
</div>
<div class="col-md-6 card">
<div class="row">
<div class="col-md-2">
<h3>
2
</h3>
</div>
<div class="col-md-10">
<h3 class="text-center">
Choose Your Option
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p id="select1" class="select">test 1</p>
<p id="select2" class="select">test 2</p>
<p id="select3" class="select">test 3</p>
<p id="select4" class="select">test 4</p>
</div>
</div>
</div>
</div>
</div>
remove button type as "button1"
it must be only "button"
js:
var buttons = document.querySelectorAll('.btn-block');
buttons.forEach(function(button, index){
button.addEventListener('click', function(){
if(button.dataset.btn===`btn-${index}`){
document.getElementById(`select${index}`).classList.toggle('selecton');
}
});
});
You should do something like this:
<script>
$(() => {
$("button[type='button1']").on("click", () => {
$("#select1").toggleClass("selecton");
})
$("button[type='button2']").on("click", () => {
$("#select2").toggleClass("selecton");
})
$("button[type='button3']").on("click", () => {
$("#select3").toggleClass("selecton");
})
$("button[type='button4']").on("click", () => {
$("#select4").toggleClass("selecton");
})
})
</script>
There are many rooms for improvement with the code above. But one step at a time anyway.
So I have this code, I am trying to make the login/register buttons to hide the buttons once clicked, they instead flash (hide and quickly come back).
I am new to web development in general so I may be doing something stupid
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--CSS-->
<link rel="stylesheet" href="Login.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="jumbotron">
<!--Login/Register Tabs-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
<li><a data-toggle="tab" href="#registerTab">Register</a></li>
</ul>
<!--Tabs Content-->
<div class="tab-content">
<div id="loginTab" class="tab-pane active">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="loginUsernameText" type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="loginPasswordText" type="password" class="form-control" placeholder="Password">
</div>
<button id="loginButton" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div id="registerTab" class="tab-pane fade">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="registerUsernameText" type="text" class="form-control" placeholder="Username (3-24 Char)">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="registerPasswordText" type="password" class="form-control" placeholder="Password (3-24 Char)">
</div>
<button id="registerButton" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
</div>
<!--Scripts-->
<script src="Login.js" type="text/javascript"></script>
</body>
</html>
Login.js written with jquery
$('#loginButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
$('#registerButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
Any help is appreciated
SOLVED: settings attribute type="button" for the buttons saved my life, thanks for help!
try the following :
1) Add type="button" attributes to your buttons, might save you from some cases where buttons in form act as submits unless stated as of type=button.
2) Rewrite to the following
var registerButton = $('#registerButton');
var loginButton= $('#loginButton');
function hideButtons(){
registerButton.hide(); // or add your custom class here
loginButton.hide(); // or add your custom class here
return false; // avoid bubling
}
loginButton.on('click',function () {
hideButtons();
});
registerButton.on('click',function () {
hideButtons();
});
Tell me if it worked
I am building a Reddit clone. So far you are able to add links, upvote/down vote, and comment/remove comments on the links posted. You must be logged in via Twitter to add comments or posts.
The big issue I am facing is whenever a post has comments, they do not show up if you reload the website. You must add a new comment to see comments which are already present. The next big issue is if you add a new post it will automatically inherit the comments from the previously commented on post even though these comments are not in the posts data on the Firebase Server.
If you comment on the new post it causes all the other post's comments to inherit the new comment on the new post.
Here is the source code.
<div>
<span>Currently Logged in as: {{authData.twitter.username}}</span>
<form>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Post Name</label>
<input type="text" ng-model="post.name" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Description</label>
<input type="text" ng-model="post.description" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">URL</label>
<input type="text" ng-model="post.url" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div ng-repeat="post in posts">
<h2><a ng-href="{{post.url}}">{{post.name}}</a></h2>
<p>{{post.description}}</p>
<button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button>
<span>{{post.votes}}</span>
<button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button>
<button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button>
<br>
<br>
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-body">
<a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a>
</div>
<div class="panel-footer">
{{comment.text}}
<br>
<button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button>
</div>
</div>
<form>
<div class="input-group">
<input ng-model="comment.text" class="form-control">
<div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div>
</div>
</form>
</div>
<br>
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>
<!--Starter Project for the Reddit Clone-->
<!doctype html>
<html ng-app="reddit-clone">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="app.js"></script>
<title>Reddit Clone</title>
</head>
<body style="width: 80%; margin: 0 auto">
<h1 class="text-center">Reddit Clone</h1>
<div ng-view></div>
</body>
</html>
Here is a picture of the database showing that the comment only exists for the first post.
Here is a picture showing how the comment is display on both posts even though it is only in one in the database.
You are storing only one comments array on your $scope.
Then in your template, you are looping over this one array for each post inside the ng-repeat on posts, hence it is the same for both posts. You need to loop over the comments that are specific to a post instead. Like so:
<div class="panel panel-default" ng-repeat="comment in post.comments">
Notice the post.comments.
The jquery file doesn't seem to be linking with my html code. The jquery file is suppose to validate the inputs and add the respective glyphicons depending on the validation. I have tried searching for errors, closing tags but can't find any problem. Could anyone please check and point me in the right direction. Thanks in advance.
//validate.js
function validateText(id) {
if ($("#" + id).val() == null || $("#" + id).val() == "") {
var div = $("#" + id).closest("div");
div.removeClass("has-success");
$("#glypcn" + id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return false;
} else {
var div = $("#" + id).closest("div");
div.removeClass("has-error");
div.addClass("has-success has-feedback");
$("#glypcn" + id).remove();
div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return true;
}
}
$(document).ready(function() {
$("#loginbtn2").click(function() {
if (!validateText("#USN")) {
return false;
}
if (!validateText("#Password2")) {
return false;
}
$("form#students_form").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="/WP Project/image/png" href="/bmsce.png">
<title>BMS Login Page</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style>
.one:hover {
color: red;
}
.modal-backdrop {
z-index: -1;
}
h4 {
cursor: pointer;
}
</style>
</head>
<body>
<h4 data-toggle="modal" data-target="#modal">
LOGIN
</h4>
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close one" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="ModalLabel">
<div align="center">
<img src="/WP Project/bmsce.png" width="150px" height="150px" />
</div>
</div>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a class="btn btn-danger" data-toggle="tab" href="#students">Students</a>
</li>
</ul>
<br />
<div class="tab-content">
<div class="tab-pane active" id="students">
<div class="well">
<form role="form" action="" id="students_form" method="post">
<div class="form-group">
<label class="control-label" for="USN" id="students_form">Username</label>
<div class="input-group">
<input type="text" class="form-control" id="USN" placeholder="Enter USN" name="username" size=30 aria-describedby="PasswordStatus" />
</div>
</div>
<div class="form-group">
<label for="Password2">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="Password2" placeholder="Password" name="password" size=30 />
</div>
</div>
<hr />
<p>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-arrow-left"></span>Back</button>
<button type="button" class="btn btn-primary" id="loginbtn2"><span class="glyphicon glyphicon-lock"></span>Sign in</button>
<br />
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="validate.js"></script>
<script>
$(document).ready(function() {
$('#modal').modal({
backdrop: 'static',
keyboard: false,
show: false
});
});
</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
You have included two jQuery versions in the one HTML file. Remove the
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> From above your DocType declaration
You seem to be loading two different versions of jquery in the same page:
jquery-2.1.3.min.js
jquery/2.1.1/jquery.min.js