cannot set all the data-x attr of a popover - javascript

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

Related

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!

How to make display change onclick()

I want to change display to block by clicking this icon:
<div class="index-navi-frame-box">
<p onclick="expandFunction()">
<i class="fa fa-bars"></i>
</p>
</div>
And this is what it should change
<div class="index-navi-expended"></div>
Css:
.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
position: relative;
display: none;
}
Using jQuery, you can remove the old and add the new class like this:
$(".index-navi-frame-box").on("click", function() {
$(this).removeClass("index-navi-frame-box").addClass("index-navi-expended);
});
However, if possible I would recommend that the new class is just overwriting the styles of the old class, so you can just add the new class without removing the old class.
Try to avoid inline JavaScript (onclick="") and place the code above either in a separate .js file or in <script></script> tags.
Try this:
$(".index-navi-frame-box p").click(function() {
$(".index-navi-expanded").css("display", "block");
});
With pure JavaScript, you can just use the Element.classList property to toggle the classes like this:
var x = document.querySelector(".index-navi-frame-box");
x.addEventListener("click", function(){
this.classList.add("index-navi-expended");
this.classList.remove("index-navi-frame-box");
})
.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
}
<div class="index-navi-frame-box">
<p>
ABCD
<i class="fa fa-bars"></i>
1234
</p>
</div>
You can use toggleClass to alternate between the two classes.
HTML
<div id="index-navi" class="index-navi-frame-box">
<p id="toggleNav"><i class="fa fa-bars"></i></p>
</div>
JS
$('#toggleNav').click(function() {
$('#index-navi').toggleClass('index-navi-frame-box');
$('#index-navi').toggleClass('index-navi-expended');
});
consider follwing code,
<div class="index-navi-frame-box"><p onclick="customfunction()"><i class="fa fa-bars"></i></p></div>
<div class="index-navi-expended" id="index-expandable"></div>
<script>
function customfunction(){
var index_expandable = document.getElementById('index-expandable');
index_expandable.style.display = "block";
}
</script>

appending complete html of one dive into new div

I am using JQuery for this:
Taking complete html and appending into a new div
My JQuery code:
$(document).ready(function(){
$("#addNew").click(function(){
var maindiv = document.getElementById('nestedFeilds').html();
$("#showhere").append('maindiv');
});
});
The HTML is pretty complex and lengthy so take just reference
<div class= "row" id="mainContainer">
<label for="Education" style="margin-left: 30px ; float:left;">Education</label>
<div class="col-xs-4 inner"></div>
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;">
In the last div, it is actually a form and I need its complete html to be shown with different name attribute when ever I click button
I am calling my function like this
<div id= "showhere"></div>
<div style="margin-left: 133px;float:left;">
<a id="addNew"> Add Education</a>
</div>
If you want to get innerHTML, you should use element.innerHTML, and if you want to append previously saved inner HTML, you can use element.append(variableWithPreviousInnerHTML). Here is the working example:
$(document).ready(function() {
$("#addNew").click(function() {
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#showhere").append(maindiv);
});
});
div {
width: 100px;
height: 100px;
border: 1px gray solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nestedFeilds">Content from #nestedFeilds</div>
<div id="showhere"></div>
<button id="addNew">Click</button>
If anything isn't clear, feel free to ask.

How to trigger a click of that 'link' on click of anywhere in that row?

I have a dynamically created table, with row class as "rowclass" and ids such as 1,2,3,4 etc. There is a link inside that row.
I want to trigger that link i.e a on click of anywhere in that row. This is the HTML.
<tr id="40" data-id="40" data-parent="" class="rowclass act-tr-collapsed act-tr-level-0" data-level="0">
<td id="235" style="font-weight:bold;font-size:17px;width:40%;">
<span class="i">+ </span>Nametobeappended<span id="s40" class="icon icon-info"
</span>
</td>
<td id="236">
<div style="height: 20px;position: relative;">
<div id="d236" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
<div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
<div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
</div>
</div>
</td>
<td id="237">
<div style="height: 20px;position: relative;">
<div id="d237" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
<div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
<div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
</div>
</div>
</td>
<td id="238">
<div style="height: 20px;position: relative;">
<div id="d238" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
<div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
<div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
</div>
</div>
</td>
</tr>
This is the JQuery I've written which doesn't work.
$('.rowclass').on("click", function(){
idss = $(this).children().attr('id'); //td id
$("#"+idss).find('a').trigger('click'); //want to click <a> of that particular row
});
console.log("id: "+idss)// says idss undefined
$("#"+idss).find('a').click(); //doesn't work
If you created the rows dynamically, you need to select them this way:
JSFiddle example: https://jsfiddle.net/Hulothe/1u8scath/1/
$(document).ready(function() {
$(document).on('click', 'tr.rowclass', function() {
alert('o');
$(this).children().find('a').trigger('click'); //want to click <a> of that particular row
});
// And you need to handle a click event on the `<a>` if you want to trigger a click on it, like this:
$(document).on('click', 'a', function(e) {
e.stopPropagation();
alert('Clicked');
});
});
To do this use this:
$(document).on('click', '.rowclass', function(e) {
// e.target is the element you clicked on
// .closest('tr') finds the closest parent that is an 'tr' element
// .find('a') finds the child that is an 'a' element
// .trigger('click') triggers a click on the found element
$(e.target).closest('tr').find('a').trigger('click');
});
I think the problem is that the table is loaded after the event is bound to the element. $(document).on('click', 'element', function); makes sure the event is always bound, even before html is loaded.
Or that using .children returns multiple elements and so can not give a id.
To trigger that particular row's anchor tag onclick of that row, this is what worked:
$(document).on('click', '.rowclass', function() {
$(this).children().find('a span').trigger('click');
//go to td then find <a> <span> to trigger click
});
This may not be the best of solutions. I'm new to coding, so if there's a better way I would be happy to know about it. Cheers!
Try this:
$(document).on('click', '.rowclass', function() {
$(this).find('a').trigger('click');
});
LE:
jQuery(document).ready(function(){
jQuery(document).on('click', '.rowclass', function(e) {
var link = $(this).find("a");
if (e.target === link[0]) return false;
link.trigger('click');
return false;
});
})
if (e.target === link[0]) - Here we check if the clicked element is the a tag itself. If that's so, we'll let the default behaviour happen.
If not, we trigger the click on a tag

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>

Categories