We Keep Coding

Unknown dots rendered into page - what causes them?

I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show

It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.

These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.

There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">

Append HTML using JavaScript

I'm trying to append my menu by referring to an external JavaScript file without manually adding the menu in each of my files. How do I go about this? Here is the menu I intend to add. Btw, I'm using bootstrap. I placed the script src before my ending body tag.
<header class="container">
<div class="row">
<img class="col-sm-2" src="..\logo.png" />
<nav class="col-sm-10 navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li>About</li>
<li class="active">Revenge Is A Dish Best Served Cold</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</header>

Just use innerHTML : https://jsfiddle.net/8zaLv0js/
var ul = document.getElementsByClassName('navbar-nav')[0];
ul.innerHTML = ul.innerHTML + "<li>click me!</li>";

In ES6 you could just
Import './template.html' as template;
document.getElementById('container').append(template);
With the actual standard i guess the easiest way is to use JQuery
$('container').load('./template.html');

Twitter-bootstrap "affix" is not affixing

In implementing a search functionality, I'm returning dynamically generated html in response to an ajax request and inserting the HTML into a div. Part of the dynamic HTML is a "navigation pane" that I want to affix using bootstrap (the "#affixcontainer" div). However, the navigation pane refuses to stick.
<div class="hidden-xs col-xs-3">
<div id="affixcontainer" data-spy="affix" data-offset-top="120" data-offset-bottom="10">
<div class="panel panel-primary">
<div class="panel-heading">SEARCH RESULTS</div>
<div class="panel-body" style="padding:0;margin:0">
<nav id="scroll-nav" class="bs-docs-sidebar hidden-print hidden-xs" role="navigation">
<ul class="nav nav-pills nav-stacked bs-docs-sidenav">
<li><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>Top</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
SEARCH LISTINGS
</div>
I also tried to affix using javascript (separately, see code snipped below), but that doesn't seem to work either. The script is at the bottom of the dynamically generated HTMl. What am I doing wrong?
$(document).ready(function(){
$("#affixcontainer").affix({
offset: {
top: 120,
bottom: 20
}
});
});

I'm assuming the HTML above is the HTML that is being dynamically inserted. The .affix() function would need to be called after it is appended to the DOM. The data- attributes only work for elements available on page load. Anything inserted after that require a separate call to affix(). See
https://github.com/twbs/bootstrap/blob/v3.3.6/js/affix.js#L148 for it's implementation.
EDIT
Also, $(document).ready() does not work since AJAX calls occurs after this event. The HTML elements would not be in the DOM yet.

How to dynamically generate a basic kendoUI widget?

I'm facing an issue with Kendo UI:
When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.
In my case:
Here is the HTML:
<div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
<div id="profileContent"></div>
She/He Might Like:
<div data-role="scrollview" data-page="0">
<div class="login-scrollV" id="page1" data-role="page">
</div><div class="login-scrollV" id="page2" data-role="page">
</div><div class="login-scrollV" id="page3" data-role="page">
</div>
</div>
</div>
and with Mustache JS, I generate this content dynamically and append it to #profileContent
<script id="profileTemplate" type="text/x-handlebars-template">
<ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
<li>Profile
<ul>
<li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
<li>Gender <span class="sales-up">{{genre}}</span></li>
<li>Notation <span class="sales-up">Not Yet Ready</span></li>
</ul>
</li>
<li>Center Of Interests
<ul>
<li>Rock</li>
<li>Opera</li>
<li>Exhibitions</li>
</ul>
</li>
</ul>
</script>
In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.
I understand why (I assume the html should be there from the beginning), so my question is:
How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?
Many Thanks

You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.

nav-pills is not working

The below code is not working in IE 8.0
It works fine in firefox and chrome browsers . In IE the list items instead of coming on a single row they are coming in multiple lines. How to address this.
I am using Bootstrap v2.0.0
and jQuery v1.7.1
<div class="row-fluid">
<div class="span12">
<div class="pull-left">
<ul class="nav nav-pills">
<li>
<a href="#" data-toggle="pill">openorder"
</a>
</li>
<li >
completedorder
</li>
<li>
service"
</li>
</ul>
</div>
</div>
</div>

It's hard to say with only the HTML here and no example. You tagged this with javascript and jquery - is there some kind of problem here too?
I think you should remove the pull-left class because that just makes the times inside float to the left. I suspect this is your problem.