We Keep Coding

which/how to properly use a loop for html change with Javascript?

I am new in Javascript and trying to change the HTML content of a line.
I've been helped a little by a friend who made this code for me, but I'm running into major issues.
The situation is:
I'm creating a FAQ in SharePoint 2013, and this code is supposed to read a list, read 3 informations (Category, Question and Answer) and then substitute the HTML where I want it to.
The issue is that it is running on every '.cd-faq__trigger' that is inside it's "i.category", changing them all to the same "i.question"
function ChangeHTML(){
var items = GetListItems("X", "Y", "Z")
items.forEach(function(i){
$('#'+i.category+' .cd-faq__trigger').html(i.question)
});
}
}
-----------------HTML ------------------
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
<li class="cd-faq__item">
<a id="trigger" class="cd-faq__trigger" href="#0"><span id="texto"></span></a>
</li>
</ul>
</div>

Finally figured out how to do it... Made the script write the whole HTML from scratch and then no need to substitute nothing.
SCRIPT:
function AddCategory(){
var items = GetListItems("ListID", "caml", "url")
items.forEach(function(i){
$('#'+i.Categoria).append('<li class="cd-faq__item"><a id="trigger" class="cd-faq__trigger trigger" href="#0"><span>'+i.Pergunta+'</span></a><div class="cd-faq__content"><div class="text-component"><p>'+i.Resposta+'</p></div></div></li>')
});
}
'i.Categoria' = each category from the list.
'i.Pergunta' = each question posted on the list.
'i.Resposta' = each answer posted on the list.
HTML:
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
</ul> <!-- cd-faq__group -->
</div>
So it looks for the Category of the post, and inside of it it appends the HTML adding in it the question and answer posted.
Thank you for who helped!

How to submit an HTML table's code from a textarea field then parse it into an array

I am trying to make a spreadsheet addon where I have a textarea field where users will be putting the HTML for a table in a field, and I need my script to then take that HTML code, parse it and convert it into an array or object by which I can easily access the table's cells.
The problem I'm facing is that I don't seem to be able to turn the HTML code submitted as text back into a jQuery object I can loop through.
Tl;Dr:
How do I submit a table's HTML code from a form as text and turn it back into an HTML object so I can turn the table into an array/object?
I'm using $("#invoice-info").val() to get its content but using any other methods afterwards gives errors (All of them are either nonspecific or something about "Expected expression but got >", sorry I'm new to JavaScript so I have a hard time debugging it).
Here's the relevant HTML for the form itself:
<form onsubmit="return(false)">
<div class="block col-contain">
<div>
<textarea class="width-100" id="invoice-info" rows="10"></textarea>
<label for="invoice-info">Invoice Table</label>
</div>
</div>
<div class="block" id="button-bar">
<button class="blue" id="make-receipt" onclick='doTest()'>Generate</button>
</div>
</form>

You need to take the result of $("#invoice-info").val() and put it in a domNode. Because it returns a string. var tempDomNode = document.createElement('div'); tempDomNode.innerHTML =$("#invoice-info").val().
So you 'convert' the string into a domNode and then you will be able to use that domNode with or without jQuery to construct your array.
Note : you have to handle the case of a malformed sting (not valid as HTML)
Edit : just found this question on SO : https://stackoverflow.com/a/11047751/1836175 seems to address the same problem.

Display an Array (from ViewModel) within Kendo View template

At work I'm just starting out with JavaScript, MVVM, and Kendo's JS framework, all at once, and I have a fairly simple problem.
I've created a View Model that allows Superheroes to be registered.
The JSBin I'm working in: http://jsbin.com/gewu/3/edit?html,js,output
Here's the HTML(view):
<div id="view">
Superhero: <input data-bind="value: name" /><br/>
Superpower: <input data-bind="value:power"type="text">
<label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label>
<button data-bind="click: registerHero" >Display User Info</button>
<div id="array-display"></div>
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p>
</div>
And here's the JS (viewModel):
var viewModel = kendo.observable({
knownHeroes : [],
name: "Hulk",
power:"Stength",
fromEarth: true,
registerHero: function() {
var name = this.get("name");
var power = this.get("power");
var fromEarth = this.get("fromEarth");
this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth});
}
});
kendo.bind($("#view"), viewModel);
Now, I'm trying to get the View to loop through and display the array of knownHeroes. But it won't render anything. I know the data is being pushed to the array, because I can see the array.length increasing, and I can look up specific values in the array. I'm assuming the problem has to do with how I'm referencing the array in the view. But I'm not sure. Here's the template I've written:
HTML:
<script id="registry-view" type="text/x-kendo-template">
<ul>
# for (var i=0; i < knownHeroes.length; i++) { #
<li>
<ul>
<li>#= knownHeroes[i].name #</li>
<li>#= knownHeroes[i].power #</li>
<li>#= knownHeroes[i].fromEarth #</li>
</ul>
</li>
# } #
</ul>
</script>
<script type="text/javascript">
var template = kendo.template($("#registry-view").html());
$("#array-display").html(template); //Append the result
</script>

