How can I get parents' parents' child's value using jQuery?

How can I get parents' parents' child's value using jQuery? - javascript

I'm a student who is studying Python alone these days.
Below is part of my HTML page's JavaScript code.
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm()">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
</div>
<br/>
</div>
`
javascript function :
function confirm(){
alert('confirmed👌')
let test = $(this).parent().parent().find(".card-img-top").attr("src");
alert(test)
window.location.reload()
}
What I want to do is:
When user clicks btn-success button,
call confirm() function,
and get img src (${image} in my code)
to call AJAX.
I tried code above but it didn't work.
How can I get img src value?

From your comment I see that temp_html_0 will be repeated, then why not just use a subclass with a unique identifier like the iteration index for example and add it to your image class as the following
<img class="card-img-top top-img-{index}">
And then you can pass that index to your function and get that element by using your logic.

You can pass the button reference in HTML event binding confirm(this) reject(this), then you may access the parent and image src in both of the methods as shown in be below snippet.
function confirm(btn) {
var $btn = $(btn);
var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
console.log(`confirmed - ${imgSrc}`);
}
function reject(btn) {
var $btn = $(btn);
var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
console.log(`rejected - ${imgSrc}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<img class="card-img-top" src="${image}" alt=" Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject(this)">Reject</button>
</div>
<br />
</div>

