We Keep Coding

Create div scrollable elements according to the number of elements in an String array

I'm quiet new above all on Javascript technology. I want to create various div according to the number of string into an array of checked checkboxes but after my code it only displays one div every time... I must go through a jquery dialog to display it !
My JSP
<div style="overflow: scroll;" id="listCurrentContact"></div>
My listContact.js
varPopup = $('#dialogMultiplesDeleteConfirmation').dialog({
resizable : false,
modal : true,
autoOpen : false,
width : 500,
open: function(){
var SuppressCheckboxItems = [];
// I put into an array the different value of checked checkboxes
$("input:checkbox[id=suppressCheckbox]:checked").each(function() {
SuppressCheckboxItems.push($(this).val());
});
var z = document.createElement('div');
// I suppress the ',' between each element
var test = SuppressCheckboxItems.toString();
var tab = test.split(",");
for(var i = 0; i < tab.length; i++){
z.innerHTML = tab[i];
$('#listCurrentContact').html(z);
}

Have you tried using .append instead of .html while concatenating your checkboxes to #listCurrentContact.
You can refer this document: https://www.w3schools.com/jquery/html_html.asp to see that .html() replaces the previous content with the new content whereas what you are trying to achieve here is appending the entire array of values to the div. Look at how .append() works in this link : https://www.javascripttutorial.net/javascript-dom/javascript-append/. Just to give you a brief overview, when you write a .append() on any element, it doesnot replace the previous content with the new content but instead attaches/concatenates the new content after the previous content.

You should use $('#listCurrentContact').append(z);

Thanks to SaloniMishra Ive found the good answer. It just needed to change the .html() to .append() but with that if the customer just quit the jquery dialog and retry the previous elements stayed in the div so you need to clean every elements before to relaunch the function with the function removeChild()! Thanks all !
open : function() {
var SuppressCheckboxItems = [];
const currentDiv = document.getElementById('listCurrentContact');
while (currentDiv.firstChild) {
currentDiv.removeChild(currentDiv.lastChild);
}
$("input:checkbox[id=suppressCheckbox]:checked").each(function() {
var z = document.createElement('div');
z.innerHTML = $(this).attr("name");
$("#listCurrentContact").append(z);
});

Storing variable via .text() isn't uptodate

I have <span> tags in a div that is removed when user clicks on them. Works fine.
I want to store the .text() inside that div in a variable. The problem is that the updated text doesn't get stored.
Click on a word to remove it in this jsFiddle.
As you can see, the content variable returns the old text, not the new revised one.
How can I store a variable with the updated text?
jQuery:
jQuery(document).ready(function() {
jQuery(document).on("mousedown", ".hello span", function() {
// don't add full stop at the end of sentence if it already ends with
var endChars = [".", "?", "!"];
jQuery(this).fadeOut(function(){
var parentObj = jQuery(this).parent();
jQuery(this).remove();
var text = parentObj.find("span").first().html();
parentObj.find("span").first().html(ta_capitalizeFirstLetter(text));
text = parentObj.find("span").last().html();
if ( endChars.indexOf(text.slice(-1)) == -1 )
{
parentObj.find("span").last().html(text+".");
}
});
var content = jQuery(this).parent().parent().find('.hello').text();
alert(content);
});
});

The code to get the new text should be moved inside the fadeOut callback. Once the animation is completed and element is removed, then the innerText of the parent element will be updated. At this time, the updated content should be read from the DOM.
Demo
// Cache the element
var $el = jQuery(this).parent().parent().find('.hello');
jQuery(this).fadeOut(function () {
jQuery(this).remove();
// Irrelevant code removed from here
...
var content = $el.text();
alert(content);
});
Here's another simple demo with minimal code that'll help to understand the code better.
Demo

I tried to debug your jsfiddle in chrome, and it looks like the priority of your code is like this:
declare on this event - jQuery(this).fadeOut(function(){
get the the current data of the div var content = jQuery(this).parent().parent().find('.hello').text();.
alert your data without changes.
calling the funcntion of fadeout
I think all you have to do is to call your alert and 2 from your anonymous function of fadeout

Just put your alert inside the callback:
jQuery(this).fadeOut(function(){
var parentObj = jQuery(this).parent();
jQuery(this).remove();
var text = parentObj.find("span").first().html();
parentObj.find("span").first().html(ta_capitalizeFirstLetter(text));
text = parentObj.find("span").last().html();
if ( endChars.indexOf(text.slice(-1)) == -1 ) {
parentObj.find("span").last().html(text+".");
var content = parentObj.parent().find('.hello').text();
alert(content);
}
});

Using Javascript to hide text shown on currency switch

I'd like to use Javascript (on page load) to remove the wording 'Choose a currency to display the price:'.
Leaving just the currency icons in the box (Div id = currency-switch).
How can I do this?
Page url: http://www.workbooks.com/pricing-page
Image example:

You can remove this text with for example:
window.onload = function(){
var el = document.getElementById("currency-switch");
var child = el.childNodes[0];
el.removeChild(child);
};

If you want to keep it stupid simple just add an span around the text and give it an id like "currency_text".
Then you only need this code:
var elem = document.getElementByid("currency_text");
elem.remove();

Try
$(document).ready(function() {
var currencyDiv = $('#currency-switch');
currencyDiv.innerHTML(currencyDiv.innerHTML().replace("Choose a currency to display the price:", ""));
}
This will remove the text as soon as the DOM is ready.

Please see below which will just remove the text:
This will trigger on page load
<script>
// self executing function here
(function() {
var selected_div = document.getElementById('currency-switch');
var text_to_change = selected_div.childNodes[0];
text_to_change.nodeValue = '';
})();
</script>

Since it's a text node, you could do the following in jQuery. This will be triggered on DOM ready.
$(function() {
jQuery("#currency-switch").contents()
.filter(function() {
return this.nodeType === 3;
}).remove();
});

You can use this code:
var requiredContent = document.getElementById('currency-switch').innerHTML.split(':')[1];
document.getElementById('currency-switch').innerHTML = requiredContent;
See it working here: https://jsfiddle.net/eg4hpg4z/
However, it is not very clean, but should work, if you cant directly modify the html.
A better solution would be to modify your code to move the text content within a span and show hide the text like so:
HTML:
<div id="currency-switch">
<span class="currency-label">Choose a currency to display the price: </span>
<span class="gb-background"><span class="GB"> £ </span></span><span class="es-background"><span class="ES"> € </span></span><span class="au-background"><span class="AU"> $ </span></span></div>
Javascript:
document.getElementsByClassName('currency-label')[0].style.display = 'none';

methods for dynamically created divs

So I'm working on creating a web app that allows users to create a front end theme for a website; I'm mostly doing this to better my JS skills.
What I'm doing in the code below is creating "boxes" that span the width of the page, and I want to allow the user to edit each individual box.
The issue I'm facing is I can select the class/id that the user clicked along with the div I have set up for all the elements that the user wants; however I cannot seem to attach any DOM methods onto the object.
Errors are Uncaught TypeError: Object editBoxes has no method 'innerHTML' where 'innerHTML' can be any method. I've also tried Jquery's .html with the same result.
for(i=1; i <= boxes; i++) {
box.innerHTML = box.innerHTML + [
"<div class = 'globalBox' id = 'box"+i+"'>",
"<div class = 'editDyBox'>edit this box <div class = 'editBoxes'></div<!--end edit boxes--></div>",
"</div><!--end box-->",
].join('');
}//end for
$(".globalBox").css("width", width+"%");
$(".editDyBox").click(function(){
var parentClass = $(this).parent().attr("id");
var childClass = $(this).children().attr("class");
var customEdit = $(this).attr("class");
var editBoxForm = "<form class = 'editBoxForm'><input type = 'text' name = '"+parent+"' width = '100%'></form>";
childClass.innerHTML("hello")
});//end editdybox click
Thank you
-Art

Why don't you use contenteditable instead of your complex code?
It's designed for that.
Check out this Demo
<div contenteditable="true">I'm the content</div>
It's supported by ALL browsers (yeah, even IE5)
its a normal div, so it spans all the available width, and his content is editable. No JS or CSS nedded.

This line returns a string, not a jQuery object
var childClass = $(this).children().attr("class");
So your variable childClass is going to just be a simple string object. It will never have the method innerHTML.
Additionally, this will return only the first child's class value and not an array of class values.

What about using one click handler per element?
var boxes = 3;
var $boxes = $("#boxes");
$.each(new Array(boxes), function () {
var box = $("<div/>").appendTo($boxes),
editBox = $("<div/>").text("edit this box").appendTo(box),
editBoxForm = $("<div/>").appendTo(editBox);
editBox.click(function () {
editBoxForm.html("hello");
});
});
jsFiddle Demo

Remove this
childClass.innerHTML("hello")
By this
$(this).children().innerHTML("hello");

Creating links for elements with a particular class with jQuery

How can I wrap every element belonging to a particular class with a link that is built from the text inside the div? What I mean is that I would like to turn:
<foo class="my-class>sometext</foo>
into
<a href="path/sometext" ><foo class="my-class>sometext</foo></a>
Url encoding characters would also be nice, but can be ignored for now if necessary.
EDIT: Just to clarify, the path depends on the text within the element

Use jQuery.wrap() for the simple case:
$(".my-class").wrap("<a href='path/sometext'></a>");
To process text inside:
$(".my-class").each(function() {
var txt = $(this).text();
var link = $("<a></a>").attr("href", "path/" + txt);
$(this).wrap(link[0]);
});

$(".my-class").each(function(){
var thisText = $(this).text();
$(this).wrap("<a></a>").attr("href","path/"+thisText);
});

you can wrap them inside anchor element like this:
$(document).ready(function(){
$(".my-class").each(function(){
var hr="path/"+$(this).text();
$(this).wrap("<a href='"+hr+"'></a>");
});
});
if you are opening links in same page itself then easier way than modifying dom to wrap elements inside anchor is to define css for the elements so that they look like links then handle click event:
$(".my-class").click(function(){
window.location.href="path/"+$(this).text();
});

$("foo.my-class").each(function(){
var foo = $(this);
foo.wrap("<a href='path/" + foo.Text() +"'>");
});

This ought to do it:
$('foo.my-class').each(function() {
var element = $(this);
var text = element.html(); // or .text() or .val()
element.wrap('');
});