We Keep Coding

How to Add an Expand All button to a javascript/HTML project

I currently have a page that has content that expands when you click on a term, but as soon as you click on a new term the old one closes and the new one expands. The terms are loaded in from a google sheet onto the page. This is on a HTML page but the javascript code to do the work is the following:
// Address of the Google Sheets Database
var public_spreadsheet_url = 'sheet link here';
// Column Names from Google Sheets Database
let questionsColumn = "Question";
let answersColumn = "Answer";
window.addEventListener('DOMContentLoaded', init) // Calls method init when Sheets has loaded
function init() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true } );
}
var unhiddenAnswer = "";
// Method that gets called when data has been pulled from Google Sheets
function showInfo(data) {
var editButton = '<center><a style="border-bottom: none" href="' + public_spreadsheet_url + '"><button class="button admin">Edit</button></a></center>';
// Injects the built HTML code into the div Dynamic
document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}
// Builds the HTML Table code from the Database Data
function buildFAQTable(data) {
var index = 0;
var content = '<h2>Title Here</h2><div style="padding:0px 5%">';
data.forEach(form => {
content += '<h1 class="faq_question" onClick="unhideAnswer(' + index + ')">' + data[index][questionsColumn] + '</h1>';
content += '<p id="answer' + index + '" class="hideAnswer">' + data[index][answersColumn] + '</p>';
index++;
});
// Extends body to accomdate for tall footer on very small devices (e.g. iPhone 5/5S/SE)
content += "<br></br><br></br>";
return content;
}
// When a FAQ Question gets clicked on, this method will hide the currently displaying answer (if any), and
// Unhide the answer corresponding to the clicked on answer.
// If the currently displaying answer is the same as the answer corresponding to the clicked on question,
// it will be hidden and no new answer will be unhidden
function unhideAnswer(number) {
var answerID = "answer" + number;
if (answerID != unhiddenAnswer) {
document.getElementById(answerID).classList.remove("hideAnswer");
}
if (unhiddenAnswer != "")
document.getElementById(unhiddenAnswer).classList.add("hideAnswer");
if (unhiddenAnswer == answerID)
unhiddenAnswer = ""
else
unhiddenAnswer = answerID;
}
I want to now add an expand all/ collapse all button to give the user the option to open and view all the terms at one if needed. However, if not using the expand all button, the regular open and close functionality above should be used. I am new to javascript and am at a loss on the best way to implement this. Any help would be appreciated.

add a answer class to every answer, then you can loop through all of them with this query selector
// in your buildFAQTable fucntion
content += '<p id="answer' + index + '" class="hideAnswer answer">' + data[index][answersColumn] + '</p>';
document.querySelectorAll('.answer').forEach(answer => {
// you can use toggle, add or remove to change the appearance of the answer
answer.classList.toggle('hideAnswer')
})
i would also recomend you to check out some of the newer javascript features like string interpolation and avoid using var, but it is not so important if you are just starting out.
(i also refactored some of your code, this might make it a bit more readable)
// Address of the Google Sheets Database
const public_spreadsheet_url = 'sheet link here';
// Column Names from Google Sheets Database
const questionsColumn = "Question";
const answersColumn = "Answer";
function toggleAnswer(num) {
const answer = document.getElementById(`answer${num}`);
answer.classList.toggle('hideAnswer');
}
function hideAll() {
document.querySelectorAll('answer').forEach(answer => {
answer.classList.add('hideAnswer');
})
}
function showAll() {
document.querySelectorAll('answer').forEach(answer => {
answer.classList.remove('hideAnswer');
})
}
function buildFAQTable(data) {
let index = 0;
let content = '<h2>Title Here</h2><div style="padding:0px 5%">';
for (i in data) {
content += `<h1 class="faq_question" onClick="unhideAnswer(${i})">${data[i][questionsColumn]}</h1>`;
content += `<p id="answer${i}" class="hideAnswer answer">${data[i][answersColumn]}</p>`;
}
content += "<br></br><br></br>";
return content;
}
function showInfo(data) {
const editButton = `<center><a style="border-bottom: none" href="${public_spreadsheet_url}"><button class="button admin">Edit</button></a></center>`;
document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}
window.addEventListener('DOMContentLoaded', () => {
Tabletop.init({
key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true
});
}, { once: true })

How do I launch a site on Chrome/Firefox by pressing a key or preferably 2 keys

