We Keep Coding

setAttribute also also setting the value for the following element

I'm pretty sure this one is silly but I can't seem to figure it out myself.
This is a Django website containing a little bit of Javascript.
In my HTML, I have a button that should send a few values to a Javascript function. The javascript function should then find and update some divs in the HTML.
The strange thing is that the value assigned to the setAttribute statement is automatically also used for the following innerHTML statement (overruling whatever was configured there).
HTML Button:
<button class="btn btn-outline-dark" onclick="monthStats(
{{simple_total_monthly_sent_volume}},
{{average_monthly_delivery_rate}},
{{average_monthly_unique_open_rate}},
{{total_monthly_unique_open_volume}},
{{average_monthly_unique_click_rate}},
{{average_monthly_rejection_rate}},
)">Month</button>
Javascript:
function monthStats (sentvolume,
deliveryrate,
uniqueopenrate,
uniqueopenvolume,
uniqueclickrate,
rejectionrate
) {
document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
document.getElementById("delivered").innerHTML = deliveryrate+"%";
document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
document.getElementById("rejected").innerHTML = rejectionrate+"%";
}
HTML divs that should get updated:
<div class="container">
<div class="row">
<div class="col">
<div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
</div>
<div class="col">
<div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
</div>
<div class="col">
<div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
</div>
<div class="col">
<div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
</div>
<div class="col">
<div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
</div>
</div>
</div>
Clicking on the Month button in the HTML results in the title and textvalue of the div with ID "uniqueopened" to be updated correctly by the Javascript. However, the setAttribute statement in the javascript is seemingly also updating the value of the following div with ID "uniqueclicked", overruling the Javascript statement targeting that div.

I'm still not sure what caused the original problem. But could solve my issue by using an alternative approach: instead of pushing all the values to one single javascript function, I created a separate javascript function that does only the setAttribute updates.

Dygraph will not display in Bootstrap card

I want to create a dygraph graph within the Bootstrap card body's second column (it just looks nice and clean). The div used by dygraph is graphdiv. I am using this.$refs.graphdiv to try to access it from within my vue script.
If I move the graphdiv <div> outside the card div then it works (see the comment). Why will the dygraph not work within the bootstrap card? Is it just one of those compatibility things one must log with the developer and wait for a fix?
<template>
<div>
<div class="card">
<div class="card-header">HEADER</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3" style="width: 100%">
</div>
<div class="col-sm-9">
<div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
</div>
</div>
</div>
</div>
</div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>
Here is a reduced version of script:
<script>
import Dygraph from "dygraphs";
export default {
methods:{
plot_chart_series() {
//dataset = my data that I want to plot
const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});
}
}
};
<script>
P.S.
My reason for using dygraph is I want to plot a dataset which is rather large (+-30000 datapoints), chart.js and Apexchart cannot manage that (I spent the better part of 3 hours trying to get them working). If there is no fix for my issue above, which other graphing libraries are there which are Vue friendly which can handle large datasets?

Workaround
I have managed to find a work-around and I can at least relatively narrow the problem and say that I do not think it is bootstrap.
<div class="card" ref="carder">
<div class="card-header">Graph</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<button>A_BUTTON</button>
</div>
<div class="col-sm-9">
<div ref="graphdiv" style="width: 100%"></div>
</div>
</div>
</div>
</div>
The above code snippet worked for me.
Changes to original:
I had an id="some_id" property in the containing parent div which I removed.
The entire card was wrapped in another div. This div had a ref="some_ref" property which I used from the Vue script to toggle the visibility. I did this with this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none";. I changed it to the following this.$refs.some_ref.style.visibility = "hidden"; and just changed the hidden to visible when I wanted to show the card. (It does not bother me that the hidden element still consumes space)
If I revert change number 2 above to the original then it fails to display. I still cannot explain it but it works.

Filter data returned from helper with regex, using text input as you type

Basically, in my template I have the following code:
<div class="normal-padding">
Quicksearch: <input type="text" id="searchBox"/>
</div>
<div class="ui divider"></div>
{{#each getChildren}}
<div class="normal-padding">
<div class="ui two column grid">
<div class="column" style="width:60px;">
<div class="squaredOne">
<input type="checkbox" value="{{_id.toHexString}}" class="selectedChild" id="{{_id.toHexString}}" >
<label for="{{_id.toHexString}}"></label>
</div>
</div>
<div class="column">
<label for="{{_id.toHexString}}">{{firstname}} {{lastname}}</label>
</div>
</div>
</div>
{{/each}}
Where getChildren is the data coming from mongo.
My question is this:
How can I use what's being typed in input#searchBox to add/remove members from the getChildren helper?
Example:
Typing "ar", will list only the records that start with "ar".
I can figure out the regex required, I'm just not sure how to do this in meteor the correct way. I especially want to stay away from manually manipulating the DOM.
I've tried some filtering packages, but they all query the database again, where I just want the data that's already in the client/browser to be changed.
In other words, not send a query down the wire again.
Thanks!

AngularJS: How to display html data in view?

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?

You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.

Angularjs:-Remove double curly brace notation from displaying momentarily before loading

Hi I am a newbie to angularjs.There was a problem I am getting I am getting while trying to implement angularjs in my code.
The below is my code:-
<div class = 'search-icon'>
<div class = 'iconoverlay hidden-phone' ng-click="clickSearch()"></div>
<input type='search' id="mainSearch" placeholder='Search TV' ng-model="searchQuery.text" search-auto-complete>
<div ng-show="showInvalid == true" style="display: block ; margin-top: -8px;color: red;" ng-cloak>Invalid search text</div>
</div>
<div class="icon"></div>
</div>
<div class='select-language' ng-controller="AppController">
<a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-cloak>{{city['city']}}<span class='arrow'></span></a>
</div>
<div ng-switch-when="on" class='username'>
<span width:100px ng-cloak>{{userInfo.name | filterUserName}}</span>
<div class="btn-group">
<div class="btn dropdown-toggle moreDropdownTrigger" id="usernameDropdown"></div>
</div>
</div>
</div>
As from the above code I have implemented ng-cloak to to prevent the Angular html template from being briefly displayed by the browser in its raw form while the application is loading.
The below is the image:-
Please help me with it.Thanks

Include ng-cloak directive in your wrapper HTML element
<div ng-cloak>{{ myObject.item }}</div>
and include the following CSS rule in your css file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

Seems you are missing style="" in <span width:100px ng-cloak>. Maybe it brokes ng-cloack directive.

Do it like this:
<span ng-cloak> ... </span>
Or:
<span ng-bind="userInfo.name | filterUserName"></span>
Note! put "width: 100%" in "style" attribute

or you can do:
<span ng-bind-template="{{ userInfo.name }}">Your Default value</span>
I uses this and always work, the point is sometimes you can have some default value to just fill the text content before anything shows up, or you can leave it blank.

Instead of using ng-cloak and having to write a css class for ng-cloak, using just ng-bind is more powerful.
<div class='select-language' ng-controller="AppController">
<a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-bind="city['city']">loading...<span class='arrow'></span></a>
</div>
One more interesting feature of ng-bind is the ability to set default value before data is loaded in the code above, i used "Loading..." you can also leave it blank if you wish.
also, you can check the angular API doc https://docs.angularjs.org/api/ng/directive/ngBind