We Keep Coding

Generate dynamic li elements depending on how many checkboxes are checked

I am trying to generate li elements for each checkbox that has been checked. It works when there is only one checked, but when I check 2 checkboxes, only the last checkbox and its hidden inputs (hidden inputs used to populate specific values inside the li element) are generated.
Here is the code I use now:
attachPanelListeners : function() {
$('#sc-accordion').bind('click', function(e) {
var items,
target = $(e.target);
if ( target.hasClass('submit-add-to-menu') ) {
var t = $(this).parent().parent(),
checkboxes = t.find('.sc-pagelist li input:checked');
// If no items are checked, bail.
if ( !checkboxes.length )
return false;
var structure;
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
structure = "<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
"<div class='menu-item-handle ui-sortable-handle'>"+
"<span class='item-title'><span class='menu-item-title'>" + hidden[0].value + "</span></span>"+
"<span class='item-controls'><span class='item-type'>Pagina</span><a href='#' class='item-edit'></a></span>"+
"</div>"+
"</div>"+
"<div class='menu-item-settings sc-clearfix' style='display:none;'>"+
"<p class='description description-wide'>"+
"<label for='edit-menu-title'>Navigatielabel</label>"+
"<input type='text' class='form-control' id='edit-menu-title' value='" + hidden[0].value + "'>"+
"</p>"+
"<fieldset class='field-move hide-if-no-js description description-wide'>"+
"<span class='field-move-visual-label' aria-hidden='true'>Verplaatsen</span>"+
"<button type='button' class='button-link menus-move menus-move-up' data-dir='up' style='display: none;'>Eén omhoog</button>"+
"<button type='button' class='button-link menus-move menus-move-down' data-dir='down' style='display: inline;' aria-label='Verplaats één omlaag'>Eén omlaag</button>"+
"<button type='button' class='button-link menus-move menus-move-left' data-dir='left' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-right' data-dir='right' style='display: none;'></button>"+
"<button type='button' class='button-link menus-move menus-move-top' data-dir='top' style='display: none;'>Naar boven</button>"+
"</fieldset>"+
"<div class='menu-item-actions description-wide submitbox'>"+
"<a class='item-delete submitdelete deletion' id='' href='#'>Verwijderen</a>"+
"</div>"+
"<input type='hidden' value='"+ $(this).val() +"'>"+
"<input type='hidden' value='"+ hidden[2].value +"'>"+
"</div>"+
"</li>";
});
$('#menu-to-edit').append(structure);
checkboxes.prop('checked', false);
};
})
},
Cheers

You're assigning the string on each loop, rather than appending - meaning you only ever get the last one.
One option is to change...
structure = "<li class='menu-item menu-item-depth-0'>"+
To...
structure += "<li class='menu-item menu-item-depth-0'>"+
An alternative option is to append the string on each loop directly...
$(checkboxes).each(function(){
var hidden = $(this).closest('li').find(':hidden');
$('#menu-to-edit').append(
"<li class='menu-item menu-item-depth-0'>"+
"<div class='menu-item-bar'>"+
...
"</div>"+
"</li>");
});

