Questions tagged [bootstrap-tags-input]
jQuery plugin providing a Twitter Bootstrap user interface for managing tags.
jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input supports among other things :
Typeahead dropdowns
Objects in tags
Categorization
There are two major branches :Bootstrap Tags Input for bootstrap 2.x Bootstrap Tags Input for bootstrap 3.x
I'm using bootstrap-tags-input typeahead.js and bloodhound to implement some tagging functionality on a site I'm working on.
I'm using "remote" to get data from an OData endpoint I've made and I'm using the $filter=substringof('%QUERY', Description)…
asked Jan 19 '15 at 14:27
user557419
How to use tags-input of bootstrap with textarea? I have applied data-role="tagsinput" against the textarea. But tags-input is not working whereas same code is working for input type="text".
asked Jan 13 '15 at 12:42
I'm following the pattern described in the official documentation of loading views using components. One of the components has a form field I need to have a method called .tagsinput() called on since I'm using TagsInput. So, something like…
asked Jan 04 '15 at 05:38
I'm only a basic level programmer - writing in PHP and jQuery.
I'm trying to have an autocomplete field in my site that has a text box, and when people start typing, it fetches results from a PHP page of users and ID numbers associated.
I'm…
asked Nov 19 '14 at 04:22
I'm trying to integrate Bootstrap 3 TagsInput plugin with CloudSponge. Specifically I want to use CloudSponge to allow a user to select multiple contacts from an address book and have the results populate an input field that uses the TagsInput…
asked Oct 15 '14 at 20:04
I have been trying to use Bootstrap Tags Input like the example from this link:
http://timschlechter.github.io/bootstrap-tagsinput/examples/
This is my code:
Bootstrap Tags…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a>
<a href="../../questions/tagged/typeahead.js" class="post-tag grid--cell" title="show questions tagged 'typeahead.js'" rel="tag">typeahead.js</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 13 '14 at 18:09">asked Aug 13 '14 at 18:09</time>
<a href="../../users/1672706/mim" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1672706.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="mim" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/1672706/mim" class="s-user-card--link">mim</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">29</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-24944229">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/24944229/bootstrap-tags-input-with-type-ahead-freeinput" class="question-hyperlink">Bootstrap tags input with type ahead freeInput</a></h3>
<div class="excerpt">I want to use the bootstrap tags input jquery plugin with typeahead values. It works great in that I see the typeahead values as I'm typing but I want to make it so the user can't input their own values. Following the documentation from…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a>
<a href="../../questions/tagged/bootstrap-typeahead" class="post-tag grid--cell" title="show questions tagged 'bootstrap-typeahead'" rel="tag">bootstrap-typeahead</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 24 '14 at 21:23">asked Jul 24 '14 at 21:23</time>
<a href="../../users/726148/ldeluca" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/726148.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ldeluca" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/726148/ldeluca" class="s-user-card--link">ldeluca</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">884</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="11 silver badges">11</li>
<li class="s-award-bling s-award-bling__bronze" title="23 bronze badges">23</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-24541646">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/24541646/trying-to-recreate-the-bootstrap-3-angular-js-and-typeahead-demo-example-in-pl" class="question-hyperlink">Trying to recreate the Bootstrap 3, Angular JS and Typeahead demo example in Plunker</a></h3>
<div class="excerpt">I am trying to get a working Plunker with Bootstrap 3, Angular and Typeahead but I am finding some styles are missing and also my model doesn't appear to be binding properly. I have copied the code directly from the demo…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/typeahead.js" class="post-tag grid--cell" title="show questions tagged 'typeahead.js'" rel="tag">typeahead.js</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 02 '14 at 21:52">asked Jul 02 '14 at 21:52</time>
<a href="../../users/3299229/holland-risley" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3299229.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Holland Risley" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/3299229/holland-risley" class="s-user-card--link">Holland Risley</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">6,879</li>
<li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li>
<li class="s-award-bling s-award-bling__silver" title="22 silver badges">22</li>
<li class="s-award-bling s-award-bling__bronze" title="32 bronze badges">32</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-24508101">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/24508101/stylesheet-is-missing-in-bootstrap3-tagsinput" class="question-hyperlink">StyleSheet is missing in Bootstrap3 TagsInput</a></h3>
<div class="excerpt">I tangled this bug for a long period of time.
The StyleSheet is missing in Bootstrap3 TagsInput (on my website)
This is My website:
and my code is:
$('#TagForm').tagsinput('input').typeahead({
prefetch: '/api/tag/list'
…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/twitter-bootstrap-3" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap-3'" rel="tag">twitter-bootstrap-3</a>
<a href="../../questions/tagged/bootstrap-typeahead" class="post-tag grid--cell" title="show questions tagged 'bootstrap-typeahead'" rel="tag">bootstrap-typeahead</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 01 '14 at 10:34">asked Jul 01 '14 at 10:34</time>
<a href="../../users/2386474/tony" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2386474.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tony" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/2386474/tony" class="s-user-card--link">Tony</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">43</li>
<li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-23860085">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/23860085/jsrender-js-fails-when-i-add-bootstrap-tag-js" class="question-hyperlink">Jsrender.js fails when I add bootstrap-tag.js</a></h3>
<div class="excerpt">I added these js:
<script src="js/jsrender.min.js"></script>
<script src="js/bootstrap-tag.min.js"></script>
And I have this template:
<script id="template" type="text/x-jsrender">
<tr class="ui-widget-content jqgrow ui-row-ltr"…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a>
<a href="../../questions/tagged/jsrender" class="post-tag grid--cell" title="show questions tagged 'jsrender'" rel="tag">jsrender</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 25 '14 at 21:22">asked May 25 '14 at 21:22</time>
<a href="../../users/3273535/fernando" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3273535.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fernando" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/3273535/fernando" class="s-user-card--link">Fernando</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">118</li>
<li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-23567837">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/23567837/issue-while-using-bootstrap-tagsinput-api-angularjs-support" class="question-hyperlink">Issue while using bootstrap-tagsinput api angularjs support</a></h3>
<div class="excerpt">I am trying to integrate bootstrap-tagsinput plugin for angularjs support from below link
http://timschlechter.github.io/bootstrap-tagsinput/examples/
But, when I am adding this to my HTML file after adding bootsrap-taginput.css and…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/twitter-bootstrap-3" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap-3'" rel="tag">twitter-bootstrap-3</a>
<a href="../../questions/tagged/bootstrap-typeahead" class="post-tag grid--cell" title="show questions tagged 'bootstrap-typeahead'" rel="tag">bootstrap-typeahead</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 09 '14 at 14:58">asked May 09 '14 at 14:58</time>
<a href="../../users/1131940/angryjs" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1131940.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="AngryJS" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/1131940/angryjs" class="s-user-card--link">AngryJS</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">995</li>
<li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li>
<li class="s-award-bling s-award-bling__silver" title="19 silver badges">19</li>
<li class="s-award-bling s-award-bling__bronze" title="46 bronze badges">46</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-22851091">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/22851091/integrating-bootstrap-3-typeahead-with-bootstrap-tagsinput" class="question-hyperlink">Integrating Bootstrap 3 Typeahead with Bootstrap Tagsinput</a></h3>
<div class="excerpt">I'm trying to integrate the Bootstrap 3 Typeahead plugin (basically a port from the old Bootstrap typeahead functionality before it was removed in Bootstrap 3, if I understand correctly) with the Bootstrap-Tagsinput plugin.
I have no problem…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a>
<a href="../../questions/tagged/bootstrap-typeahead" class="post-tag grid--cell" title="show questions tagged 'bootstrap-typeahead'" rel="tag">bootstrap-typeahead</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 03 '14 at 23:52">asked Apr 03 '14 at 23:52</time>
<a href="../../users/2002412/dcclassics" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2002412.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="dcclassics" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/2002412/dcclassics" class="s-user-card--link">dcclassics</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">886</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="11 silver badge">11</li>
<li class="s-award-bling s-award-bling__bronze" title="34 bronze badge">34</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-56747364">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>-1</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/56747364/jquery-validation-rules-for-tagsinput-only-triggered-on-submit-event" class="question-hyperlink">jQuery Validation rules for tagsinput only triggered on submit event</a></h3>
<div class="excerpt">I use tags input and jquery validation for form,
but this kind of input only been validated on submit event.
Any idea how to solve this? To let it be validated on change event?
</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/jquery-validate" class="post-tag grid--cell" title="show questions tagged 'jquery-validate'" rel="tag">jquery-validate</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 25 '19 at 05:30">asked Jun 25 '19 at 05:30</time>
<a href="../../users/11695596/xie-xiu-yun-hanna" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/11695596.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="叶秀云Hanna" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/11695596/xie-xiu-yun-hanna" class="s-user-card--link">叶秀云Hanna</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">61</li>
<li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-64148410">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>-2</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/64148410/insert-value-with-jquery-to-tags-input-element" class="question-hyperlink">Insert value with jquery to tags input element</a></h3>
<div class="excerpt">I want to insert value through jquery to tags input element html. But didn't work.
My code JS :
$(document).ready(function(){
$('#tags-input').tagsInput();
var tagsValue = 'Jakarta,Bogor,Bandung';
…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/bootstrap-tags-input" class="post-tag grid--cell" title="show questions tagged 'bootstrap-tags-input'" rel="tag">bootstrap-tags-input</a>
<a href="../../questions/tagged/jquery-tags-input" class="post-tag grid--cell" title="show questions tagged 'jquery-tags-input'" rel="tag">jquery-tags-input</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Oct 01 '20 at 02:48">asked Oct 01 '20 at 02:48</time>
<a href="../../users/10655843/genta-haetami-putra" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/10655843.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Genta Haetami Putra" onerror="onImageLoadingError(this);" />
</a>
<div class="s-user-card--info">
<a href="../../users/10655843/genta-haetami-putra" class="s-user-card--link">Genta Haetami Putra</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">93</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<a class="s-pagination--item" href="../../questions/tagged/bootstrap-tags-input_page=14" rel="prev" title="Go to page 14">Prev </a>
<a class="s-pagination--item" href="../../questions/tagged/bootstrap-tags-input_page=1" rel="" title="Go to page 1">1</a>
<a class="s-pagination--item" href="../../questions/tagged/bootstrap-tags-input_page=2" rel="" title="Go to page 2">2</a>
<a class="s-pagination--item" href="../../questions/tagged/bootstrap-tags-input_page=3" rel="" title="Go to page 3">3</a>
<div class="s-pagination--item s-pagination--item__clear">…</div>
<a class="s-pagination--item" href="../../questions/tagged/bootstrap-tags-input_page=14" rel="" title="Go to page 14">14</a>
<div class="s-pagination--item is-selected">15</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script>
/* replace <time class="fromnow" /> with human delta between `datetime` attr and now */
document.addEventListener('DOMContentLoaded', function(){
var time_elements = document.querySelectorAll("time.fromnow");
for (var i=0; i<time_elements.length; i++) {
time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow();
}
});
</script>
</body>
</html> 