I have this keyboard site launcher script, which I copied from some place years ago and it works fine as is. I want to enhance it by adding a cascading keypress launch for some of the keys. Here is my code:
<html><head>
<script language="JavaScript">
<!-- Begin
var key = new Array();
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "https://slashdot.org";
key['y'] = "http://www.yahoo.com";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
// alert('['+which+'] key \n has been stroke');
runUrl(which);
}
function runUrl(which) {
for (var i in key)
if (which == i) {window.location = key[i];}
}
document.onkeypress = getKey;
// End -->
</script></head>
<body>
Make a selection<br>
<br>
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "https://slashdot.org";
key['y'] = "http://www.yahoo.com";
<br>
<br>
<!-- I solemnly swear this page is coded with vi or notepad.exe depending on the OS being used -->
</body>
</html>
Now, I want to modify the action for pressing the letter "s" to launch a submenu of sorts and ask me to select if I want to go to "Slashdot" or Spotify" for instance. like if I press an "s" second time, it goes to slashdot and if I press "f" for instance, it goes to spotify.
My problem is, I have never programmed in Javascript other than copying and pasting code and changing string values in the code, like here, changing the pressed keys and site URLs.
Any pointers, regarding how to start modifying this code, are greatly appreciated.

to be honest, the code provided is a bit outdated but I keep it so you can see the necessary changes that I made for the menu to be added and to implement the feature it's just a sketch but I will do the job I think from here you can expand, hope this puts you in the right direction
let isopenMenu = true;
const menu = document.getElementById("menu");
function toggleMenu() {
isopenMenu = !isopenMenu;
menu.style.display = isopenMenu ? "block" : "none";
}
var key = new Array();
key["a"] = "https://www.arstechnica.com";
key["g"] = "https://www.google.com";
key["s"] = "https://slashdot.org";
key["y"] = "http://www.yahoo.com";
key["b"] = "http://www.stackoverflow.com";
key["c"] = "http://www.test.com";
const menuSite = ["b", "c", "s"];
function getKey(keyStroke) {
isNetscape = document.layers;
eventChooser = isNetscape ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
runUrl(which);
}
function runUrl(which) {
for (var i in key)
if (which == i) {
if (which === "s") {
return toggleMenu();
}
if (!isopenMenu && menuSite.includes(which)) {
return;
}
window.location = key[i];
}
}
document.onkeypress = getKey;
window.addEventListener("load", toggleMenu);
<html><head>
<script language="JavaScript">
</script></head>
<body>
Make a selection<br>
<br>
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "to toggel menu
key['y'] = "http://www.yahoo.com";
<br>
<br>
<ul id="menu">
<li>key['b'] = "http://www.stackoverflow.com";</li>
<li>key['c'] = "http://www.test.com</li>
</ul>
</body>
</html>

