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.

Javascript popup/alert [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have a form that I would like the user to confirm their order is correct. I get two pop ups this way and only want one that summarises the order and prompts for confirmation with a message.
When the user clicks ok, the popup closes and returns to form for submission (there is a submit button). However, if the user clicks cancel then the form resets and popup closes.
Any help is appreciated. Thank you
Note: This is part of an assessment and required to be done this way even though there are better ways.
// JavaScript Document
function display() {
var x=document.confirm.qty.value;
var y=document.confirm.price.value;
var z=document.confirm.total.value;
alert("Quantity:"+x+" \n "+"Price Each:"+y+" \n "+"Total Price:"+z );
if(confirm('Confirm your order?'));
}

You are actually looking for window.confirm(). That is the dialog that displays two buttons: OK and Cancel. It also returns a boolean value indicating whether OK or Cancel was selected.
Assuming that your display function is an onSubmit handler, you could rewrite it like so:
function display(event) {
var x = document.querySelector('[name="qty"]'),
y = document.querySelector('[name="price"]'),
z = document.querySelector('[name="total"]');
// Simplified string creation with ES6 String Interpolation
var confirm = window.confirm(`
Quantity: ${x.value}
Price Each: ${y.value}
Total Price: ${z.value}
`);
if (confirm == true) {
// All OK
return;
} else {
// Blocking default `submit` event
event.preventDefault();
// Resetting form
x.value = null;
y.value = null;
z.value = null;
return;
}
}
Do not forget to pass in the event to the callback:
<form onsubmit="display(event);">

It should be
return confirm('...
Further make sure the onclick is has return in front of your method name in HTML.

Popups are quite uncommon for this use-case. Create a div which overlays the whole site (makes all other things unclickable). In that div create another one which is centered where you ask for the confirmation.

I think you want something like this:
function display()
{
var x = document.getElementById('qty').value;
var y = document.getElementById('price').value;
var z = document.getElementById('total').value;
var result = confirm('Quantity:' + x + '\nPrice Each: ' + y + '\nTotal Price: ' + z + '\n\nConfirm your order?');
if(result)
{
// user has pressed OK
}
else
{
// user has pressed cancel
}
}

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

jQuery check if the div contains such element before appending [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to check with jquery if the div contains such element before appending. I tried three versions but none of them helped.
Could you please check the commented lines of my code and help me to find the mistake.
var item = $('<div>');
var info = $(''+abc+'');
item.append(info);
var info = $(''+abc+'');
if (!item.contains(info)) { // first version
if (!item.has(info)) { // second version
if (!item.find(info).length() > 0) { // third version
item.append(info);
}

You can find all <a>'s in <div>'s:
var items = $('div a');
Now, if you need just <a>:
if (items == null) { $('div').append('<a></a>'); }
else, if you want find exact <a>, make a for loop:
var exactHref = "http://...";
if (items == null) {
var dummy = 0;
for (i = 0; i < items.length; i++) {
if (items[i].href == exactHref)
{
dummy +=1;
}
}
if(dummy > 0)
{
$('div').append('<a></a>');
}
}
It's not beautiful, but should work.

You can do it like following:
if (item.find('a').length == 0) {
// do your task here
}

You have to use .contains () for that.
var item=$("<div></div>");
var info = $("<a href=''></a>");
item.append (info);
if (item.contains (info))
{
//your code
item.append (info);
}

how to show drop down on row as in Android device using jQuery? [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
Can you please tell me how to make this type of list view using jQuery +jQuery UI and jQuery Mobile? I am able to add rows in my list, but I need to add any icon on each row. On Click on each icon it should should this menu option. I am able to make row after click of button. It generate the rows after click of add button. I need to add pop screen on each icon of each row.
http://jsfiddle.net/FZQ8D/24/
function createTestCase(testCaseName,iscreatedFromScript,jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow">' + id + '</li>' + '</ul>' + '</div>';
$('#testCaseContainer').append(html).enhanceWithin();
}

To get you started, you will need to:
Create a menu handle element that will need to exist inline with your list item.
Create the menu itself. I did this inline but you could have done it somehow else.
Bind an event handler to display or hide the menu onclick. I used a custom data attribute to link the three-dot handle to the appropriate menu div.
I added to your demo to show this basic functionality. It still requires additional work (it still has bugs) but should get you started on extending its functionality to get you to your end goal.