Here is the html:
<li>
some text
<i class="geta glyphicon glyphicon-remove-circle" onclick="deleteAnch();"></i>
</li>
<li>
other text
<i class="geta glyphicon glyphicon-remove-circle" onclick="deleteAnch();"></i>
</li>
And the jquery:
function deleteAnch () {
var the_id = $(this).prev('a').attr('id');
//also tried var the_id = $(this).closest('a').attr(id);
console.log('The id is:', the_id);
}
But in console I get
The id is: undefined
What is it wrong here and how to fix this?
p.s. I know some similar question is being asked but I still can not get it working using other answers hence the question.
You need to pass current element content i.e. this to deleteAnch inline click handler.
<i class="geta glyphicon glyphicon-remove-circle" onclick="deleteAnch(this);"></i>
Modify function as
function deleteAnch (elem) {
var the_id = $(elem).prev('a').attr('id');
console.log('The id is:', the_id);
}
However as you are using jQuery, you should bind event using it. Pass the function reference of deleteAnch and get rid of inline click handler
function deleteAnch () {
var the_id = $(this).prev('a').attr('id');
console.log('The id is:', the_id);
}
$('i.glyphicon-remove-circle').on('click', deleteAnch);
function deleteAnch() {
var the_id = $(this).prev('a').attr('id');
console.log('The id is:', the_id);
}
$('i.glyphicon-remove-circle').on('click', deleteAnch);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
some text
<i class="geta glyphicon glyphicon-remove-circle">icon</i>
</li>
<li>
other text
<i class="geta glyphicon glyphicon-remove-circle">icon</i>
</li>
</ul>
Related
Apologies if the question title is a little vague, I'm still a beginner in javascript (I'm open to edit suggestions!). If you look at the screenshot above I have 5 input boxes with values in it. These values are ratings returned by Google Places APIs and every time a user searches a new location these values will change. I'm displaying them like so.(I'll use the Gym option as an example).
Gymcallback function (Calucluates an average rating for all gyms in the area)
function gymCallback(results2, status2) {
var totalRating = 0,
ratedCount = 0;
results2.forEach(function( place ) {
if (place.rating !== undefined) {
ratedCount++;
totalRating += place.rating;
}
});
var averageRating = results2.length == 0 ? 0 : totalRating / ratedCount;
var averageRatingRounded = averageRating.toFixed(1);
var averageGymRatingTB = document.getElementById('gymAvgRating');
averageGymRatingTB.value = averageRatingRounded;
}
The averageGymRatingTB value will then be passed into the input box in the screenshot like so:
<p>
Gyms:
<input type="text" size="10" name="gymAvgRating" id="gymAvgRating" />
</p>
My question is, is it possible to display the gym rating next "fitness" in the navbar?
Fitness list option in the navbar
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a>
</li>
I've looked at using the following approach by adding an innerhtml element using 'test' as the value I'm passing through but this won't work, so I'm unsure.
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a><h5 id = demo></h5>
</li>
And in my javascript I use this:
document.getElementById("demo").innerHTML = "test";
You can simply add a span to the navigation, store it in a variable and change the content of using innerText.
function clearMarkers() {}
function GymReport() {}
var a = document.querySelector('li[data-target="#fitness"] > a'); //get the a in the menu
var fitnessScore = document.createElement("span"); //create a new span
a.appendChild(fitnessScore); // add the span to the a
function changeValue(v) {
fitnessScore.innerText = Math.random();
}
<ul>
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a>
</li>
</ul>
<input type="button" onclick='changeValue()' value="Change value">
I have this javascript function which should redirect me to
http://localhost:8888/ID OF A PRODUCT/add-to-cart".
But instead I got this:
http://localhost:8888/undefined/add-to-cart".
$('.add-to-cart').on('click', function () {
var productId = $(this).find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
Can someone help me to get ID of a product ?
HTML:
#foreach($products as $product)
<div class="col-md-3">
<div class="box-product">
<div class="img-wrapper item">
<a href="/product/{{$product->id}}/{{$product->slug}}">
<a class="thumbnail" href="/product/{{$product->id}}/{{$product->slug}}" style="margin-bottom: 0px; border: none;">
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
</a>
</a>
<div class="tags">
#if($product->discount > 0)
<span class="label-tags"><span class="label label-danger">Išpardavimas</span></span>
#endif
<span class="label-tags"><span class="label label-info">Nauja</span></span>
</div>
<div class="option">
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
</div>
</div>
Do one thing
Change
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
With
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white" id="{{$product->id}}"></i>
and get by
$(this).attr('id');
So the code will be
$('.add-to-cart').on('click', function () {
var productId = $(this).attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
$('.add-to-cart').on('click', function (event) {
var productId = event.target.id;
$.ajax(productId+"/add-to-cart",
{
});
});
.find is try to find inside current element u need to go up then find indexImg
$('.add-to-cart').on('click', function () {
var productId = $(this).parents('.box-product').find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
The way you are trying to get product ID based on DOM is incorrect. The jQuery .find() method looks for specified elements within the elements, i.e. its descendants. If you look at the HTML, you'll see that the div elements containing the add-to-cart button and the image whose id attribute you are trying to fetch are on the same level.
So you've got to change the way you are traversing to reach the id attribute of the <img> tag.
var productId = $(this).closest('.box-product').find('.indexImg').attr('id');
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 counting the number of elements with span class check_box and uncheck_box When the item with check-box is clicked, its span change to uncheck-box and vice versa. The counter somewhat works, however, I need to click on an element first to trigger it (the count should have already have changed) and then when i click on an element the second time, the count changes. In this instance i should have got two counts but I only get one.
How can this be rectified?
HTML:
<span>All</span>
<span>Completed</span>
<span>Incomplete</span>
<ul class="leftlist">
<li class="todo" id="1011" itemage="1"><a href="javascript:;">
<a href="javascript:;" class="strike">
<span class="check_box cb"></span>
<p>Option 1 Complete</p> </a>
</li>
<li class="todo" id="1011" itemage="1"><a href="javascript:;">
<a href="javascript:;">
<span class="uncheck_box cb"></span>
<p>Option 1 Incomplete</p> </a>
</li>
<li class="todo" id="1011" itemage="1"><a href="javascript:;">
<a href="javascript:;" class="strike">
<span class="check_box cb"></span>
<p>Option 1 Complete</p> </a>
</li>
<li class="todo" id="1011" itemage="2"><a href="javascript:;">
<a href="javascript:;">
<span class="uncheck_box cb"></span>
<p>Option 2 InComplete</p> </a>
</li>
jQuery
var $checkboxes = jQuery('li.todo a'),
$completeCount = jQuery('.complete-count'),
$incompleteCount = jQuery('.incomplete-count');
var updateCount = function(){
$completeCount.text(jQuery('.check_box').length);
$incompleteCount.text(jQuery('.uncheck_box').length);
};
$checkboxes.on('click', updateCount);
updateCount();
Jquery that changes the elements
(function($){
$('li.todo').click(function(){
if($(this).find('.uncheck_box').length >0){
var _t=$(this).find('.uncheck_box');
_t.removeClass('uncheck_box');
_t.addClass('check_box');
m_val='1';
$(this).find('a').addClass('strike');
}else{
m_val='0';
var _t=$(this).find('.check_box');
_t.removeClass('check_box');
_t.addClass('uncheck_box');
$(this).find('a').removeClass('strike');
}
var m_key=jQuery(this).attr('id');
jQuery.ajax({
type: "POST",
url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
data: { meta_key: m_key, meta_value: m_val},
beforeSend: function( ) {
//jQuery(this).attr("disabled", true);
},
success:function(){}
})
});
The first problem here is the class change handler is registered to the li elements(making use of event bubbling) where as the counter handler is registered to the anchor element. So the anchor handler will get executed before the class is updated so attach the click handler to the li element instead of anchor element
var $checkboxes = jQuery('li.todo'),
$completeCount = jQuery('.complete-count'),
$incompleteCount = jQuery('.incomplete-count');
var updateCount = function(){
$completeCount.text(jQuery('.check_box').length);
$incompleteCount.text(jQuery('.uncheck_box').length);
};
$checkboxes.on('click', updateCount);
updateCount();
also make sure that this event handler is registered after the class change handler is registered
A better solution will be is to use a custom event which will be triggered once the class is changed
$('li.todo').click(function () {
if ($(this).find('.uncheck_box').length > 0) {
var _t = $(this).find('.uncheck_box');
_t.removeClass('uncheck_box');
_t.addClass('check_box');
m_val = '1';
$(this).find('a').addClass('strike');
} else {
m_val = '0';
var _t = $(this).find('.check_box');
_t.removeClass('check_box');
_t.addClass('uncheck_box');
$(this).find('a').removeClass('strike');
}
//trigger a custom event here
$(this).trigger('updateclass')
var m_key = jQuery(this).attr('id');
jQuery.ajax({
type: "POST",
url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
data: {
meta_key: m_key,
meta_value: m_val
},
beforeSend: function () {
//jQuery(this).attr("disabled", true);
},
success: function () {}
})
});
then the count handler will listen to the custom event instead of the click handler
var $checkboxes = jQuery('li.todo'),
$completeCount = jQuery('.complete-count'),
$incompleteCount = jQuery('.incomplete-count');
var updateCount = function(){
$completeCount.text(jQuery('.check_box').length);
$incompleteCount.text(jQuery('.uncheck_box').length);
};
$checkboxes.on('updateclass', updateCount);
updateCount();
I'm using http://designwithpc.com/Plugins/Hovercard , but I can't find out how to declare a var on hovercard. Every job-desc has his own ID and it should be call when hovering labels. I hope I explained well.
<li id="577" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text</label></h3>
</span>
<span class="job-descr" id="hiden-577">TextTextTextTextText</span>
</li>
<li id="588" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text2</label></h3>
</span>
<span class="job-descr" id="hiden-588">Text2Text2Text2Text2Text</span>
</li>
Jquery code:
$('.labeldesc').hovercard({
var idhover=$(this).closest('.item').attr('id');
detailsHTML:$("#hiden-" + idhover).html()
});
Give this a shot: http://jsfiddle.net/X2q9z/
$('.labeldesc').hovercard({
onHoverIn: function() {
var txt = $($(this).parents('li')[0]).find('.job-descr').html();
$(this).find('.hover_text').html(txt);
},
detailsHTML: '<div class="hover_text"></div>'
});
First of all your jQuery Code has issue. You cannot use var inside calling hovercard function.
I update it as you wanted. Please take a loot at this: http://jsfiddle.net/cnCmN/
$('.labeldesc').each(function(){
$(this).hovercard({
detailsHTML: $("#hiden-"+$(this).closest('.item').attr('id')).html()
});
});