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>`

jQuery append function is just appending the html but not the classes related to it

I am using php laravel and so it uses blade template to render the views. Following is the javascript code to append html script :-
$(function () {
var count = 0;
$("#min_bonus_value").click(function () {
count++;
var min_bonus_html =
'<div class="min_bonus_row">' +
'<hr>' +
'<div class="row">' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'<label for="bonus_day[' + count + ']">#lang('admin.message759')<span class="text-danger">*</span></label>' +
'<select class="select2 form-control" id="bonus_day[' + count + ']" name="bonus_day[' + count + '][]" data-placeholder="#lang('admin.message759')" multiple>' +
'<option value="1">Monday</option>' +
'<option value="2">Tuesday</option>' +
'<option value="3">Wednesday</option>' +
'<option value="4">Thursday</option>' +
'<option value="5">Friday</option>' +
'<option value="6">Saturday</option>' +
'<option value="7">Sunday</option>' +
'</select>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
Following is the piece of blade template code where the above html needs to be appended, I want to append 'select2' class which is styled to select multiple days, but in vain :-
<div id="minimum_bonus">
</div>

I may be off here but when you say "not the classes", do you actually mean the Javascript/jQuery funcionality?
If so, I'll try to explain what is happening: when you initialize a jQuery plugin, like select2, it acts upon what exists in the DOM at the moment you initialize it. So if you later create new items, these won't have the select2 functionality, unless you initialize it again for said new items.
I suggest you create a function to initialize select2 and call it whenever you add new elements to your DOM. You'd need to somehow single out the elements that have already been initialized. You can do so with a class, in this example, the class is 'select2-enabled'. Like this:
function initSelect2() {
$(".select2").each(function(){
if (!$(this).hasClass('select2-enabled')) {
$(this).addClass('select2-enabled');
$(this).select2({
// all your select2 options
});
}
});
}
And then, after you append your new html, you can call your function to initialize select2 on the new elements:
$(parentElement).append(newHTML);
initSelect2();

LocalStorage append New Element

his is : My First JSFiddle. It just appends <li></li>. It works for LocalStorage and shows the result
$(".nav").append($("<li></li>").html(inputan));
I want append like My Second JSFiddle:
var addFolder = '<li>' +
'<div class="zf-folder">' +
'<a></a>' +
'</div>' +
'</li>';
$(".nav").append($(addFolder).html(inputan));
This works for LocalStorage, but is not showing a result when the page is reloaded. I want to use use a method like that because my code looks like this :
With append method $('.nav').append(addFolder);
How can I display LocalStorage result with my second jsFiddle method?

You had addFolder inside your submitButton click handler, hence it is only available in the handler function scope.
$(".submitButton").click(function() {
var inputan = $("#input_nameFolder").val();
// move the below variable outside of this function
var addFolder = '<li>' +
'<div class="zf-folder">' +
'<a></a>' +
'</div>' +
'</li>';
...
});
Move addFolder outside of the function and it should work.
Updated your fiddle.
Edit: To get correct index
You can add a function that returns the addFolder with the current/updated index. The same function can be used for first time rendering on page load and every time on adding item from the input.
Something like:
var count = 1;
function getNewList() {
var addFolder = '<li data-index="' + (count++) + '">' +
'<div class="zf-folder">' +
'<a></a>' +
'</div>' +
'</li>';
return addFolder;
}
You can check out here:
Edited Fiddle for index
// check for the data-index on li items in the console

slideToggle() doesn't push elements created with jquery append() down

I do have a problem using slideToggle(). The following DOM elements won't be pushed down, they just overlap. I tried a lot of versions. I do create the tags with jquery getting a JSON from which I fill in the tag content, so I iterate over the JSON to create the HTML tags for each element :
var project_infos = '';
jQuery(document).ready(function(){
$.getJSON('project.json', function(data){
project_infos += '<div class=\"row\">'
+ '<div class=\"span3\">'
+ '<div class=\"well\">'
+ '<div>'
+'<ul class=\"nav nav-list sidebar-list\">';
for( var i = 0; i < data.length; i ++ ) {
var project_name = data[i]["item"];
project_infos += '<li>'
+'<label class=\"tree-toggler nav-header\">'
+'<i class=\"fa fa-arrow-right\"></i>' + project_name + '</label>'
+'<ul class=\"nav nav-list tree\">'
+'<li><label class=\"tree-toggler nav-header\">Katalogue</label></li>'
+'<li>'
+'<ul class=\"nav nav-list tree\">'
+'<li>Link</li>'
+'<li>Link</li>'
+'<li>Link</li>'
+'</ul>'
+'</li>'
+'<li><label class=\"tree-toggler nav-header\">History</label></li>'
+'<li><label class=\"tree-toggler nav-header\">Whole project</label></li>'
+'</ul>'
+'</li>';
}
project_infos += '</ul></div></div></div></div>';
$('#tree').append(project_infos);
$('.tree-toggler').click(function () {
$(this).parent().children('ul.tree').slideToggle('slow');
});
});
});
EDIT : screenshot of html output.
screenshot html output
Thanks in advance!

Use
find() instead of children()
$(this).parent().find('ul.tree').slideToggle('slow');
children() will only search for first level child elements.

I just reset all css styles for my div and finally it worked. I already defined styles for the sidebar and for the ul and li tags. One of the styles was the problem. It kept the elements from toggle down in the sidebar.
Thanks for your time!

how to append the data using jquery?

I need to add the value into the span using dom. But now i am using string manipulation. how to change this into the dom or append the value . i need to get the return value in html formate using dom.

Define layer.id as some text and this will get replace in all span element content
$.each($("span"),function(){
$(this).html(layer.id);
});
Thanks

You can append like following :
$('.ClassName').append('<p>Test</p>');

$('#id').after('<p>Test</p>');
$('#id').before('<p>Test</p>');

Try with this:
$("<li class='" + liClass + "'>" + preElement +
"<label for='" + layer.id + "'>" + layer.name + "</label>").appendTo('ul.class');
//----------^^^^^
// use the id
// or class of
//the specific ul
use appendTo() instead return and append it to your element.
(as i see you are returning li then append it to the ul)