I made a simple example below ( as you didn't share the HTML and a bunch of code you shared is not relevant to the problem itself )
Basically you need to append to the existing HTML. WHat you are doing is replacing it with a new li every time you check a checkbox. So it overrides the previous html.
I also removed the corresponding li when the checkbox is unchecked.
THere might be a more straight forward solution out there but this is the best i came up with for now :)
var chkBox = $(".checkbox")
$(chkBox).on('change', function(){
var index = $(this).index()
var menuItem = `<li class=${index}>${index} list item</li>`
if ($(this).is(':checked') ) {
$('.menu').html($('.menu').html() + menuItem)
} else {
$(`li.${index}`).remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
</ul>
<div>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
<input type="checkbox" class="checkbox"/>
</div>

Vue.js dynamically appending HTML when clicking on a button

So basically what I am trying to achieve is allowing the user to be able to add to an existing set of information that will be passed on to Vue from JSON.
So the following code is my HTML code which comprises of the div element with the id objectiveArea that vue will render to and a hard coded button for the users to add more entries.
<div class="form-group" id="objectiveArea"></div>
<div><input type="button" value="Add Objective" id="addButton" /></div>
And here is my Javascript where I pass the JSON into vue for it to render as well as having an onclick event when the add button is triggered. The function addNewObjectiveRow serves as a template to append when the user clicks add and the objectiveElements is a template for vue to render the existing JSON to the HTML.
function addNewObjectiveRow(value) {
var $divElements = "<div class='row'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'></textarea></div></div><hr />"
+ "</div>"
return $divElements;
}
var objectiveElements = "<div class='row'><div v-for='(objective, index) in objectivesData'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' v-if='(index > 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'></textarea></div></div><hr />"
+ "</div></div>";
var data = JSON.parse('[{"Title":"Title One","TargetDate":"21 June 2017","Details":"Details One"},{"Title":"Title Two","TargetDate":"22 June 2017","Details":"Details Two"}]');
var Objectives = Vue.extend({
template: objectiveElements,
data: function () {
return {
objectivesData: data
}
}
})
new Objectives().$mount('#objectiveArea');
$('#addButton').on('click', function () {
$('#objectiveArea').append(addNewObjectiveRow(""));
});//end addButton on click
However, the above code renders the existing information from the JSON just fine in the HTML but when I click on the add button, nothing happens at all. Am I missing something or getting it all wrong?

https://v2.vuejs.org/v2/guide/list.html
HTML
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<button #click="addItem()">Add new item</button>
JS
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods: {
addItem(){
this.items.push({message: 'new message'})
}
}
})
Clicking the button will execute addItem() method which will add a new item into data items and it will automatically render new li

there are many mistakes
the function addNewObjectiveRow(value)you don't use the parameter value.
Vue is data-driven, you should change the objectivesData, not simply append the string. Read the document

How to put html into js loop

Today I need help about How can I do a loop with html code and put the (i) value on the input name:
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<script>
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[i]' /> car number i";
}
$('#result').html(html);
});
});
</script>
<div id='result'></div>
If you dont undertand pls ask.

You can use string concatenation:
html += "<input type='text' name='cars[" + i + "]' /> car number " + i;
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[" + i + "]' /> car number " + i + "<br>";
}
$('#result').html(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<div id='result'></div>

How to put two buttons on the same horizontal alignment?

I am making an HTML form in JavaScript and it works, but the two buttons: cancel and submit are on seperate lines (one above the other). How can I make them horizontally aligned?
Here is the code that I have:
var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";
And by the way, it looks very messy :) How do people usually do this sort of thing so that it is cleaner?
Thanks!

http://jsfiddle.net/G2qsp/1/
As far as I can tell, they are on the same line :P
The normal way of making it cleaner (at least, as I do it) is to just put it on new lines with +'s at the end of each line.
aka:
var new_comment_form =
"<form id='add_comment' method='post'>"+
"<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
problem_comment_text +
"</textarea>"+
"<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
"<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
"<input type='submit' class='button' value='Edit Message' />"+
"<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";
Edit:
If you're still experiencing some alignment issues, this is approximately what you'd want to do with the floats
http://jsfiddle.net/G2qsp/2/
Now, to flee before someone attacks me for using clear:both...

You can solve this problem using two ways,
1) Use table with two columns, one contain first button and other one contain second button.
2) You can also use margin-top style whose value is negative.

When concatenating strings to put together a new DOM element with Javascript, it only takes the first whitespace separated value

I have the following code
var aVar = "sample text";
alert(aVar);
$(this).replaceWith( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
The alert message box returns the expected value: "sample text". However, the DOM element is generated with the following value: "sample". Now, if i try it the following way it works:
$(this).replaceWith( "<input type='text' value='sample text' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");
Unfortunately, i have no choice but to read the value from a variable, i can't have it hardcoded. Hope someone can guide me with this! thankss

CHange:
value=" + aVar + " id='
To:
value='" + aVar + "' id='
Attributes should be quoted.

You're missing quotation marks. Use this:
$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

You haven't string quoted the value of the value attribute in your first example.
It should be written:
$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

Everyone have already answered your question, but... when you get stuck with string bugs like that, just use an "alert" to see the evaluated string.
This would save you time:
alert( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");