You have got some mistakes.
First of all you got script wrote in html portion of this jsbin as well as in javascript section. Html part executes first so the viewModel isn't defined yet (check console for errors)
Also the object you pass to the template is stored always in "data" variable.
Last mistake is when using your desing, anytime you add any new data row, whole template needs to be reloaded (including all previously added data rows)
I corrected some of your mistakes in following jsbin: http://jsbin.com/jomemuko/1/edit (actually you need to hit the Run with JS button to make it work - some script loading issue I don't have time for)
Ideally you should use a listView widget and assign it a template for only one item. Also in your viewModel you should create a kendo dataSource and pass it as an option to newly created listView. Then in the viewModel you should refine your registerHero function to make it add the hero to the dataSource. Widget should automatically refresh.
Hope it helps

Listview Updating, jQueryMoble

I am trying to update or replace a list and keep the styles that were present before the update. Reading form the jQuerymoble website it says that the refresh() method call only works on new nodes. I am using the .html call to update the list and not .append. I am not sure if that is where I am having problems but the refresh call is not working in any case. My new list does not have the correct styles. I am using .html because many nodes are removed/added at the same time so append would not really work in my case.
Sample Code:
<script>
$(document).ready(function(){
$("#quicksearch").keyup(function() {
$.getJSON(search,function(data){
newlistcode= data //formatted correctly for a new list
$(“ul”).html(newlistcode);
$(“ul”).listview(‘refresh’);
});
});
});
</script>
<div data-demo-html="true">
<ul data-role="listview" class="list" id="listview1">
<li>test</li>
</ul>
</div>

Change
$(“#listview1”).html(newlistcode);
$(“listview1”).listview(‘refresh’);
to
$(“#listview1”).append(newlistcode);
$(“#listview1”).listview(‘refresh’);
Where
newlistcode = '<li><a>content</a></li>';

Add link to dynamic text with javascript

I'm trying to make a dynamic text a link with javascript:
<div class="container">
<div class="form-current">
<form>
<h2 style="margin-left:10px" ><a href='#' onclick="homePage()" id="h2Current" ></a></h2>
<div id="node-current"></div>
</form>
</div>
This is the html and the text is loaded from a DB through a javascript function:
var h2Current = document.getElementById('h2Current');
h2Current.innerHTML = 'Day '+data[0]['day'];
the parameter "data" is a simple Json. The text appear underlined correctly but is impossibile to click.
Thanks in advance

You need to check your JSON. Check JSON i have written is a correct one. check your JSON format. You can use jsonlint.com to validate JSON you are trying to use.
<html>
<head>
</head>
<body>
<div class="container">
<div class="form-current">
<form>
<h2 style="margin-left:10px" ><a href='#' onclick="homePage()" id="h2Current" ></a></h2>
<div id="node-current"></div>
</form>
</div>
</div>
<script>
var data = [{ 'day':'monday'},{ 'day':'tuesday'}]
var h2Current = document.getElementById('h2Current');
h2Current.innerHTML = data[0]['day'];
</script>
</body>

The problem is not the JSON since you say that it appears and is underlined properly. The issue is that you are either not actually calling your 'homePage' function during the 'onclick' event, or there is an unhandled exception in the code of your 'homePage' function. Here is how you go about debugging this issue.
You need to open your site in Chrome, and open the developer tools, 'F12'. Click the 'Sources' tab, and find your .JS file, or the page file, if it contains the function, 'homePage' inline. You may need to open the 'File Navigator'. If this is the case, click the "arrow in the box" directly beneath the 'Elements' tab.
Once the file is opened, find the function declaration 'homePage' and breakpoint the first non var declarative line. Now, simply click the link and step through the function. You may find that you are not even calling the function at all and you may even see JS exceptions listed. Address any exceptions which appear inline in your code. If you are actually reaching your function, step through every line, 'F11' including any nested functions, until you find the exception.