How to make loop out of these? - javascript

How to make loop out of following HTML?
HTML
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'">
<a ng-click="getProductsByCategory(1)" ng-model="category.id">Cakes</a>
<a ng-click="getProductsByCategory(2)" ng-model="category.id">Pies</a>
<a ng-click="getProductsByCategory(3)" ng-model="category.id">Donuts</a>
<a ng-click="getProductsByCategory(4)" ng-model="category.id">Strudels and kishi</a>
<a ng-click="getProductsByCategory(5)" ng-model="category.id">Macaroons</a>
<a ng-click="getProductsByCategory(6)" ng-model="category.id">Cheesecakes</a>
<a ng-click="getProductsByCategory(7)" ng-model="category.id">Ice cream</a>
<a ng-click="getProductsByCategory(8)" ng-model="category.id">Assorti</a>
<a ng-click="getProductsByCategory(9)" ng-model="category.id">Low-calorie</a>
<a ng-click="getProductsByCategory(10)" ng-model="category.id">Guacamole</a>
<a ng-click="getProductsByCategory(11)" ng-model="category.id">Сroissants</a>
<a ng-click="getProductsByCategory(12)" ng-model="category.id">Sorbet</a>
<a ng-click="getProductsByCategory(13)" ng-model="category.id">Tiramisu</a>
<a ng-click="getProductsByCategory(14)" ng-model="category.id">Cookies</a>
<a ng-click="getProductsByCategory(15)" ng-model="category.id">Fruit and Puree</a>
</div>
What I tried
I tried JavaScript but I had problem with quotation marks:
let i; for (i=1; i<=16; i++) { document.writeln("<a ng-click="getProductsByCategory('+i+')">category.name</a>"); }

I'm not sure if I understood the point correctly. But if you want to generate the list automatically using JS you can use this loop:
var arr = ['Cakes', 'Pies', 'Donuts', 'Strudels and kishi', 'Macaroons', 'Cheesecakes', 'Ice cream', 'Assorti', 'Low-calorie', 'Guacamole', 'Сroissants', 'Sorbet', 'Tiramisu', 'Cookies', 'Fruit and Puree'];
var res = '';
for (var i = 0; i < arr.length; i++) {
res += '<a ng-click="getProductsByCategory(' + (i + 1) + ')" ng-model="category.id">' + arr[i] + '</a> <br>';
}
var wrap = document.getElementsByClassName('dropdown-content')[0];
wrap.innerHTML = res;
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'"></div>

Related

Why does the addEventListener property does not work on a dynamic HTMLcollection object?

I am working on a chrome extension and trying to add an event listener to a getElementsByClassName variable, in which elements are added dynamically using template strings.
I have tried a lot of changes in the code, but the code doesn't work.
The code is supposed to delete the targeted element from the array "recipeList", storing the array in localStorage and then render the updated array "recipeList" using template string to the HTML code again.
DELETE BUTTON Function
let delBtn = document.getElementsByClassName("del-btn");
for(let i = 0; i < delBtn.length; i++) {
delBtn[i].addEventListener("click", function() {
recipeList.splice(i, 1);
localStorage.setItem("recipeList", JSON.stringify(recipeList));
recipeList = JSON.parse(localStorage.getItem("recipeList"));
render(recipeList);
if(!recipeList.length) {
tabBtn.style.width = "100%";
delAllBtn.style.display = "none";
}
});
}
RENDER CODE
function render(list) {
let recipeURL = "";
for(let i = 0; i < list.length; i++) {
recipeURL += `
<div class="mb-2 row">
<div class="col-1 num-btn">
${i+1}
</div>
<div class="col-10">
<div class="recipe-url">
<a target="_blank" href="${list[i]}">
${list[i]}
</a>
</div>
</div>
<div class="col-1 del-btn">
<a href="#">
<i class="bi bi-trash-fill"></i>
</a>
</div>
</div>
`
}
urlList.innerHTML = recipeURL;
console.log(delBtn);
}
When you render, you create new .del-btn which are not included in your first let delBtn = document.getElementsByClassName("del-btn");.
Each time you create new .del-btn, you should also add a new listener.
function render(list) {
let recipeURL = "";
for(let i = 0; i < list.length; i++) {
recipeURL += `
<div class="mb-2 row">
<div class="col-1 num-btn">
${i+1}
</div>
<div class="col-10">
<div class="recipe-url">
<a target="_blank" href="${list[i]}">
${list[i]}
</a>
</div>
</div>
<div class="col-1 del-btn">
<a href="#">
<i class="bi bi-trash-fill"></i>
</a>
</div>
</div>
`
}
urlList.innerHTML = recipeURL;
console.log(delBtn);
Array.from(urlList.querySelectorAll('.del-btn')).forEach((btn, i) => {
btn.addEventListener('click', () => console.log('.del-btn index: ' + i))
})
}
}