The core of the problem is that you use the onclick attribute. The value of it is confirm(), so when activated it will call the function but not set the context in any way. So this will be window (if you're not in strict mode).
A quick fix would be to modify the function definition to function confirm(el){ and the HTML to onclick="confirm(this)" in order to have access to the element that's clicked as a parameter. This leads to this code:
function confirm(el){
console.log('confirmed👌')
let test = $(el).parent().parent().find(".card-img-top").attr("src");
console.log(test)
//window.location.reload()
}
//////////////////////////////
const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
<button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
</div>
<br/>
</div>
`
$("#main").append(temp_html_0);
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>
However, a better technique is to use event binding on dynamically created elements using event delegation. It will execute the function with the correct context and further allows you to still have a single event handler but you do not mix the HTML with logic that JavaScript would use.:
function confirm(){
console.log('confirmed👌')
let test = $(this).parent().parent().find(".card-img-top").attr("src");
console.log(test)
//window.location.reload()
}
$("#main") // --> common ancestor for all your dynamic elements
.on("click", ".btn-success", confirm);
// ^^^^^^^^^^^^^^ ^^^^^^^ --> event handler to execute
// ↳ element to monitor for clicks
function reject(){
console.log('rejected👎');
}
$("#main").on("click", ".btn-danger", reject);
//////////////////////////////
const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";
let temp_html_0 = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="reason-comment">REASON : ${comment}</p>
</div>
<div class="button-result">
<button type="button" class="btn btn-success">Confirm</button>
<button type="button" class="btn btn-danger">Reject</button>
</div>
<br/>
</div>
`
$("#main").append(temp_html_0);
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

You can directly pass image src as parameter into confirm function call like this:
<button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button>
and you can get this parameter value inside confirm function.

Related

Javascript and HTML defer tag not working

The Javascript function below works perfectly when at the bottom of html file. However, I need it in main.js file. It has been suggested that adding the defer tag to the script tag will enable this but unfortunately not. It prints the first console.log but then stops. Any suggestions?
<script src="/static/main.js" defer></script>
// function to add items to shopping
let cartbutton = document.getElementsByName('ropebutton');
console.log(cartbutton) // prints node []
const cart = [];
for(var i = 0; i < cartbutton.length; i++) {
let button = cartbutton[i];
console.log(button); // doesn't print
button.addEventListener('click', (event) => {
console.clear();
console.log(event.target);
console.log(event.target.dataset.test);
cart.push(event.target.dataset.test);
console.log(cart)
});
};
<div class="column">
<img src="static/111.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope111" id="rope111" name="ropebutton" onclick="addcart(this.value);" type="submit">$4,500 buy</button>
<img src="static/112.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope112" id="rope112" name="ropebutton" type="submit">$3,500 buy</button>
<img src="static/113.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope113" id="rope113" name="ropebutton" type="button">$1,550 buy</button>
</div>```

There are two methods to have your code executed after loading the HTML content and to avoid blocking the render of the page. Either reference your script at the end of your <body> tag or in <head> but with defer attribute.
You can try referencing the script at the end of your <body> tag like this:
<bod>
<div class="column">
<img src="static/111.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope111" id="rope111" name="ropebutton" onclick="addcart(this.value);" type="submit">$4,500 buy</button>
<img src="static/112.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope112" id="rope112" name="ropebutton" type="submit">$3,500 buy</button>
<img src="static/113.jpg" alt="Rope" class="imgsize">
<button class="btn btn-dark" data-test="rope113" id="rope113" name="ropebutton" type="button">$1,550 buy</button>
</div>
<script src="/static/main.js"></script>
</body>
I can't see any issues in your JS code that prevent you from using either methods

Previous poster corrected this. I did as Fadi said and put the following at the end of every html file that needed it:
<script src="/static/main.js" defer></script>
I hadn't realised you can use it multiple times. Thank you Fadi Hania.

How to insert html element inside the index.html from javascript

I want to insert the card into container using javascript. How do I do it. or make those card display in flex. So it's not like shown in below pic. I have used insertAdjancentHTML to insert the data in note class using javascript. However i'm unable to put them in container.
const addBtn = document.getElementById("add");
const addNewNote = (text = "") => {
const note = document.createElement("div");
note.classList.add("note");
const htmlData = `<div class="card m-4" style="width: 18rem">
<div class="card-body">
<div class="d-flex justify-content-between">
<h5 class="card-title">Card title</h5>
<span class="icons">
<button class="btn btn-primary">
<i class="bi bi-pencil-square"></i>
</button>
<button class="btn btn-primary">
<i class="bi bi-trash"></i>
</button>
</span>
</div>
<hr />
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>`;
note.insertAdjacentHTML("afterbegin", htmlData);
console.log(note);
document.body.appendChild(note);
};
addBtn.addEventListener("click", () => {
addNewNote();
});

Firstly, just use innerHTML - it's an empty element:
note.innerHTML = htmlData;
Secondly, you need to select the element to append this note to. Add an ID:
<div class="container d-flex" id="noteContainer">
And append it like so:
document.getElementById("noteContainer").appendChild(note);

You can add an identifier to the div an use the appendChild to this div instead of the body of the document
<div id="myDiv" class="container d-flex"></div>
And at the end of your function
document.getElementById("myDiv").appendChild(note);
Working example
const button = document.getElementById("addButton")
const addNote = () => {
const myElement = document.createElement('p')
myElement.innerHTML = "Hello world !"
const div = document.getElementById("myDiv")
div.appendChild(myElement)
}
button.addEventListener("click", addNote)
<button id="addButton">Add element</button>
<div id="myDiv"></div>

Cache the container element.
Return the note HTML from the function (no need to specifically create an element - just wrap the note HTML in a .note container), and then add that HTML to the container.
(In this example I've used unicode for the icons, and a randomiser to provide some text to the note.)
const container = document.querySelector('.container');
const addBtn = document.querySelector('.add');
function createNote(text = '') {
return`
<div class="note">
<div class="card m-4" style="width: 18rem">
<div class="card-body">
<div class="d-flex justify-content-between">
<h5 class="card-title">Card title</h5>
<span class="icons">
<button class="btn btn-primary">🖉</button>
<button class="btn btn-primary">🗑</button>
</span>
</div>
<hr />
<p class="card-text">${text}</p>
</div>
</div>
</div>
`;
};
function rndText() {
const text = ['Hallo world', 'Hovercraft full of eels', 'Two enthusiastic thumbs up', 'Don\'t let yourself get attached to anything you are not willing to walk out on in 30 seconds flat if you feel the heat around the corner'];
const rnd = Math.round(Math.random() * ((text.length - 1) - 0) + 0);
return text[rnd];
}
addBtn.addEventListener('click', () => {
const note = createNote(rndText());
container.insertAdjacentHTML('afterbegin', note);
});
<div>
<button type="button" class="add">Add note</button>
<div class="container"></div>
</div>

How to bind this within js nested object iteration within a function. Jquery

again, probably a terrible title - but what I'm trying to do is to make a simple search feature on my website. You click a nav button, which updates the search bar, whi in turn triggers an onchange event to update the current appended list.
function update() {
var list = $("#comic__modern-list");
list.empty();
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var filter = comics[this].type;
var publisher = comics[this].publisher;
if (search == "") {
if(filter == "modern") {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
} else if (search == publisher) {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
});
}
The current list is generated by this, which works fine:
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var currentObject2 = comics[this].type;
console.log(currentObject2);
if (search == "") {
if(currentObject2 == "modern") {
var list = $("#comic__modern-list");
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
}
});
From what I can gather, this has to do with the keyword "this" no longer meaning what it did when it was outside of the function, so I'm assuming the fix will be to do with bind(), but I can't make heads nor tails of it.
p.s, if there's an easier/simpler way to set up a search system, please enlighten me!

How to change a dynamic button text

Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)

let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.

You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");

Simple Javascript code (function) is not working

The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined
at HTMLButtonElement.onclick (ThfJ8q9:58)"
What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.
HTML:
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JAVASCRIPT DOCUMENT:
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation-
MRP.png')";
}

Could use something like this to listen for a click on the button
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" id="btns"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
var btntrigger = document.getElementById('btns');
btntrigger.addEventListener('click', function(){
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
})
Or have a closer look at your syntax on the orginal, fixed here:
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()">
<img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}
:)

Develop Reference

JavaScript is the programming language of the Web.

How can I get parents' parents' child's value using jQuery? - javascript

You can directly pass image src as parameter into confirm function call like this: <button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button> and you can get this parameter value inside confirm function.

Related

Javascript and HTML defer tag not working

How to insert html element inside the index.html from javascript

How to bind this within js nested object iteration within a function. Jquery

How to change a dynamic button text

Simple Javascript code (function) is not working

Categories

Resources