We Keep Coding

Retrieving the values in an un - ordered list and list items

I have html rendered in the format below.
I want to be able to get the values 13,14,15 and store in different variables.
I want to be able to get the value id=9 as well for this row.
I will be updating a table and needs this Id together with the other rows.
Here is the html rendered
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera">13</div>
<div class="innerb">14</div>
<div class="innerc">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
Here is the jquery I am trying to write
$(document).on("click", "img.modify", function () {
var rowA = $("ul[class='sub'] li[div.class innera]")
var rowB = $("ul[class='sub'] li[div.class innerb]")
var rowB = $("ul[class='sub'] li[div.class innerc]")
var Id of row ?
});
Right now I am not getting anything for the variables? Kindly assist.

I think you just need to review the jQuery (CSS) selectors: https://api.jquery.com/category/selectors/
$("ul[class='sub'] li[div.class innera]") won't match anything.
$('ul.sub>li>div.innera') would work, but maybe you want something a little different. Take a look at the selectors docs, and some trial and error :)

Can't you use a foreach loop on the li tag?
Like this?
$(document).on("click", "img.modify", function () {
var id = $('.sub > li').first().attr("id");
console.log(id);
$('#'+id+' > .divValue').each(function () {
var variableName = $(this).text();
console.log(variableName);
});
});
}
I would add an class to the elements value you want.
Like this:
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera divValue">13</div>
<div class="innerb divValue">14</div>
<div class="innerc divValue">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>

Displaying selection text in span

So let's say I have this code:
<span id="select_list">
<ul>
<li><a id="1">1</a></li>
<li><a id="2">2</a></li>
<li><a id="3">3</a></li>
</ul>
</span>
<span id="selection"></span>
And let's also assume that there are a lot of list elements, ex. '4,5,6,7... etc'.
Can I get a html file, that is basically just text, that corresponds to the list element's ID (ex. 1.html, 2.html,... etc), to show in 'selection'?
If so how?
Thanks for your time. Hope I explained it well.

Something like this (jQuery) should work:
var list = $("#select_list");
var sel = $("#selection");
$("a", list).on("click", function(){
var id = $(this).attr("id");
sel.load(id+".html");
});

<div id="select_list">
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
<div id="selection"></div>
i would use a div not span spans are for if you want to change the size of something particular like this:
<li id="1" href="#"><a href="#"><span style="color: red;
font-size: 30px">1</span></a></li>
and from what i am understanding you want a selector to select them in css?
if so this is how:
#select_list ul li:nth_child(1) {
}
or
#select_list ul li#2 {
}
hope this helps you

I would suggest using data-attributes instead of IDs.
HTML
<ul class='selection-list'>
<li data-name='Dog'>Dog</li>
<li data-name='cat.html'>Cat</li>
<li data-name='45'>Fourty Five</li>
<li data-name='Triangle'>Three sides</li>
</ul>
<div class="output js-output"></div>
jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('name');
$output.text(selectionValue);
});
CSS
.selection-list li {
cursor: pointer;
}
jsFiddle
iframe
I'm starting to think that you are asking for an iframe with dynamic source. The question is unclear. You may want to try and rewrite it. - Here is what I think you may be after...
HTML
<ul class='selection-list'>
<li data-url='http://reputable.agency'>Reputable Agency</li>
<li data-url='http://perpetual.education'>Perpetual Education</li>
<li data-url='http://example.com/index.html'>Example.com</li>
</ul>
<iframe src='http://example.com' class="output js-output"></iframe>
JavaScript / jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
// get the 'data-url' from the element...
var selectionValue = $(this).data('url');
// put that data-url into the src attribute of the iFrame
$output.attr('src', selectionValue);
});
Also..
Note that if you are using the same domain for all of these, you can build those urls differently to keep things simple.
<li data-url='index.html'>Example.com</li>
$output.attr('src', 'http://yoursite.com/' + selectionValue);
jsFiddle
AJAX
Now I'm wondering if you mean AJAX. Here is an example - but it's not tested because I don't have access to a bunch of relative URLs - but here is the basics - and should lead you to the right documentation.
HTML
<ul class='selection-list'>
<li data-url='index.html'>Reputable Agency</li>
<li data-url='index.html'>Perpetual Education</li>
<li data-url='index.html'>Example.com</li>
</ul>
<div class="output js-output"></div>
JavaScript / jQuery
var $output = $('.js-output');
var getOtherPage = function(target) {
$.ajax({
url: target,
success:function(response){
$output.html(response);
},error:function(){
alert("error");
}
});
};
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('url');
getOtherPage(selectionValue);
});

How to get the value of data attribute using jquery