Limiting the number times while loop loop

<div class="teachers1">
<div class="teamySlides">
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="teachers" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<a class="prev" onclick="tplusSlides(-1)">❮</a>
<a class="next" onclick="tplusSlides(1)">❯</a>
<div class="dot-container">
<span class="tdot" onclick="tcurrentSlide(1)"></span>
<span class="tdot" onclick="tcurrentSlide(2)"></span>
</div>
</div>
The code above is used to generate objects based on how many the data is on the database. To better understand it here is a picture of the system:
The problem is when the data exceed 8, the objects do not go to the next page. The reason is that I dont know how to do that.
For example I clicked the right arrow ">" the code must go to the second page and so on with the rest of the object.
Can anyone help me or can anyone provide me with the syntax? Thanks.
Javascript:
var ti;
var tslides = document.getElementsByClassName("yourteachers");
var tdots = document.getElementsByClassName("tdot");
if (n > tslides.length)
tslideIndex = 1
if (n < 1)
tslideIndex = tslides.length
for (ti = 0; ti < tslides.length; ti++)
tslides[ti].style.display = "none";
for (ti = 0; ti < tdots.length; ti++)
tdots[ti].className = tdots[ti].className.replace(" active", "");
tslides[tslideIndex-1].style.display = "block";
tdots[tslideIndex-1].className += " active";

How to append html code block in ajax

