We Keep Coding

cannot set all the data-x attr of a popover

I'd like to use the popover to reduce the place taken on my website to delete something.
I created a popover in my view :
<a
class="btn text-muted"
data-toggle="popover"
data-placement="bottom"
tabindex="0"
data-content='
<a
href="#"
class="remove-template {{ index }}"
data-index="{{ index }}"
>
remove template
</a>
'
>
<span class="fa fa-trash"/>
</a>
I try to use it in my javascript code as such
import $ from 'jquery';
import 'bootstrap';
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$(".remove-template").click(function (event) {
event.preventDefault();
var index = $(this).data('index');
//for debugging
alert($(this).attr('class'));
alert($(this).attr('data-index');
$("#li-field-"+index).remove();
updateTemplate();
});
});
as an output I get a first alert that shows
remove-template 0
So I know that the {{ index }} variable is set in my view but for the second one I get
undefined
Isn't it possible to set data-x attr on a popover directly in the data-content attr ?
EDIT:
I created a code snippet trying to reproduce the behaviour of my page and of course it work smoothly...
$(document).ready(function () {
$("#pop").popover();
});
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$('.remove-template').click(function(){
var index = $(this).data('index');
alert("index in the link = "+index);
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="pop" data-content='<a
href="#"
class="remove-template 0"
data-index="1"
>
remove template
</a>'>
<span class="fa fa-trash mr-1"/>
Send to the trash
</button>
</div>
So apparently the problem is somewhere else. In any case as it is not reproductible this question doesn't make sense any more.

Actually, you are using the .click() function which is listening a click javascript event on the given jQuery object.
But like i said before is that jQuery will not be able to listen this event cause you generated this html node after DOM generation.
To fix your problem, you'll need to listen an already existing object (like body) and then watch the html class you want: see example
function addBlock() {
var test = '<div class="foo" data-test="after">X</div>';
$('#container').append(test);
}
$(document).ready(function() {
addBlock();
addBlock();
});
// This will work
$('body').on('click', '.foo', function() {
$('#bodyClickEvent').empty();
if (!$(this).hasClass('staticFoo')) {
$('#clickEvent').html('<span>​</span>');
}
$('#bodyClickEvent').html($(this).data('test'));
});
// This part of code will not work
$('.foo').on('click', function() {
$('#clickEvent').empty();
$('#clickEvent').html($(this).data('test'));
});
.foo {
display: inline-block;
width: 50px;
height: 50px;
background-color: rgb(50, 50, 50);
margin: 5px;
padding: 5px;
color: white;
}
.staticFoo {
background-color: blue;
}
.event {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="description">
<ul>
<li>Y block are write in the HTML and generated with the DOM generation.</li>
<li>X block are generated with a javascript function.</li>
</ul>
<p>Try to click on different blocks to see what append.</p>
</div>
<div id="container">
<div class="foo staticFoo" data-test="before">Y</div>
<div class="foo staticFoo" data-test="before">Y</div>
</div>
<div class="event">click event data: <b id="clickEvent"></b></div>
<div class="event">body event data: <b id="bodyClickEvent"></b></div>

As mentioned in comments earlier accroding to jquery doc for setting value you have to use:
$( "body" ).data( "foo", 52 );
Then, to get any data value you should use:
$( "body" ).data( "foo" ); // 52

I want to remove only the parent tag I clicked

There are 3 buttons in my code.
One is to add more files. (.btn-plus)
One is to remove the one added. (.btn-minus)
One is to reset the file. (.btn-reset)
I could add more input with (.btn-plus) button.
How could I delete only the one I click among every input I add with (.btn-plus)?
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".btn-minus").click(function(){
$(this).nextUntil('li').remove()
})
$(".btn-reset").click(function(){
$(".board-box__attachments input").value = "";
})
li {
width : 60%;
background : lightblue;
list-style : none;
padding : 0.5em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
<button class="btn-reset">Reset</button>
</div>
</li>
</ul>

You have to use on() to attach event to dynamically added element. Then use closest() to find currently clicked element's parent.
$("body").on("click", ".btn-minus", function(){
$(this).closest('li').remove();
})

$(this).nextUntil("li") doesn't match anything. It only searches siblings of this, and the button doesn't have any li siblings. If you want to select the li containing the button, use $(this).closest("li").
You also need to use event delegation to bind an event handler to dynamically-created elements.
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".board-box__attachments").on("click", ".btn-minus", function(){
$(this).closest("li").remove()
})
li {
width : 50%;
background : lightblue;
list-style : none;
padding : 1em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
</div>
</li>
</ul>

There are 2 issues with you code:
Your element which contains btn-minus is being created dynamically. So the click event would not work instead you need to use on event.
$(".btn-minus").click(function(){
So instead of this you need to use
$(document).on('click', '.btn-minus', function() {
Also you need to use following code to remove element.
$(this).closest('li').remove();
Please see the updated JSFiddle

Here you can creating elements dynamically so once the page is loaded, browser has no knowledge of '.btn-minus'
Try this:
$(document).on('click', '.btn-minus', function(){
$(this).closest('li').remove()
})
Hope this helps!

jQuery Siblings Selector does not working on the button

var buttons = document.querySelectorAll("button");
$(".list").on("click", "button", function() {
$(this).toggleClass("select");
$(this).siblings(".add").toggleClass("exclude");
});
.select {
background: purple;
color: white;
}
.list {
height: 200px;
}
.exclude {
background: grey;
color: grey;
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div><input type="text" placeholder="Add New Events"></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Eat</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Workout</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Sleep</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Laundry</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Study</button></div>
</div>
What I am trying to do, I want to make each button is able to toggle a classlist to itself and toggle another classlist to other buttons when it is clicked. Therefore, i am trying to use the siblings selector to select other buttons but it does not work. Can someone tell me why and help me to solve it?

The <button>s are not direct siblings of each other. Each of them is wrapped in a <div>. Therefore the code you need is going to be something like
$(this).parent().siblings().children(".add").toggleClass("exclude");

Javascritpt change class to a div near to his grand-father

I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});

Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>

Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>

first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});

JQuery: Clicking a nested Img with a certain URL

There is a div having a certain attribute contains many nested divs. One of them contains an image tag with a certain src. How do I access that? Following code is not working:
var tbox = $('div[role="user"]'); // These could be multiple
tbox.click(function(){
$(this).find('img[src="path/to/img.png"]').click();
});

You could use the "ends-with" selector $= :
$(this).find('img[src$="path/to/img.png"]').click();
You can see an example of this demonstrated below :
$(function(){
$("#box").click(function(){
debugger;
$(this).find('a[href$="test"]').css('color','red');
});
});
#box{
background: #ddd;
height: 200px;
width: 200px;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='box'>
<a href='#test'>TEST</a>
<a href='#test'>NOT TEST</a>
<a href='#not'>TEST</a>
<a href='#not'>NOT TEST</a>
</div>