We Keep Coding

How to dynamically assign a class (based on the outcome of if - else) to a span tag of a popover tooltip that uses Bootstrap Tagsinput

//My js file has the following
$mytag.popover({
html:true,
trigger: hover,
container: $mytag,
template: '<div class="popover" role="showDetails">' +
...//other
'</div>',
content:'<div class="info">' +
...//other
'<div class="myrow">' +
'<span>' + 'Result:' + '</span>' +
'<span>' + item.result + '</span>' +
+ '</div>' +
});
The value of item.result is calculated elsewhere (js). The final outcome is expected to be a Boolean value. I'd like to append a css class here instead of displaying the outcome.
Eg: If item.result is true. I'd like to add class="ok" to the span tag.
'<span class="ok">' + '</span>' +
If item.result returns false. I'd like to add class="notOk" to the span tag.
'<span class="notOk">' + '</span>' +
Can someone please advise what is the best way to achieve this?.
Thanks in advance.

Have you tried adding an id to the span and then using the element.classlist.add('class_name') function?
Add an if statement where the item.result is calculated to add the class to the span like:
if (item.result) {
document.getElementById("result-span").classList.add("ok");
}
else {
document.getElementById("result-span").classList.add("notOk");
}
HTML DOM classList Property

you can achieve this with string interpolation.
`<span class="${calcutationFn() ? 'ok' : 'noOK'}"> ... </span>`

javascript: insert html tag with innerHTML

I have to integrate several html type tags (ex: <div id = "mysection"> <div class = "mycontainer"> <h1> mytitle </h1> </div> </div>) to format data (here "mytitle") output in javascript
So, I have in my HTML <span id="datahere"></span>
and the js i need to edit is :
function Bigdata(title, subtitle, type) {
const mydata = document.getElementById('datahere');
mydata.innerHTML += title + subtitle + (type ? ' <strong>(type is ' + type + ')</strong>' : '') +'<br/>';
}
// element in which the data is initialized, visible in another <span>
const sprit = document.getElementById('sprit');
// when a given message is received
sprit.addEventListener(SpritEvents.MessageSprit, ({ data }) => {
Bigdata('Sprit', data.text, data.type);
// if there are actions, we offer links
if (data.actions) {
var links = '';
for (var i = 0; i < data.actions.length; i++) {
if (i > 0) {
links += ', ';
}
let act = data.actions[i];
links += '<a data-val="' + act.value + '">' + act.title + '</a>';
}
Bigdata('Sprit', links);
}
});
I cannot integrate the tags which must "contain" data (title, subtitle, type) WHITH links if there are actions ...
if I add my tags like this: mydata.innerHTML += '<div id = "mysection"> <div class = "mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/></div></div>';
that does not surround the whole, the div and the h1 are duplicated (surrounds on one side title, subtitle, type and on the other links).
I'm not used to using pure javascript ... I hope you can help me

I recommend rewriting it using Template literals:
mydata.innerHTML += `<h1>${title}</h1>`;
More on this topic:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
This makes things look much lighter.
Also, it looks like you are not closing the html tags. For example: <div>, needs to be closed with </div>

How to add a button inside message body in Javascript?

I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`

I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`

You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';

Load dynamic content to a bootstrap modal

I receive some data after an AJAX call and I populate a list.
But when an item is clicked from that list, I want to show a modal with information about that item (like a picture, how popular it is - how many times it was clicked -, author etc). I can do this in an ugly way:
$('#target').append(
$('<div class = "col-md-4" data-toggle = "modal" data-target = "#myModal" onClick = someFunction(' + someArgument + ')>' + someText + '</div>' +
'<div class = "modal fade" id = "myModal" role = "dialog">' + '<div class = "modal-dialog modal-lg">' +
'<div class = "modal-content"> <div class = "modal-header"> <h4 class = "modal-title">' + someTitle + '</h4></div>' +
'<div class = "modal-body">Description: ' + description + ' Author: ' + author + '<br</br>' +
'<img src = "' + imgSource + '" class = "modal-dialog modal-lg" style = "max-width: 25%;">' +
'<button type = "button" class = "close" data-dismiss = "modal" id = "myModal">×</button>' +
'<div class = "modal-footer"></div></div></div></div></div>'));
This is ugly, error prone, hard to maintain, hard to read. Can it be done in a more elegant manner?

Firstly, your code should be written inside show.bs.modal function.
$('#target').on('show.bs.modal', function (e) {
// do something...
})
See this: http://getbootstrap.com/javascript/#modals-events
Second, I prefer to use jQuery to create DOM elements, like this
$("<div>").addClass("col-md-4").attr("data-target","#myModal").append(
$("<div>").addClass("modal fade")//add more here
);

How to fetch the id of dynamically generated textboxes?

How is it possible to get the id of the dynamically generated textboxes using jquery?. I need to fire the TextChanged event for the corresponging textbox. There is no method reference for the textboxes in the code behind.How can i refer to any method in the codebehind on firing the event. Somebody please help. I dont know jquery much. The entire script im using is as as follows:
<script type="text/javascript">
$(init);
function init()
{
$('#test').droppable(// Div Control
{
drop: handleDropEvent
});
$('a').each(function(idx, item) {
$(item).draggable({ cursor: 'move', helper: 'clone' })
});
}
$(function() {
$("#draggable").draggable(); //Nothing to do with this div
});
function handleDropEvent(event, ui)
{
var draggable = ui.draggable;
document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}
function addColumn(column)
{
var iHtml;
// This code will generate a checkbox and a textbox. I need to fire the event of thus generated textboxes.
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input type="text" runat="server" id="aln' + column + '"> </div>';
return iHtml;
}
</script>

There's two ways: keep the generated element, or generate an ID when you generate your new element.
a) keep the generated element
This requires that you don't use innerHTML, but create the element (with document.createElement, or with jQuery's $), and then you can use the element directly (no need to call it by ID any more). For instance, with jQuery:
var container = $('#container');
var myDiv = $('<div id="myDiv"/>');
var myCheck = $('<input type="checkbox"/>');
myDiv.append(myCheck);
container.append(myDiv);
b) generate the ID
container.innerHTML = '<div id="myDiv"><input type="checkbox" id="myCheck"/></div>';
// and after this you can get them by ID:
var myCheck = $('#myCheck');

I would just add a class to the textbox in your iHtml then use .live() event
replace your iHtml with this
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="myclass" type="text" runat="server" id="aln' + column + '"> </div>';
then add the live event
$('.myclass').live('change', function() {
alert(' Live handler called.');
});
here is a WORKING DEMO