I have a code block in my jsp page. I want use this code in ajax with append tag.
Here is my code.
for ( var i = 0, len = data.length; i < len; ++i) {
var listValue = data[i];
$('.flowers').append(
'<div class="profile-sidebar" style="width: 250px;">\
<div class="portlet light profile-sidebar-portlet" \
data-category="listValue.officeNameNoSpace"> \
<div class="profile-userpic"> \
<img src="listValue.imgPath" class="img-responsive" \
alt=""> \
</div> \
<div class="profile-usermenu"></div> \
</div> \
</div>'
);
}
But it still has error.Here is error :
String literal is not properly closed by a matching quote
I tried this way.:
for ( var i = 0, len = data.length; i < len; ++i) {
var listValue = data[i];
$('.flowers').append(
'<div class="profile-sidebar" style="width: 250px;">
<div class="portlet light profile-sidebar-portlet"
data-category="listValue.officeNameNoSpace">
<div class="profile-userpic">
<img src="listValue.imgPath" class="img-responsive"
alt="">
</div>
<div class="profile-usermenu"></div>
</div>
</div>'' +
');
What should i do? Thanks.
It's a bit old fashioned but why don't you try string concatenation like below:
for ( var i = 0, len = data.length; i < len; ++i) {
var listValue = data[i];
$('.flowers').append('<div class="profile-sidebar" style="width: 250px;">'+
'<div class="portlet light profile-sidebar-portlet"'+
'data-category="'+listValue.officeNameNoSpace+'">'+
'<div class="profile-userpic">'+
'<img src="'+listValue.imgPath+'" class="img-responsive" alt="">'+
'</div>'+
'<div class="profile-usermenu"></div>'+
'</div>'+
'</div>');
}
Tell me if it works.

Get elements between 2 elements

I have this html:
<div class="categories">
<div class="list-group">
<a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
<a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
<a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon indent2"></span><span>Sub category</span></a>
<a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Videos</span></a>
<a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
<a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
</div>
</div>
and what I need to do is select all elements between a.active.
To explain that a little better; a.active has a span.glyphicon with the class indent1, so I need to select the elements between indent1 and the next indent1
I attempted to use jQuery's nextAll function but couldn't get it to work correctly :(
any help would be appreciated,
/r3plica
Update 1
Thanks to Arun, here is my script which now works:
$(".glyphicon", treeRoot).on('click', function (e) {
e.stopPropagation();
var $glyph = $(this);
var $item = $glyph.parent();
var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];
console.log($item[0].outerHTML);
console.log(indent);
if (indent != undefined) {
var $children = $item.nextUntil("a:has(." + indent + ")");
console.log($children[0].outerHTML);
if ($glyph.hasClass("glyphicon-chevron-right")) {
$glyph
.addClass('glyphicon-chevron-down')
.removeClass("glyphicon-chevron-right");
if ($children != null) $children.show();
} else {
$glyph
.addClass('glyphicon-chevron-right')
.removeClass("glyphicon-chevron-down");
if ($children != null) $children.hide();
}
}
});
Try
$('.active').nextUntil('a:has(.indent1)')
To dynamically determine the indent value
var $active = $('.active');
var indent = $active.find('.glyphicon').prop('className').match(/\b(indent\d+)\b/)[1];
var $nexts = $active.nextUntil('a:has(.' + indent + ')');
console.log($nexts)
Demo: Fiddle
Try using nextUntil()
Live Demo
$('.active:has(.indent1)').nextUntil(':has(.indent1)')
Maybe with nextUntil (from Jquery)
Look at http://api.jquery.com/nextUntil/
$('.active').nextUntil('.indent1');

Javascript and XML innerHTML naming

I'm trying to get my a tags to display the name from a xml file, I currently have the link changing color and text when it is triggered, but I would like it to get its original state name from a xml file.
I am only interested in the Input links here.
Here is the html side of things:
<div id="status">
<div id="loading" style="display:none">Error:<br />Connection to EMACSYS board was lost.</div>
<div id="display">
<p></span></p>
<p>Inputs:<br /><span style="font-size:20pt"></p>
<a id="btn0">• Input 1</a><br>
<a id="btn1">• Input 2</a><br>
<a id="btn2">• Input 3</a><br>
<a id="btn3">• Input 4</a><br>
<a id="btn4">• Input 5</a><br>
<a id="btn5">• Input 6</a><br>
<a id="btn6">• Input 7</a><br>
<a id="btn7">• Input 8</a><br>
<a id="btn8">• Input 9</a><br>
<a id="btn9">• Input 10</a><br>
<a id="btn10">• Input 11</a><br>
<a id="btn11">• Input 12</a><br>
<a id="btn12">• Input 13</a><br>
<a id="btn13">• Input 14</a><br>
<a id="btn14">• Input 15</a><br>
<a id="btn15">• Input 16</a><br>
</span> </p>
<p>Canopy Temperature: <a id="analogue0">?</a>
<br /><span style="font-size:20pt">
<a id="pot0">›</a>
<a id="pot1">›</a>
<a id="pot2">›</a>
<a id="pot3">›</a>
<a id="pot4">›</a>
<a id="pot5">›</a>
<a id="pot6">›</a>
<a id="pot7">›</a>
<a id="pot8">›</a>
<a id="pot9">›</a>
</span></p>
<p>Engine Heater Temperature: <a id="analogue1">?</a> (30-90 normal)
<br /><span style="font-size:20pt">
<a id="1pot0">›</a>
<a id="1pot1">›</a>
<a id="1pot2">›</a>
<a id="1pot3">›</a>
<a id="1pot4">›</a>
<a id="1pot5">›</a>
<a id="1pot6">›</a>
<a id="1pot7">›</a>
<a id="1pot8">›</a>
<a id="1pot9">›</a>
</span></p>
</div>
Which all seems ok and works fine when an input is triggered, but where it says Input 1, Input 2, etc. i would like it to load from this xml file the inputname tags
<response>
<input0>~Inputs(1)~</input0>
<inputname0>Mains OK</inputname0>
<input1>~Inputs(2)~</input1>
<inputname1>Water Heater</inputname1>
<input2>~Inputs(3)~</input2>
<inputname2>Genset Standby</inputname2>
<input3>~Inputs(4)~</input3>
<inputname3>Genset Running</inputname3>
<input4>~Inputs(5)~</input4>
<inputname4>Common Alarm</inputname4>
<input5>~Inputs(6)~</input5>
<inputname5>Genset Shutdown Alarm</inputname5>
<input6>~Inputs(7)~</input6>
<inputname6>Genset Fuel Tank 1/2</inputname6>
<input7>~Inputs(8)~</input7>
<inputname7>Genset Fuel Tank 1/4</inputname7>
<input8>~Inputs(9)~</input8>
<inputname8>Genset Fuel Tank Low</inputname8>
<input9>~Inputs(10)~</input9>
<inputname9>option</inputname9>
<input10>~Inputs(11)~</input10>
<inputname10>option</inputname10>
<input11>~Inputs(12)~</input11>
<inputname11>Bulk Fuel Full</inputname11>
<input12>~Inputs(13)~</input12>
<inputname12>Bulk Fuel 3/4</inputname12>
<input13>~Inputs(14)~</input13>
<inputname13>Bulk Fuel 1/2</inputname13>
<input14>~Inputs(15)~</input14>
<inputname14>Bulk Fuel 1/4</inputname14>
<input15>~Inputs(16)~</input15>
<inputname15>Bulk Fuel Low</inputname15>
<output0>~Outputs(1)~</output0>
<output1>~Outputs(2)~</output1>
<output2>~Outputs(3)~</output2>
<output3>~Outputs(4)~</output3>
<output4>~Outputs(5)~</output4>
<output5>~Outputs(6)~</output5>
<output6>~Outputs(7)~</output6>
<output7>~Outputs(8)~</output7>
<output8>~Outputs(9)~</output8>
<output9>~Outputs(10)~</output9>
<output10>~Outputs(11)~</output10>
<output11>~Outputs(12)~</output11>
<output12>~Outputs(13)~</output12>
<output13>~Outputs(14)~</output13>
<output14>~Outputs(15)~</output14>
<output15>~Outputs(16)~</output15>
<analogue0>~Analogs(1,T,2,3977)~</analogue0>
<analogue1>~Analogs(2)~</analogue1>
<analogue2>~Analogs(3)~</analogue2>
<analogue3>~Analogs(4)~</analogue3>
<analogue4>~Analogs(5)~</analogue4>
<analogue5>~Analogs(6)~</analogue5>
<analogue6>~Analogs(7)~</analogue6>
<analogue7>~Analogs(8)~</analogue7>
</response>
So for Input 1 it would show Mains OK, then when it was triggered it would show Alert, then back to Mains OK when it was back to normal.
I've tried a few things in the javascript:
<script type="text/javascript">
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
// Check if a timeout occurred
if(!xmlData)
{
document.getElementById('display').style.display = 'none';
document.getElementById('loading').style.display = 'inline';
return;
}
// Make sure we're displaying the status display
document.getElementById('loading').style.display = 'none';
document.getElementById('display').style.display = 'inline';
// Loop over all the LEDs
for(i = 0; i < 16; i++) {
if(getXMLValue(xmlData, 'input'+i) == '1') {
document.getElementById('btn' + i).style.color = '#d00';
document.getElementById('btn' + i).innerHTML = '• ALERT';
}
else {
document.getElementById('btn' + i).style.color = '#090';
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
}
}
// Loop over all the buttons
// Update the POT value
document.getElementById('analogue0').innerHTML =getXMLValue(xmlData,'analogue0');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue0') >val)
document.getElementById('pot' + i).style.color = '#090';
else
document.getElementById('pot' + i).style.color = '#fff';
}
// Update the POT value 2
document.getElementById('analogue1').innerHTML =getXMLValue(xmlData,'analogue1');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue1') >val)
document.getElementById('1pot' + i).style.color = '#090';
else
document.getElementById('1pot' + i).style.color = '#fff';
}
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
</script>
but not to any luck. I am pretty sure its to do with the javascript part of it because this is my weakest area.
I believe that you have a syntax error on the following line of code:
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
On the right-hand side of the equals sign, you have an unterminated string: '•...
I'm not certain of exactly what you're trying to do, but I'm guessing that you want to have a bullet point, followed by the result of getXMLValue(xmlData, 'inputname'+1)
I would suggest that you try replacing this line with the following:
document.getElementById('btn' + i).innerHTML = '•' + getXMLValue(xmlData, 'inputname'+i);
Please let me know how this works for you.

Categories