I am working on a node.js application which generates a html page. This html page displays a list of associates built according to the data passed onto this page. A list is built something like as follows:
<ul class="notification-body" style="">
//loop for all assocaite id's passed to this page
<li class="testClass" data-associateid="<%= assocID %>">
<span>
<span class="subject">
<label class="btnClass label label-info">ClickMe!</label>
</span>
</span>
</li>
The generated html src looks something like this:
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">
<li class="testClass" data-associateid="AA02">
<li class="testClass" data-associateid="AA03">
I am trying to get the value of the data attribute using Jquery & I tried the following:
$(".btnClass").click(function(){
console.log($".testClass").attr("data-associateid"));
});
But this outputs'AA01'everytime i click on the btn and I am not getting the expected output in the console:
AA01
AA02
AA03
I tried the following also but it gives me undefined:
$(".btnClass").click(function(){
console.log($(this).find(".testClass").attr("data-associateid"));
});

You need to use jQuery.data().
I've created a jsFiddle to show this working.
I've closed the LI because AR.
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">1</li>
<li class="testClass" data-associateid="AA02">2</li>
<li class="testClass" data-associateid="AA03">3</li>
</ul>
Here's the JavaScript:
$(document).ready(function() {
$('.testClass').on('click', function(){
alert( $(this).data('associateid') );
});
});
Anytime you have an attribute that starts with data-, you can reference the string after the dash as a data container. Here, I'm calling jQuery.data() on an object (the LI) and asking for the data in the container associateID.

What you are currently doing:
$(".btnClass").click(function(){
console.log($(".testClass").attr("data-associateid"));
});
Will match the first instance of .testClass and print the data-associateid attribute. What you seem to want to do is to iterate over all .testClass and print their data-associateid values:
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
Based on your updated HTML you would do this:
$(".btnClass").click(function() {
var id = $(this).parents('.testClass').attr('data-associateid');
console.log(id);
});
This will search the parents of the clicked on .btnClass to find elements with the class .testClass.

To get the data for that instance you simply need to traverse to the parent <li>.
Within an event handler, this is the element that the event occured on. Use closest() to access the parent <li>
$(".btnClass").on('click', function(){
alert( $(this).closest('li').data('associateid') );
});

Assign different classes to your li elements like this:
<ul class="notification-body" style="">
<li class="testClass1" data-associateid="AA01">test 1</li>
<li class="testClass2" data-associateid="AA02">test 2</li>
<li class="testClass3" data-associateid="AA03">test 2</li>
</ul>
Note, that I closed your li and ul tags to have valid HTML.
And then you can select an element with its own class:
console.log($(".testClass2").attr("data-associateid"));
I created a JSFiddle for you:
http://jsfiddle.net/8rLpbk5m/

I had hoped you could do it with just a find but apparently not. You have to use each to loop through all the elements.
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
View it here: http://jsfiddle.net/rt677qp5/

