We Keep Coding

How to call querySelector for different class? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Need to make a webpart which gets data from API in JSON format. I generate a table from JSON with projects number. Then I change each td to link with class="project_number".
Now each position has it's specific class. No I need each link to direct to project details ot url like: https://XXX.azurewebsites.net/api/protocollines?protocolNo=PR0002
I don't know what parameter should I place in querySelector to have addEventListener for each link.
document.querySelector("???").addEventListener('click', *function*);
function changeToLink(){
var tableCells = Array.from(document.getElementsByTagName('td'));
var i;
var proNo = "PR0";
for (i=0; i<tableCells.length; i++ && isContains == true) {
var proFromArray = tableCells[i].innerHTML;
var isContains = proFromArray.includes(proNo);
if(isContains == true){
var tdElement = document.getElementsByTagName('td')[i];
console.log('Profrom: ' + proFromArray);
tdElement.innerHTML = `<a class="${proFromArray}" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`
}
}
}
document.querySelector(`??`).addEventListener('click', *function*);

There's a few ways to do this.
Option 1
You could create the anchor elements using JS, and add the onclick event when you create each one, like:
// inside the if(isContains == true){
var a = document.createElement('a');
a.className = proFromArray;
a.href = `https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}`;
a.textContent = proFromArray;
a.onclick = this.getJsonData;
I created a Fiddle to demonstrate how it works: https://jsfiddle.net/brettnolf/f3xd7ag1/
Option 2
Now, if you need to create it in the form of a string and later call querySelector on what you created, you could add the same class to each anchor tag:
tdElement.innerHTML = `<a class="${proFromArray} pro-elem" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`
Then add the event listener, like:
var pros = document.querySelectorAll('.pro-elem')
for (var i = 0; i < pros.length; i++) {
pros[i].addEventListener(this.getJsonData);
}
Option 3
If both of those solutions are out of the question, you could use a query selector wildcard and add the event listener similar to the above:
var pros = document.querySelectorAll('[class^=PR0]')
// or if you wanted to be really specific:
// document.querySelectorAll('td a[class^=PR0]')
for (var i = 0; i < pros.length; i++) {
pros[i].addEventListener(this.getJsonData);
}
You can see this last solution in action if you pull up Chrome dev tools here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll and enter document.querySelectorAll('[class^=title]') in the Console.
Note that the last two options will only work after the elements have been added to the DOM. In the first option, you add the listener when you create the element, so you do it on the fly.

Jquery/Javascript Datatables : How to display row data into html textfield on row selection [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have used the following datatable in my project. I have successfully populated all the data into the datatable.
I just need to populate a specific row data on row selection into textfields found on the same page and update those data which will then be saved in the database.
Link of datatable used: https://datatables.net/examples/api/select_single_row.html
jsfiddle: https://jsfiddle.net/o92g9goL/2/

UPDATE:
var name = $(this).children('td[name="name"]').text();
var position = $(this).children('td[name="position"]').text();
var office = $(this).children('td[name="office"]').text();
var age = $(this).children('td[name="age"]').text();
var startdate = $(this).children('td[name="startdate"]').text();
var salary = $(this).children('td[name="salary"]').text();
var nameInp = $('input[name="name"]');
var positionInp = $('input[name="position"]');
var officeInp = $('input[name="office"]');
var ageInp = $('input[name="age"]');
var startdateInp = $('input[name="start"]');
var salaryInp = $('input[name="salary"]');
$(nameInp).attr('value',name);
$(positionInp).attr('value',position);
$(officeInp).attr('value',office);
$(ageInp).attr('value',age);
$(startdateInp).attr('value',startdate);
$(salaryInp).attr('value',salary);
JSFiddle
It's what you want, you should use Simple inline editing from dataTables.editor.min.js:
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
JSFiddle
and also check this out:
Simple inline editing
Bubble editing with in table row controls

Using JSON and underscore.js to link to content [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a JSON file titled with many different attributes regarding books (author, desc, title etc). I am using JSON to load the content into a div and display only the title. My problem is I'm trying to make each title a link and display the rest of the content for that specific book in a separate div on the same page. Below is what I have so far. Whenever I try to reference anything after the click function my response it "undefined"
$.getJSON("data/data.json", function(data){
var res = _.sortBy(data.books, function(item) { return item.name });
_.each(res, function(item){
$("#books").append("<p class='book'>"+item.name+"</p>");
});
$(".book").click(function() {
var clickedItem = $(this);
$("#details").append("<p>"+clickedItem.author+"</p>");

You could store the details of each book in the data of the node. This way you can access it anytime..
$.getJSON("data/data.json", function(data){
var res = _.sortBy(data.books, function(item) { return item.name });
_.each(res, function(item){
var book = $("<p class='book'>"+item.name+"</p>").data('details', item);
$("#books").append(book);
});
$("#books").on('click', '.book', function() {
var clickedItem = $(this),
details = clickedItem.data('details');
$("#details").html("<p>"+details.author+"</p>");
});
});

Show an individual part of a string as output [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my JavaScript code. I want to get only the value inside li tags using JavaScript. How can I do it?
JavaScript
var s="<div><li>First LI</li><li>Second LI</li></div>";
I want to show First li and Second li as output. Thank you.

You can use .text() to get the text content of your li elements:
var text = $(s).find('li').text();
Fiddle Demo

With the help of jQuery it is rather easy:
var str = '<div><li>First LI</li><li>Second LI</li></div>',
first = $('li:eq(0)', str).text(), // "First LI"
second = $('li:eq(1)', str).text(); // "Second LI"
console.log(first, second);

You can use following javascript, get element by tag name and iterate over the values like below
var liArray = document.getElementsByTagName('li');
for(var i=0; i < liArray.length ;i++)
{
var liValue = liArray[i].innerHTML;
alert(liValue);
}

check here, this may help you
<div><li>First LI</li><li>Second LI</li></div>
$('.btn').click(function(){
alert($('div li').text());
});
http://jsfiddle.net/Sathisa/78ktD/

The following code will output: 'First LI Second LI', the contents of both lis separated by a whitespace.
If you need it as array, just omit the join at the end.
var lisContent = $.map(
$('li', "<div><li>First LI</li><li>Second LI</li></div>"),
function(element) {
return $(element).text();
}
).join(' ');
console.log(lisContent);
http://jsfiddle.net/6gG3k/

click and add div but remove it to other element [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
i'm trying to make a script that when i click on a list it add a div inside the tag <li>, this one is ok, but my problem is that when i click in a other <li> i would like remove the div before inserted how can i do that and i would like remove the class .selected as well? Thanks.
$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});

Try
$(document).on('click', '#horiz_container img', function () {
var img_selected = $(this), $li = img_selected.closest('li');
var value_sport = img_selected.val();
var $selected = $('#horiz_container .selected').removeClass('selected');
$selected.find('.selected_sport').remove();
$li.addClass('selected');
$li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>');
});

$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
**$('.selected_sport').remove();**
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});