I have the following piece of code:
<ul class="ul" id="selected_conditions">
<li data-field="asset_locations_name" data-condition="in">
<i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
<span class="condition_item" data-id="1213381233">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
</span>,
<span class="condition_item" data-id="1212371897">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
</span> )
</li>
</ul>
Each time I click on the little icon .delete I should remove the current value and I was able to achieve that with the following code:
$(function() {
$('#selected_conditions').on('click', '.delete', function(ev) {
var item_id = $(this).parent().data('id');
$('.condition_item[data-id="'+ item_id +'"]').remove();
});
});
But the code above has two problems: if I remove any item the symbol , isn't removed and that's wrong as an a second one I can't have an emtpy () string, so:
How do I remove the , so I not end up with a bad string like (,1213381233) or (1213381233,)?
Any help? I have leave you a Fiddle to play with. This is a WIP so if you have a suggestion or better solution feel free to add it to your answer.
Instead of hard-coding the comma(s), I'd use CSS :before to add commas only when there's more than one item in a row.
.condition_item+.condition_item:before {
content: ", "
}
https://jsfiddle.net/8184ok2e/2/
Related
I'm trying to make a "Like" button for a post which was fetched by AJAX using jQuery. Here, I want to change button text while clicked. But it's not changing.
Here is my Like button codes:
$('.posted-area').append('\
<div class="posted-footer">\
<ul>\
<li>\
<button class="btnLike btn-danger" id="btnLike" onclick="btnLikefunction()"> Like </button>\
</li>\
<li>\
<i class="fa fa-comments-o"></i> \
<span>15 comments</span>\
</li>\
</ul>\
</div>\
');
Here is my onClick event for the "Like" button:
function btnLikefunction(){
var btnTextChange = document.getElementById(".btnLike");
btnTextChange.innerHTML= "Liked!";
}
You just need 2 changes
onclick="btnLikefunction(this)"
and
function btnLikefunction(elm) {
$(elm).text("Liked").css('color', 'red'); // set text and color
}
Example
$('.posted-area').append('\
<div class="posted-footer">\
<ul>\
<li>\
<button class="btnLike btn-danger" id="btnLike" onclick="btnLikefunction(this)"> Like </button>\
</li>\
<li>\
<i class="fa fa-comments-o"></i> \
<span>15 comments</span>\
</li>\ </ul>\ </div>\
');
function btnLikefunction(elm) {
$(elm).text("Liked").css('color', 'red');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posted-area"></div>
let html = $(`<div class="posted-footer">
<ul>
<li>
<button class="btnLike btn-danger" id="btnLike"> Like </button>
</li>
<li>
<i class="fa fa-comments-o"></i>
<span>15 comments</span>
</li>
</ul>
</div>
`)
html.appendTo('#post-wrapper')
html.find(".btnLike").on("click",e=>{
$(e.target).html("Liked!")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post-wrapper"></div>
This is method is to use jquery to wrap your html first, then you can use jquery event listener on on the html.
Problem with your code is you use the wrong JS selector, where you use select by ID function but you pass a class name into it, since you are using jquery, you can change from:
var btnTextChange = document.getElementById(".btnLike");
btnTextChange .innerHTML= "Liked!";
to
$(".btnLike").html("Liked!")
Here you go. Find your button inside appended div and change your text.
Working Example:
$('.posted-area').append('\
<div class="posted-footer">\
<ul>\
<li>\
<button class="btnLike btn-danger" id="btnLike" onclick="btnLikefunction()"> Like </button>\
</li>\
<li>\
<i class="fa fa-comments-o"></i> \
<span>15 comments</span>\
</li>\ </ul>\ </div>\
');
function btnLikefunction() {
var btnTextChange = $(".posted-area").find(".btnLike")
$(btnTextChange).addClass("red");
$(btnTextChange).html("Liked!")
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posted-area"></div>
To change text color you can use addClass like above example.
Note: Don't mismatch JavaScript and jQuery.
I have many <li> with specific data-id, want to get innerHtml of first <Div>
For Example on this sample, it would to be: "World"
<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>
This is my code, that doesn't help:
var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML);
document.querySelector('[data-id="1123066248731271"]').textContent
Maybe this is what you need?
Being a jquery element, you can use find() method to find all the div elements inside him, with first(), you get the first element, finally, with html(), you get its content.
var target = $('[data-id="1123066248731271"]');
alert(target.find('div').first().html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>
first problem $('[data-id="1123066248731271"]') returned a object of all elements with [data-id="1123066248731271"]. for target the first element, you need add [0] after : $('[data-id="1123066248731271"]')[0]
now if you want target the div element you need specify div into $ like: $('[data-id="1123066248731271"] div')[0]. Now you got the first div and you can get innerHTML with : target.innerHTML
The full code :
var target = $('[data-id="1123066248731271"] div')[0];
alert(target.innerHTML);
and without Jquery ( more simply i think ) :
var target = document.querySelector('[data-id="1123066248731271"] div');
alert(target.innerHTML);
Perhaps you want to use firstElementChild instead of firstChild?
Or you could use the CSS selector [data-id="1123066248731271"] > div:first-child:
var target = $('[data-id="1123066248731271"] > div:first-child');
alert(target.innerHTML);
Edit:
I noticed a translation error. I don't use jQuery myself, so instead of $ I used document.querySelector. But the behavior of $ corresponds to document.querySelectorAll instead. Sorry...
This should work fine:
var target = $('[data-id="1123066248731271"] > div:first-child')[0];
alert(target.innerHTML);
or this:
var target = document.querySelector('[data-id="1123066248731271"] > div:first-child');
alert(target.innerHTML);
As a non-jQuery user, I personally prefer the latter.
I have a javascript function that increment a counter by 1 on onclick event.
<div class="detail-banner-btn heart">
<i class="fa fa-heart-o"></i>
<span data-toggle="I Love It">
<a onclick="like()"> Give Heart </a>
</span>
</div>
<i class="fa fa-heart"></i> <strong id="totalLikes" > 0 </strong> people love it
<script>
function like() {
var a = document.getElementById("totalLikes").innerHTML = +1;
}
</script>
I want the number to be increment by 1 at first click and on second click it needs to be decremented by 1 and so on.
Try following code
<div class="detail-banner-btn heart">
<i class="fa fa-heart-o"></i> <span data-toggle="I Love It"> <a onclick="like()"> Give Heart </a></span>
</div>
<script>
var isLiked=false;
var a=0;
function like()
{
isLiked=!isLiked;
if(isLiked) {
a = document.getElementById("totalLikes").innerHTML = parseInt(a)+1;
}
else {
a = document.getElementById("totalLikes").innerHTML = parseInt(a)-1;
}
}
</script>
<i class="fa fa-heart"></i> <strong id="totalLikes" > 0 </strong> people love it
Let's assume that you have a like button, a comment button, and an area for likes, such as the code below:
<a href="#" id="like-btn" class="card-link">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="card-link">
<i class="fa fa-comment"></i>
</a>
<p>Likes <span>0</span></p>
It would make sense to use jQuery here, and simply update the likes by setting a counter in the JavaScript section of your code (or in a separate file). This way, you don't have to convert the counter to an integer (or number type in JavaScript), or any of that. This is where jQuery makes things much more simple.
var likes = 0;
$('#like-btn').on('click', function() {
if(likes % 2 === 0) {
likes++;
$('span').text(likes);
}
else {
likes--;
$('span').text(likes);
}
});
This why you can just increment the number of likes in a more simple way. If the number has no remainder after being divided by 2, you know it is even, and needs to be incremented (and will increment on your first click), otherwise it will be deincremented.
This code will replace what is shown inside <button></button> with selected icon from dropdown list.
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want <li> to be unchanged
http://codepen.io/filaret/pen/PGJEAL
HTML:
<div class="input-group-btn">
<button type="button" class="btn" data-toggle="dropdown">
<i class="fa fa-book"></i>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i> Something 111</li>
<li><i class="fa fa-newspaper-o"></i> Something 2222</li>
</ul>
</div>
jQuery:
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// Put it inside <button></button>
$selectWrapper.find(".btn").html($selectedIcon);
});
You need to clone the icon using clone() like following
var $selectedIcon = $(this).find('.fa').clone();
instead of
var $selectedIcon = $(this).find('.fa');
UPDATED CODEPEN
Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.
jQuery(document).ready(function($) {
"use strict";
var $selectWrapper = $('.input-group-btn');
var $buttonIcon = $('.btn i');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// get icon classes
var classes = $selectedIcon.attr("class");
// Put the class in the button i tag
$buttonIcon.attr('class', classes);
});
});
See code pen: http://codepen.io/anon/pen/ORxQPZ
I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. Seems that the function to toggle the button text is removing my icon altogether.
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
List View
</button>
$("#toggle-list-details").click(function() {
$(this).text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
When you do
$(this).text(function(i, text){
this reffers to <button type="button" id="toggle-list-details">, so it replaces all inner content with plain text.
To avoid this, you can do smth like this:
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
<span class="text">List View</span>
</button>
$("#toggle-list-details").click(function() {
$(this).find('span').text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};