Using .data() is more logical in this case.
$(".btnClass").click(function() {
$(".testClass").each(function() {
alert($(this).data("associateid"));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01"></li>
<li class="testClass" data-associateid="AA02"></li>
<li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>

How to get li value and print it again

I am creating a website for a university project.
What i have is 3 tables that contain 1 list of links each. The links represent lessons and to what they link it doesn't matter. When a student chooses a lesson then that lesson is supposed to be presented at the bottom of the page without leaving the list.
My code is the following:
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css" href="style.css"> <!--Links the page with my style.css file-->
<body>
<head>
<title>Competences</title>
</head>
<?php
$name = $_GET['name'];
$surname = $_GET['surname'];
echo "<h3>Hello " .$name." ".$surname"</h3>" ;
?>
<div class="background">
<h5>Below are various competences organised into three main categories. Select the ones you think are more important for your studies by clicking on them.</h5>
<div class="box" style="inline" id="1">
<h2>INSTRUMENTAL</h2>
<ul>
<h4>
<li onClick="Copy()">Capacity for analysis and synthesis</li>
<li onClick="Copy()">Capacity for organisation and planning</li>
<li onClick="Copy()">Basic general knowledge</li>
<li onClick="Copy()">Grounding in basic knowledge of the profession</li>
<li onClick="Copy()">Oral and written communication in your native language</li>
<li onClick="Copy()">Knowledge of a second language</li>
<li onClick="Copy()">Elementary computing skills</li>
<li onClick="Copy()">Information management skills (ability to retrieve and analyse information from different sources)</li>
<li onClick="Copy()">Problem Solving</li>
<li onClick="Copy()">Decision-making</li>
</h4>
</ul>
</div>
<div class="box2" style="inline" id="2">
<h2>INTERPERSONAL</h2>
<ul>
<h4>
<li onClick="Copy()">Critical and self-critical abilities</li>
<li onClick="Copy()">Teamwork</li>
<li onClick="Copy()">Interpersonal skills</li>
<li onClick="Copy()">Ability to work in an interdisciplinary team</li>
<li onClick="Copy()">Ability to communicate with experts in other fields</li>
<li onClick="Copy()">Appreciation of diversity and multiculturality</li>
<li onClick="Copy()">Ability to work in an international context</li>
<li onClick="Copy()">Ethical commitment</li>
</h4>
</ul>
</div>
<div class="box3" style="inline" id="3">
<h2>SYSTEMIC</h2>
<ul>
<h4>
<li onClick="Copy()">Capacity of applying knowledge in practice</li>
<li onclick="Copy()">Research Skills</li>
<li onClick="Copy()">Capacity to learn</li>
<li onClick="Copy()">Capacity to adapt to new situations</li>
<li onClick="Copy()">Capacity for generating new ideas(creativity)</li>
<li onClick="Copy()">Leadership</li>
<li onClick="Copy()">Understanding of cultures and customs of other countries</li>
<li onClick="Copy()">Ability to work autonomously</li>
<li onClick="Copy()">Project design and management</li>
<li onClick="Copy()">Initiative and entrepreneurial spirit</li>
<li onClick="Copy()">Concern for quality</li>
<li onClick="Copy()">Will to succeed</li>
</h4>
</ul>
</div>
</div>
<form action="step3.php" method="get">
<input type="submit" value="Submit Choices"/>
</form>
<h5>You have selected the following competences:</h5>
<script type="text/javascript">
var count = new Array();
var i=0;
var column_id = "id";
var col1=0;
var col2=0;
var col3=0;
function Copy()
{
count[i] = "value";
i++;
var div = document.createElement('div');
div.innerHTML = '<div>' + count[i] + '</div>';
if (column_id==1)
{
col1+=1;
}
else if (column_id==2)
{
col2+=1;
}
else if (column_id==3)
{
col3+=1;
}
div.innerHTML = '<div>'Competences Selected: + col1 + " Instrumental" + col2 + " Interpersonal" + col3 +" Systemic."'</div>';
}
</script>
</body>
</html>
Also in competences Selected I will have to tell to the student the number of subjects he has selected from Instrumental list, Interpersonal list and Systemic List.
lets say for example my list is that :
Instrumental
1.option1
2.option2
if option 1 is selected as the lesson from instumental then i will have something like:
Competences Selected: 1 Instumental,0 Interpersonal, 0 Systemic
1.option1
As you can see i tried doing it with javascript but i am not quite sure how to make it work.. I don't know if value is what i should take into consideration or if i am supposed to do it with javascript.

I am not 100% sure what you are doing here, but there are a few things you may want to look at: -
In the line count(i) = "value"; I assume that you are refering to the array. In which case it should be count[i] = "value"
In the line "<div>count(i)</div>"; I assume that you mean to have the value at the count array index in the div, in which case you want div.innerHTML = '<div>' + count[i] + '</div>';
You have onClick="count()" referencing a count() method but also a global count() array. Change the name of the function to avoid confusion.
You have a javascript function called onclick, to avoid confusion give it a name that describes what the function does rather than using the generic onclick name.
Try to reduce the problem you are having to the smallest subset of self-contained code and you will be more likely to get answers.
Update:
Based on your updated code, I think I can see what you are wanting to do. See here for a cut down example, you should be able to apply the same to the rest of the page.
Some notes: -
calling count[i] = "value" will not get you the value of the <li> element. You need to pass the element and call innerHTML or retrieve it in the html.
You actually want the value of the as far as I can tell, so you might as well put the onclick in the <a>.
calling var column_id = "id"; will not get you the id of the containing div. You need to first get the div by a selector. I suggest you look into using jQuery to achieve this. For brevity, I just passed the value in the javascript call.
I left an alert in the Copy() function so you can see what is passed in, you will want to remove this.

How to save HTML ul-li structure into javascript object

i have this following html structure usilg ul and li.
<ul class="treeview" id="productTree">
<li class="collapsable lastCollapsable">
<div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
<span id="top1" class="">top1</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mod1</span>
<ul>
<li class="last">
<span>bottom1</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsable lastCollapsable">
<span id="top2" class="">top2</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mid2</span>
<ul>
<li class="last">
<span>bottom2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
the website allows user to add more data under this structure and am using jquery treeview to show the tree structure dynamically.
Now i need to save this whole ul-li structure into a js object for future use in the website. how do i achieve this? the last node("bottom1 and bottom2 here") has a class "last" if that helps.
as we can add data dynamically we can be sure how much levels of ul li is there at the end when user clicks "save"

You can use recursive function to save a tree object;
function save(obj_ul, tree){
var obj_lis = obj_ul.find("li")
if (obj_lis.length == 0) return;
obj_lis.each(function(){
var $this = $(this);
if($this.parent("ul").get(0) == obj_ul.get(0))
{
tree.push({
name : $this.find('> span').text(),
child : save($this.find("ul").first(), [])
});
}
});
return tree;
}
console.log(save($('#productTree'), []));

If you want to reprouce the same thing verbatim, as a string of HTML elsewhere on the site, you could just do this? Then .append() or .prepend() treeview where you like.
​var treeview = $('#productTree').parent().html()

Assuming you want JSON:
function save(){
var tmp = [];
$('#productTree li.collapsable').each(function(){
var $this = $(this),
$spans = $this.find('span'),
o = [];
$spans.each(function(){
o.push($(this).text())
})
tmp.push(o);
});
return tmp;
}
You could also use map() to accomplish the same thing, too.
EDIT: Updated, assuming your text will live inside a span. This will create an array of arrays, each containing the text from the spans inside each of your list-items.