I'm trying to add elements dynamically in an ul with ajax and my current code is this in ajax method:
var ul = document.getElementById("menu");
var li = document.createElement("li");
li.appendChild(document.createTextNode(array[i]));
ul.appendChild(li);
But it creates "standard" li elements, i want to create them in this type:
<li style="cursor:pointer;"><a onclick="javascript:$('#cod').val(array[i])">array[i]</a></li>
How can i do this?
[EDIT]
What i want to create is THIS (you can see that it appears a "shadow" that signify it is selectable
But jvascript creates this type of OPTIONS,
now you can see that the options doesn't got that "shadow".
How i understand content for this <%=IDAnag%> insert your back end. And when you click on link this content has already been generated. Maybe you can try something like that:
function AppendLi(val){
var ul = document.getElementById("menu");
var li = document.createElement("li");
li.innerHTML= val;
ul.appendChild(li);
}
<li style="cursor:pointer;">
<a onclick="AppendLi(this.textContent)">
<%=IDAnag%>
</a>
</li>
<ul id="menu"></ul>
But I do not know how you have built the your backend. maybe best way add this event on backend side?
I solved the problem by myself, if someone needed here is the code:
var ul = document.getElementById("menu");
var li = document.createElement("li");
$("li").each(function()
{
var $li = $(this);
$li.css("cursor","pointer");
});
var a = document.createElement("a");
var l = array[i];
a.textContent = array[i];
a.addEventListener("click",function(){
$("#cod").val(array[i]);
});
li.appendChild(a);
ul.appendChild(li);
Related
I have the following code to populate a drop down using getmdl-select
var ul = document.getElementById('allocateToUL');
result.forEach(function (u) {
var li = document.createElement('li');
var dataVal = document.createAttribute('data-value');
var dataSelector = document.createAttribute('data-selector');
dataVal.value = u.Id;
dataSelector.value = u.Id;
li.innerText = u.FriendlyName;
li.className = 'mdl-menu__item';
li.setAttributeNode(dataVal);
li.setAttributeNode(dataSelector);
ul.appendChild(li);
// note call getmdlSelect.init once item is added
getmdlSelect.init('.getmdl-select');
componentHandler.upgradeAllRegistered();
});
What I do not seem to be able to do is find out which option is selected here;
I have tried
document.getElementsByClassName('mdl-menu').find('li.active')
But that just tells me 'find' is not a function although it getElements.... does return list of elements.
Any suggestions?
It looks like you want to use the jQuery find method, but you are not using a jQuery selector. Try replacing:
document.getElementsByClassName('mdl-menu').find('li.active')
With:
$('.mdl-menu').find('li.active')
I am creating a feature on a Woocommerce variable product page where a user can select an option and that option gets added to a summary of items selected. I have multiple variations on the page so I have tried to get the innerHTML of every selected target and tried to add it to the UL by dynamically creating an li and adding to it. But at the moment only one li gets created and it adds all the options selected to it. Is there a way to separate each variation into multiple li's so that it adds the selected option to its own individual li? This is what I have so far.example here. It would be greatly appreciated if I am pointed in the right direction. Thanks a lot :)
var wrappers = document.querySelectorAll('.rtwpvs-terms-wrapper');
var summary = document.querySelector('.selection-summary');
var list = document.querySelector('.selected-items');
var li = document.createElement("li");
wrappers[0].classList.remove('opacity');
let increment = 0;
wrappers.forEach((item, sel) => {
item.addEventListener('click', (e) => {
summary.style.display = 'block';
// Create li items and assign on click innerhtml
li.appendChild(document.createTextNode(e.target.innerHTML));
list.appendChild(li);
increment++;
for(var i = 0; i < wrappers.length; i++) {
wrappers[increment].classList.remove('opacity');
}
})
})
You're appending to the same li (which you created at the top level) at every iteration of your loop. You should be creating a new <li> for each item, and append said <li> to your list, like so:
// Create li items and assign on click innerhtml
const li = document.createElement("li");
li.innerHTML = e.target.innerHTML;
list.appendChild(li);
You don't need the var li = document.createElement("li"); at the top level anymore.
I am quite new to javascript and was wondering if anyone can help with an issue I am having. I want to dynamically add and remove from a list group with inputs. I have worked out the mechanic's from a script floating around the internet but having issues with getting the input as part of the add remove method.
see below.
<script type="text/javascript">
function addItem(){
var ul = document.getElementById("selectme-list");
var selectme= document.getElementById("selectme");
var li = document.createElement("li");
li.className = "list-group-item";
li.setAttribute('id',selectme.value);
li.setAttribute('name','codeal[]');
li.setAttribute('value',selectme.value);
li.appendChild(document.createTextNode(selectme.value));
ul.appendChild(li);
}
function removeItem(){
var ul = document.getElementById("selectme-list");
var selectme = document.getElementById("selectme");
var item = document.getElementById(selectme.value);
ul.removeChild(item);
}
</script>
This script adds and removes the LI fine. But I want to have the input hold the information.
I want example: <li class="list-group-item"><input id="RM" name="codeal[]" value="RM"/>RM</li>
Currently getting example: <li class="list-group-item" id="RM" name="codeal[]" value="RM">RM</li>
Any help would be much appreciated thanks
Try creating a new input node as you created list and append it to list node as child element.
function addItem(){
var ul = document.getElementById("selectme-list");
var selectme= document.getElementById("selectme");
var li = document.createElement("li");
li.className = "list-group-item";
li.setAttribute('id',selectme.value);
x = document.createElement("INPUT");
x.setAttribute('name','codeal[]');
x.setAttribute("type", "text");
x.setAttribute("value", selectme.value);
li.appendChild(x);
ul.appendChild(li);
}
I have the following array:
["uploads-1462948491987.png", "uploads-1462948492004.png"]
What I want to achieve is have an unordered list of anchors (inside list items) with image names. I have done the following:
var uploadsList = document.querySelector('ul'),
imageitem = document.createElement('li'),
anchorTag = document.createElement('a');
anchorTag.setAttribute('href',"#");
var imagesNamesString = "<%= uploads %>";
var imageNames = imagesNamesString.split(',');
imageNames.forEach(function(image) {
anchorTag.innerHTML = image;
uploadsList.appendChild(imageitem.appendChild(anchorTag));
});
console.log(imageNames);
Problem is, the last image is the only one which appears on the list, what may be causing this? Thanks in advance.
Cannot create multiple list items in javascript
Because you're not creating multiple list items. You're creating one:
imageitem = document.createElement('li')
...and then using it:
uploadsList.appendChild(imageitem.appendChild(anchorTag));
where first you append anchorTag to the li, then immediately move it to the uploadsList (because appendChild returns the node appended, not the node you called it on). The same for the anchor, you're reusing one, not creating one for each image.
You need to create the li and anchor in the loop, and append the li, not the anchor:
imageNames.forEach(function(image) {
var li = document.createElement('li');
var anchor = document.createElement('a');
anchor.href = "#"; // No need for `setAttribute
anchor.appendChild(document.createTextNode(image));
li.appendChild(anchor);
uploadsList.appendChild(li);
});
var imageNames = ["uploads-1462948491987.png", "uploads-1462948492004.png"];
var uploadsList = document.querySelector('ul');
imageNames.forEach(function(image) {
var li = document.createElement('li');
var anchor = document.createElement('a');
anchor.href = "#"; // No need for `setAttribute
anchor.appendChild(document.createTextNode(image));
li.appendChild(anchor);
uploadsList.appendChild(li);
});
document.body.appendChild(uploadsList);
<ul></ul>
Note that I replaced the use of innerHTML with:
anchor.appendChild(document.createTextNode(image));
You probably don't want to interpret the image names as HTML. But if you do, just change it back to:
anchor.innerHTML = image;
Or at that point, really, just
imageNames.forEach(function(image) {
var li = document.createElement('li');
li.innerHTML = "<a href='#'>" + image + "</a>";
uploadsList.appendChild(li);
});
var imageNames = ["uploads-1462948491987.png", "uploads-1462948492004.png"];
var uploadsList = document.querySelector('ul');
imageNames.forEach(function(image) {
var li = document.createElement('li');
li.innerHTML = "<a href='#'>" + image + "</a>";
uploadsList.appendChild(li);
});
document.body.appendChild(uploadsList);
<ul></ul>
But I recommend not treating the image names as HTML (unless you actually put HTML in them).
Note that I changed the name anchorTag to anchor. An element is not a tag. A tag is how we define elements textually in HTML. <a> and </a> are tags (a start tag and an end tag, respectively); a is an element.
In my Joomla template I've created a vertical menu including a dropdown which should "push" the elements below away when opening a submenu onclick. Somehow I don't get it to work..
I am trying to grab the UL inside an LI, but how can I do this in JavaScript without the UL's having a class or ID.
I've come to this yet:
function getElements(){
var listitems = {};
for(var i = 0; i< arguments.length; i++){
var id = arguments[i];
var item = navigation.getElementsByTagName("li");
if (item == null)
throw new Error ("No list items found.");
listitems[id] = item;
}
return listitems;
}
Now I should get something like: (I now the following code is impossible, but it describes what I am trying)
var nav = document.getElementById("navigation");
var nestedList = nav ul li ul;
nestedList.onclick(nav ul li ul.style = "display: block";);
The HTML looks like:
<div id="navigation">
<ul>
<li class="parent">
<ul><li></li></ul>
</li>
</ul>
</div>
The CSS looks like:
#navigation ul li ul{display: none;}
Now I want it to display: block when clicking on .parent
Thanks!
Since you already have MooTools included in your page, something like this should work (not a MooTools expert here):
$('#navigation li.parent').addEvent('click', function () {
$('#navigation li.parent ul li ul').setStyle('display', 'block');
});
Old post:
Pure JS (this is not the full code, you have to loop over the elements several times for adding the click listener and applying the styles):
var listItems = document.querySelectorAll("nav ul li ul");
var count = listItems.length;
for (var i=0; i<count; i++) {
var item = listItems.get(i);
item.style.display = "block";
}
Of course the easiest is using jQuery or some other library.
To do it with pure JavaScript for modern browsers, use JS querySelector.
Otherwise you will spend a lot of time in this.