We Keep Coding

How Can I Use th:data-url

I need to take the number of id from:
<div class="social" th:data-url="#{http://localhost:8080/poll?id=${poll.pollId}" data-title="">
But this does not work. How can I do it?

Hope this helps.
$(document).ready(function(){
//get value of 'this' element that was clicked
var url = $(this).attr('data-url');
// split string and get value of id
var splitted = url.split("id=");
console.log("Id:"+splitted[1]);
});
Or bind onclick or onchange event
<div class="social" th:data-url="#{http://localhost:8080/poll?id=${poll.pollId}" th:onclick="'getId(\''+ ${poll.pollId} +'\')'" data-title="">
And get the id value
<script type="text/javascript">
function getId(id) {
console.log(id);
}
</script>

All the custom attributes are defined using th:attr attribute. Like:
<div class="social" data-title=""
th:attr="data-url=#{|/poll?id=${poll.pollId}|}" data-title="">
Also specifying #{} with the URL or href will build the complete URL.

How to add active element id to url

I was trying to add the id value of active element into a url. Then using a button to redirect to the url.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
Javascript
function myFunction(){
var x = document.activeElement.id;
location.href = "apps-online.html?page=" + x;
}
My expectations was: when I click the button, it will redirect to page
"apps-online.html?page=company"
However, the url of the new page is
"apps-online.html?page="
I was wondering why the value of x hasn't been added to the url.
Hi, everyone. For now I have understood why this problem happened. Because every time when I click the button, the button became the last active element.
So is there any way to achieve my goal?

Do check the value of x whether it is empty or not if it is empty the value of x will be passed as empty so there is no value in the url .try debugging the code or use console.log
function myFunction(){
var x = document.activeElement.id;
console.log(x);
location.href = "apps-online.html?page=" + x;
}
this gives the value of x in the console check this.

Your button does not have an id.
Give id="company" to button element.
<div class="icon" tabindex="0">
<img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>

When you click on the button, the active element is button itself. I am assuming you have several divs and you need to pass the id of the highlighted element. You need to send the id to the function in some way.
Take a look below. This can be one of the many possible solutions.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
<img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
JS
let tabID = null;
let icons = document.getElementsByClassName('icon');
for (icon of icons)
{
icon.onclick = function()
{
tabID = document.activeElement.id;
}
}
function myFunction()
{
window.open("apps-online.html?page=" + tabID);
}

jQuery ID Return is undefined although HTML ID is defined

I'm trying to retrieve the ID of one element, store it as a variable and then use that ID value to interact with other elements in that section with the same ID.
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>
And then the JS/jQuery
function readMore() {
var subID = event.target.id;
var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");
alert(newTarget.id);
}
At this point I'm only trying to display the ID of the selected element but it is returning undefined and in most cases people seem to notice that jQuery is getting confused because of the differences between DOM variables and jQuery ones.
jsfiddle: https://jsfiddle.net/dr0f2nu3/
To be completely clear, I want to be able to click on one element, retrieve the ID and then select an element in the family of that clicked element using that ID value.

just remove the getElementsByClassName("articlePara"); in end of the newTarget .already you are call the element with id alert the element of the id is same with target.id
function readMore() {
var subID = event.target.id;
var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
<div class="articleContent">
<h1>header</h1>
<p class="articlePara" id="one"></p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">click
</div>
</div>

As you have read before, you should keep your id's unique, and you should avoid using onclick in html, but you could do it like this.
With querySelector you get the element and then with parentElement you can retrieve the parent of that element.
function readMore(el) {
var articleFooterId = el.id;
var articlePara = document.querySelector(".articleContent #"+articleFooterId);
var articleContent = articlePara.parentElement;
console.log('articleFooter', articleFooterId);
console.log('articlePara', articlePara);
console.log('articleContent', articleContent);
}
In your html you can return the 'this' object back to the function by doing readMore(this).
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore(this)">footertext</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore(this)">footertext</div>
</div>
jsfiddle

if you're using Jquery:
$(function () {
$('div.articleFooter').click(function () {
var para = $(this).prev().find('p.articlePara').text();
alert('T:' + para);
});
})

$('.articleFooter').click(function() {
var b=subId; //can be any
var a="p[id="+b+"]"+"[class='articlePara']";
$(a).something;
});

You have forgotten to pass in event as parameter in your onclick= call in html.
In your javascript, you need to include event in the parenthesis as well.
window.readMore = function(event) {...}
if you write document.getElementById(subID).getElementsByClassName("articlePara"); That's saying you want to get your clicked element's CHILD elements that have class equal to articlePara . There is none. So you get undefined.
If you want to find all element with a ID one and a class articlePara, it can be done easily with jQuery:
newtarget = $("#one.articlePara");
You can insert a line: debugger; in your onclick handler function to trigger the browser's debugging tool and inspect the values of variables. Then you will know whether you are getting what you want.

Get the both "ID" and "HREF" attributes and create a JSON object

I have a dinamically generated code as follows which lists some files and let the user delete them by clicking on their links:
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>
Each file has its ID. The list is generated via AJAX when the user uploads the files.
When the user clicks a link, before the file is passed to the "delete.php" call, I would like to have a JSON object that lists all the files like this:
{1 : 1984.xls, 2 : 1984.xml}
I managed to made it using an array
var files = [];
$('#filenames').find('a').each(function() {
files.push($(this).attr('href'));
});
But this simply adds to the array the name of the file which is stored inside href.
I don't know how to find both id and attr and create instead of an array a JSON object as said above.

You can do it in following way:
var files = {};
$('#filenames').find('a').each(function() {
files[$(this).attr('id')] = $(this).attr('href');
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>

You have to create an object using {} (and not array []) then affect the key:value to it as files[key] = value when the key is the id of the link and value represented by the href, check the example below.
Hope this helps.
var files = {};
$('#filenames').find('a').each(function() {
var key = $(this).attr('id');
var value = $(this).attr('href');
files[key] = value;
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>

Use bracket-notation to assign value to the object when key is dynamic!
Initialize files as object({}), not as array as you are expecting result as an object
Note: Use .substr(1); if you are suppose to remove #(first character) from string.
var files = {};
$('#filenames').find('a').each(function(i) {
//files[i] = $(this).attr('href').substr(1);;//For index iteration as key
files[this.id] = $(this).attr('href').substr(1); //For ID attribute as key
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls</a>
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml</a>
</div>
</div>

Please try this code
var files = [];
item = {}
$('#filenames').find('a').each(function () {
item[$(this).attr('id')] = $(this).attr('href');
});
files.push(item);
console.log(files);

getting input box value undefined in alert box

I want to get input field value. Only based on class and id name.
I am getting undefined in alert box.
Not getting any value which i have entered in input box.
HTML
<div id="tab1" class="tab-pane active">
<div class="input-text">
<div class="input-append">
<input id="textData" class="input-xxlarge" type="text" name="inputName" />
<button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
</div>
</div>
</div>
JS
$('#pressme').on({
'click': function () {
var data = $(".tab-pane active #textData").val();
alert(data);
}
});

.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:
$("#textData").val();

You can use the selector as your text box id enough
var data = $("#textData").val();

Your selector is incorrect as the div has both classes, so you need to join them together like this:
var data = $(".tab-pane.active #textData").val();
Note that id selectors should be unique, so in effect the class selector is redundant anyway.

It will be like
$('#pressme').on({
'click': function () {
var data = $(".tab-pane.active #textData").val();
alert(data);
}
});
Makesure that you have enclosed it on DOM ready

TRY THIS:
$('#pressme').on('click',function () {
var data = $("#textData").val();
alert(data);
});