Indeed the code you've provided seems a bit dusted. There's some stuff that isn't done in that way nowadays. Notepad is an editor I still occassionally use though.
Since you've mentioned that you never really used JavaScript it's a bit hard to give you advice. You can do things way more elegant and even improve the look - but I'd say this would just confuse you even more. So let's work on something based on your code.
At the moment the keys and the corresponding targets are stored in an object (yeah, it's an object not an array). We can use a second object - let' say subKey - to store the additional targets upon pressing s.
var key = {};
key.a = "https://www.arstechnica.com";
key.g = "https://www.google.com";
key.s = "subMenu";
key.y = "http://www.yahoo.com";
var subKey = {};
subKey.a = "https://www.stackoverflow.com";
subKey.g = "https://www.startpage.com";
subKey.s = "goBack";
As you can see I've reserved the key s to go to the sub menu and inside the sub menu this button is used to go back to the main menu.
Now instead of hardcoding what the user gets to see on screen, we can iterate over those objects and use the information from there. To do this we need to reserve a html element - I've chosen an empty <div> which acts as some sort of container. As we iterate over the object we construct a string with the keys and it's associated targets and ultimately assign this this to the div's .innerHTML property.
let container = document.getElementById("container");
container.innerHTML = "Make a selection<br><br>";
for (var i in obj) {
container.innerHTML += "key['" + i + "'] = " + obj[i] + "<br>";
}
As the procedure is the same for both objects we just need to wrap it inside a function and pass it a reference to the desired object.
Your runUrl function needs to be modified a bit to take care of the additional options. This is best done with a simple if-else construct. So in pseudo-code:
if choice is subMenu open sub menu
if choice is goBack open main menu
if it's none of the above open a link
If we put everything together, your example looks a little bit like this:
(Just click on 'Run code snippet' and make sure to click somewhere inside the window so it'll have key focus)
<html>
<head>
</head>
<body>
<div id="container">
</div>
</body>
<script type="text/javascript">
var key = {};
key.a = "https://www.arstechnica.com";
key.g = "https://www.google.com";
key.s = "subMenu";
key.y = "http://www.yahoo.com";
var subKey = {};
subKey.a = "https://www.stackoverflow.com";
subKey.g = "https://www.startpage.com";
subKey.s = "goBack";
var currentObj = key;
function getKey(event) {
let which = String.fromCharCode(event.keyCode).toLowerCase();
runUrl(which)
}
function runUrl(which) {
for (var i in currentObj) {
if (which == i) {
if (currentObj[i] != "subMenu") {
if (currentObj[i] != "goBack") {
window.location = currentObj[i];
} else {
populateMenu(key);
}
} else {
populateMenu(subKey);
}
}
}
}
function populateMenu(obj) {
currentObj = obj;
let container = document.getElementById("container");
container.innerHTML = "Make a selection<br><br>";
for (var i in obj) {
container.innerHTML += "key['" + i + "'] = " + obj[i] + "<br>";
}
}
populateMenu(key);
document.onkeypress = getKey;
</script>
</html>

It looks like could achieve this with arbitrary list of sites. If so, you could handle this a little more generically by providing a list of sites and filtering the sites based on keystrokes.
If so, you can achieve it with the following:
const sites = [
'https://www.arstechnica.com',
'https://www.google.com',
'https://mail.google.com',
'https://slashdot.org',
'https://spotify.com',
'http://www.yahoo.com',
];
let matches = sites;
document.getElementById('keys').addEventListener('keyup', event => {
const keys = event.target.value.toLowerCase().split('');
matches = sites
.map(site => ({ site, stripped: site.replace(/^https?:\/\/(www\.)?/i, '')})) // strip out https://wwww. prefix
.filter(site => isMatch(site.stripped, keys))
.map(site => site.site);
if (event.keyCode === 13) {
if (matches.length === 0) {
alert('No matches');
} else if (matches.length === 1) {
alert(`launching ${matches[0]}`);
} else {
alert('More than one match found');
}
matches = sites;
}
document.getElementById('matches').textContent = matches.join(', ');
});
// find sites matching keys
function isMatch(site, keys) {
if (keys.length === 0) return true;
if (site.indexOf(keys[0]) !== 0) return false;
let startIndex = 1;
for (let i = 1; i < keys.length; i++) {
let index = site.indexOf(keys[i], startIndex);
if (index === -1) return false;
startIndex = index + 1;
}
return true;
}
document.getElementById('matches').textContent = matches.join(', ');
<div>Keys: <input type="text" id="keys" autocomplete="off" /> press Enter to launch.</div>
<p>Matches: <span id="matches" /></p>
The key parts to this are:
Define a list of sites you want to handle
Ignore the the https://wwww prefixes which is achieved with site.replace(/^https?:\/\/(www\.)?/i, '')
Implement filter logic (in this case it is the isMatch method) which tries to match multiple keystrokes
For demonstration purposes, I've wired keyup to an input field instead of document so that you can see it in action, and the action is triggered with the enter/return key.

Jquery Click send doesn't work

Hi everyone i have one question about jquery click send function. I have created this demo from jsfiddle. So if you visit the demo then you can see there is one smiley and textarea. When you write some text and press enter then the message sending successfully. But i want to add also when you click the smiley then it need to send (w1) from the image sticker="(w1)" like click to send. But click send function doesn't work. What is the problem on there and what is the solution ? Anyone can help me in this regard ?
JS
$('.sendcomment').bind('keydown', function (e) {
if (e.keyCode == 13) {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("Plese write your comment!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
}
});
/**/
$(document).ready(function() {
$('body').on("click",'.emo', function() {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("nothing!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
});
});
$('body').on('click', '.sm-sticker', function(event) {
event.preventDefault();
var theComment = $(this).parents('.container').find('.sendcomment');
var id = $(this).attr('id');
var sticker = $(this).attr('sticker');
var msg = jQuery.trim(theComment.val());
if(msg == ''){
var sp = '';
} else {
var sp = ' ';
}
theComment.val(jQuery.trim(msg + sp + sticker + sp));
});
HTML
<div class="container one">
<div class="comments-area" id="commentload47">comments will be come here</div>
<div class="user-post" id="postbody47">
<textarea class="sendcomment" name="comment" id="commentid47" data-msgid="47"></textarea>
<div class="stiemo">
<img src="http://d.lanrentuku.com/down/png/1009/networking/emoticon_inlove.png" class="sm-sticker emo" sticker="(w1)"> click smiley to send (w1)</div>
</div>
</div>
</div>

try this :
just append below JS after the line theComment.val(jQuery.trim(msg + sp + sticker + sp));
var e = $.Event("keydown");
e.keyCode = 13; // # Some key code value
$('.sendcomment').trigger(e);
Demo

you should use this:
$('body').on("click",'.emo', function() {
var ID = $('.sendcomment').attr("data-msgid");
var comment = $('.sendcomment').val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("nothing!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
});
so basically instead of this you have to use input and get msgid and val from there, use same approach for rest.
So when you are attaching event on some button and you want to use data from some other dom element you have to get that element by using $(selector) under your delegated function, really simple approach.

JSF Extended Datatable Sorting and Filtering

I have a extended datatable, RICHFACES 3.3.3 with sorting and filtering enabled. The table is rendered dynamically. Based on the requirement, I need to disable certain rows(which contain editable fields) when the table is displayed.
I have that logic written in a Javascript function rowBlur(), and call it whenever the page is displayed. Hence, when the table is loaded the required rows are disabled as expected. The problem is whenever I filter/sort the table, the disabled rows get enabled again.
Is there any way I can call the javascript function whenever filter or sort happens?
Here is the code:
HtmlExtendedDataTable dynamicDataTable = new HtmlExtendedDataTable();
dynamicDataTable.setOnkeydown("filterAllOnEnter(event)");
function filterAllOnEnter(event) {
if(event.keyCode == 13) {
jQuery(".rich-filter-input").blur();
rowblur();
return false;
} else
return true;
}
// js code////////////
<script>
function show(){
val = '${myController.mergeWorkMap}';
}
</script>
<script>
function rowblur(){
for(var i=0;i<7;i++){
var firstCol = "myForm:dynamicTable:"+i+":col0" ;
var secondCol = "myForm:dynamicTable:"+i+":col1" ;
var merge =document.getElementById(firstCol).textContent;
var work =document.getElementById(secondCol).textContent;
var obj = JSON.parse(val).mergeWorkMap;
if(!(work == obj[merge])){
var col3 = "myForm:dynamicTable:" + i + ":col3";
var col4 = "myForm:dynamicTable:" + i + ":col4";
var col5 = "myForm:dynamicTable:" + i + ":col5";
var col6 = "myForm:dynamicTable:" + i + ":col6";
document.getElementById(col3).disabled = true;
document.getElementById(col4).disabled = true;
document.getElementById(col5).disabled = true;
document.getElementById(col6).disabled = true;
}
}
}
</script>
The rowblur() won't work properly on filtering, and on sorting the columns it won't work at all.

Additional function execution after upgrading jquery to 1.6.1

I initially wrote a small ajax-based settings page for an online support system i developed, using jQuery 1.4.2 and it worked fine. However, after upgrading to 1.6.1, additional executions are being called to the functions that were only ever called once previously.
I have three menu options, each with an onclick event to load a specific page into the #settingsph div. Additional code is then called depending on the page in question. (The apache server automatically assumes .php file ext are to be used if none are defined)
function open_page(name) {
$("#settingsph").load("/includes/support/stg/"+name, function(){
if(name == "managecontacts"){
$("#contactselect").load("/includes/support/stg/contactsel");
}else if(name == "changepw"){
$(change_pw(), "changepw_box");
}else if(name == "editcompany"){
$(company_update(), "#company_update");
}
});
}
Once loaded, a select box is presented to users, to select a contact to edit. Onchange, the following function is called.
function open_contact(id) {
$("#contact_info").load("/includes/support/stg/editcontact?id="+id);
if(id != "NewContact") {
$(contact_update(), "#contact_update");
}else{
$(contact_add(), "#contact_add");
}
}
Let's assume the user has decided to edit their contact information (all 3 update pages use roughly the same function, but with the variables changed to reflect the page it took information from).
function contact_update() {
$('input.text-input').css({backgroundColor:"#ffffe0"});
$('input#ldate').live('focus', function(){
$(this).datepick({dateFormat: 'dd/mm/yy'});
});
$("input.text-input").live('focus', function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$("input.text-input").live('blur', function(){
$(this).css({backgroundColor:"#ffffe0"});
});
$('.error','#contact_info').hide();
$(".buttonupd").live('click', function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var forename = $("input#forename").val();
if (forename == "") {
$("label#forename_error").show();
$("input#forename").focus();
$('input#forename').css({border:"solid #aa0000"});
}else{
$('input#forename').css({border:""});
}
var surname = $("input#surname").val();
if (surname == "") {
$("label#surname_error").show();
$("input#surname").focus();
$('input#surname').css({border:"solid #aa0000"});
}else{
$('input#surname').css({border:""});
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
$('input#phone').css({border:"solid #aa0000"});
}else{
$('input#phone').css({border:""});
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
$('input#email').css({border:"solid #aa0000"});
}else{
$('input#email').css({border:""});
}
if((forename == "") || (surname == "") || (phone == "") || (email == "")){
return false;
}
var contactid = $("input#contactid").val();
var jobtitle = $("input#jobtitle").val();
var site = $("select#site option:selected").val();
var mobile = $("input#mob").val();
var ldate = $("input#ldate").val();
var loginallowed = $("input[name='loginallowed']:checked").val();
var editaddress = $("input[name='editaddress']:checked").val();
var editcontacts = $("input[name='editcontacts']:checked").val();
var editcompany = $("input[name='editcompany']:checked").val();
var lognewissue = $("input[name='lognewissue']:checked").val();
var viewallissues = $("input[name='viewallissues']:checked").val();
var viewchangelog = $("input[name='viewchangelog']:checked").val();
var viewdownloads = $("input[name='viewdownloads']:checked").val();
var newissuenotify = $("input[name='newissuenotify']:checked").val();
var closeissuenotify = $("input[name='closeissuenotify']:checked").val();
var changelognotify = $("input[name='changelognotify']:checked").val();
var viewsitehardware = $("input[name='viewsitehardware']:checked").val();
var viewcompanyhardware = $("input[name='viewcompanyhardware']:checked").val();
var dataString = 'contactid=' + contactid + '&forename=' + forename + '&surname=' + surname + '&jobtitle=' + jobtitle + '&site=' + site + '&email=' + email + '&phone=' + phone + '&mob=' + mobile + '&ldate=' + ldate + '&loginallowed=' + loginallowed + '&editaddress=' + editaddress + '&editcontacts=' + editcontacts + '&editcompany=' + editcompany + '&lognewissue=' + lognewissue + '&viewallissues=' + viewallissues + '&viewsitehardware=' + viewsitehardware + '&viewcompanyhardware=' + viewcompanyhardware + '&viewchangelog=' + viewchangelog + '&viewdownloads=' + viewdownloads + '&newissuenotify=' + newissuenotify + '&closeissuenotify=' + closeissuenotify + '&changelognotify=' + changelognotify;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/includes/support/stg/contactupd",
data: dataString,
success: function() {
$('#contact_update').html("<div id='contact_upd_msg'></div>");
$('#contact_upd_msg').html("<h2>Contact Successfully Updated</h2>")
.append("<p>Thank you.</p>")
.hide()
.fadeIn(1500, function() {
$('#contactselect').html("")
$("#contactselect").load("/includes/support/stg/contactsel");
});
}
});
return false;
});
}
The first time the function is executed, it is called only once and appears to be fine. However, if the above function is called a second time to perhaps update another contact, two requests are sent, updating the information twice and refreshing the select box with a list of contacts in twice. If the above function is called a third time, three requests are sent and so on until the page is completely refreshed. I reverted back to 1.4.2 and these functions are only ever executed once, regardless of how many times they're called without a page refresh.
The .live() method was introduced to me here on SO when i first wrote the system and worked well at the time since the .buttonupd does not exist in the DOM when the settings.php page is loaded, is this my problem?

As was mentioned in the comment, you shouldn't be attaching events within a function which could be called multiple times. Each time you call live within that function you are attaching a new event handler. That's why if that method gets called 3 times, triggering the event will cause the handler to run 3 times.
Here is a stripped down example:
http://jsfiddle.net/N78MX/
Notice that every time you click, the number of words added increases by one. This is because each click calls live and attaches another handler.
You can fix this by simply moving all of your live calls outside of your function. Since you are using live it is fine to call it prior to the elements in question being created. So the stripped down example becomes this:
http://jsfiddle.net/N78MX/1
and it works no matter how many times you click. (obviously if this were a real page I would combine those two live calls, but this is just for illustration).