Basically, I'm trying to create a dynamic list, that allows the user to add list/remove list items.
The problem is for some reason
1) 'createTextNode' in this variable doesn't work.
2)
document.getElementById("myList").appendChild(list ).appendChild(inList);
works, while
var listContainer = document.getElementById("myList").appendChild(list ).appendChild(inList);
listCotnainer.appendChild(list).appendChild(inList);
DOES NOT!!
Any help would be appreciated. Thanks!!
Also, would appreciate if you could direct me to a readily written code for the dynamic list, it'll save me a great deal of time. Thanks!
function addItem(txt) {
var list = document.createElement("li");
var listAtr = list.setAttribute("class", "list-group-item");
listAtr.createTextNode(txt);
var inList = document.createElement("button");
var inListAtr = inList.setAttribute("class", "btn btn-default glyphicon glyphicon-minus");
document.getElementById("myList").appendChild(list ).appendChild(inList);
//listCotnainer.appendChild(listAtr);
}
function removeItems() {
}
function removeItem() {
}
<section>
<div ng-controller="addElements">
<h3>{{subtitle}}</h3>
<button class="btn btn-default glyphicon glyphicon-plus" onclick="addItem('This is a test text')"></button>
<button class="btn btn-default glyphicon glyphicon-minus" onclick="removeItems()"></button>
<ul class="list-group" id="myList">
<!-- dynamically generate list items here -->
</ul>
</div>
</section>
Your variable listContainer is wrong. It should be:
var listContainer = document.getElementById("myList");
listCotnainer.appendChild(list).appendChild(inList);
Related
I want to get last button text via JQuery. You can see my html tag and js code which I have tried but not result.
HTML
<div id="pagedata">
<ul id="paginationIda" class="pagination">
<li><button type="button" class="btn btn-default">1</button></li>
<li><button type="button" class="btn btn-default">2</button></li>
<li><button type="button" class="btn btn-default">3</button></li>
</ul>
</div>
JS
var lastli = $('#paginationIda li:last-child').val();
It looks like you want to retrieve the text from the button.
The updated selector would look like: var lastli = $('#paginationIda li:last-child button').text();
If you want it as a Number instead of String then simply use
var lastli = Number($('#paginationIda li:last-child').text());
According to the documentation val() doesn't seem appropriate here.
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
var lastli = $('#paginationIda li:last-child button').text();
var lastli_asNo = Number($('#paginationIda li:last-child').text());
console.log(lastli);
console.log(lastli_asNo );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagedata">
<ul id="paginationIda" class="pagination">
<li><button type="button" class="btn btn-default">1</button></li>
<li><button type="button" class="btn btn-default">2</button></li>
<li><button type="button" class="btn btn-default">3</button></li>
</ul>
</div>
You should get the text from button, you can use find and replace val by text
Try this code:
var lastli = $('#paginationIda li:last-child').find("button").text();
Result: https://jsfiddle.net/8adjy67y/
var lastli = $('#paginationIda li:last-child').text();
will return a String value . 3 in this case.
If you want it as a number use:
var lastli = Number($('#paginationIda li:last-child').text());
I have this tag:
<td align="center">
<div class="dropdown">
<button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button>
<div id="#TableRowId" class="dropdown-content">
Show
Edit
</div>
</div>
</td>
and JS function:
function DropdownShow(element) {
var elm = document.getElementById(element.querySelector(".dropdown-content").id);
elm.classList.toggle('show');
}
I want when I click on the image glyphicon at the table, to show the dropdown div tag with the class="dropdown-content". To do that I need the each row ID, and I have it on the variable #TableRowId. How can I do that?
You are passing the reference of clicked button so you need to get the element by getting its parent element where parent node can get from parentNode property.
function DropdownShow(element) {
var elm = element.parentNode.querySelector('.dropdown-content')
elm.classList.toggle('show');
}
FYI: If there is no whitespace after the button then you can use nextSibling property to get the element.
var elm = element.nextSibling;
or use nextElementSibling property to get the element even there is a text node.
var elm = element.nextElementSibling;
Check polyfill option for ie8.
I would pass the #TableRowId to the button as a data attribute like this:
<td align="center">
<div class="dropdown">
<button data-dropdown-content-id="#TableRowId" onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button>
<div id="#TableRowId" class="dropdown-content">
Show
Edit
</div>
</div>
</td>
And then your javascript would simply be:
function DropdownShow(element) {
var dropDownContentId = element.getAttribute("data-dropdown-content-id");
var elm = document.getElementById(dropdownContentId);
elm.classList.toggle('show');
}
This would give you the most robust code, because it doesn't depend on the relationships (sibling/parent/child etc) between the two elements.
I'm making a table with nested row's.
The thing is that when I append a child row to a parent row all other parent rows append a child row also.
Use function:
$scope.templates=[{src:'template'}];
$scope.include = function(templateURI) {
$scope.templates.push({src:templateURI});
}
Append row:
<button class="btn btn-default btn-sm ng-scope" ng-click="include('rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show template:
<div ng-repeat="template in templates">
<div ng-include="template.src">My template will be visible here</div>
</div>
Can somebody give me a hint?
I tried to do it myself but I didn't find what I need.
Try this: http://plnkr.co/edit/ZzPF7UFjKyp2tqn27cf4?p=preview
All of the projects are sharing the templates collection. Solve this by giving each project its own templates array and iterating through that.
Make the include function into:
$scope.include = function(project, templateURI) {
if (!project.templates)
project.templates = [];
project.templates.push({src:templateURI});
}
Call it like this:
<button class="btn btn-default btn-sm ng-scope" ng-click="include(project, 'rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show it like this:
<div ng-repeat="template in project.templates">
<div ng-include="template.src">My template will be visible here</div>
</div>
I've got a notifications button in a rails app that lists friends' recent activity. It has a count badge that appears over the button. Once a user views those notifications I want to clear the current badge so the count can restart with new notifications. Any suggestions?
var renderActivities = function() {
var source = $('#activities-template').html();
var template = Handlebars.compile(source);
var html = template({
activities: window.loadedActivities,
count: window.loadedActivities.length
});
I was trying something like this:
$('#notifications-button').click(function(event) {
count: = 0;
});
Source code (outside of body):
<script id="activities-template" type="text/x-handlebars-template">
<button class="btn btn-default" class="dropdown-toggle notifications-button" data-toggle="dropdown"><i class="fa fa-bell-o fa-2x"><span class="badge notifications-count">{{count}}</span></i></button>
<ul class="dropdown-menu pull-right notifications-menu">
{{#each activities}}
{{activityLink}}
{{/each}}
<li class="divider"></li>
<li>See All</li>
</ul>
</script>
I'm really not all that familiar with Javascript but really need this feature to work.
You're going to want to grab the selector that contains the count and set the text to 0. Something like so...
$('#notifications-button').on('click', function() {
$('.notifications-count').text('0');
});
I have no idea about JS. But there is needed one line of code in my Ruby. I have the below html.
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="otherButtonClass ui-state-hover ui-state-focus" type="button" role="button" aria-disabled="false">
<button class="otherButtonClass" type="button" role="button" aria-disabled="false" style="display: none;">
<button class="cancelButtonClass" type="button" role="button" aria-disabled="false">
</div>
</div>
I want JS code to make the first and second button to make them visible. What would be the code?
Please help.
http://jsfiddle.net/SQ7SH/1/
var buttons = document.querySelectorAll('.ui-dialog-buttonset button');
buttons[0].setAttribute('aria-disabled', true);
buttons[1].setAttribute('aria-disabled', true);
Also button require close tag
The current way of setting aria- attributes is to reference the properties directly.
To get:
let el = document.getElementById('foobar');
console.log(el.ariaDisabled); // Should log the current value of aria-disabled.
To set:
let el = document.getElementById('foobar');
el.ariaDisabled = 'true';
console.log(el.ariaDisabled); // Should log 'true'.
Reference: Element.ariaDisabled MDN
var buttons = document.getElementsByClassName('otherButtonClass');
for(var i = 0; i < buttons.length; i++){
buttons[i].setAttribute('aria-disabled', 'true');
}
As asked there is needed one line of code:
document.querySelectorAll('.ui-dialog-buttonset .otherButtonClass').forEach(function (item) {item.setAttribute('aria-disabled', true);});