I have a div with a plus and a minus button:
<div class="col">
<i class="minus"></i>
<i class="qt">1</i>
<i class="plus"></i>
</div>
On a click of the plus button, I want to increase the quantity and similarly decrease the quantity, when the minus button is clicked.
In order to realize this I have written two events:
$( document ).on( "click", ".minus", function() {
var quantity = $(this).closest("ul").find("i.qt").text();
var a = parseInt(quantity);
a-=1;
$(this).closest("ul").find("i.qt").text-a;
});
$( document ).on( "click", ".plus", function() {
var quantity = $(this).closest("ul").find("i.qt").text();
var a = parseInt(quantity);
a+=1;
$(this).closest("ul").find("i.qt").text+a;
});
However, unimportant of what button is pressed, nothing happens.
Could you please help?
A fiddle showing my problem: http://jsfiddle.net/LESn3/2/
You can use .next() and prev() to target the quantity text:
$( document ).on( "click", ".minus", function() {
var quantity = $(this).next().text(parseInt($(this).next().text())-1);
});
$( document ).on( "click", ".plus", function() {
var quantity = $(this).prev().text(parseInt($(this).prev().text())+1);
});
Demo
You aren't assigning the text value back correctly.
You need to call .text as a function:
$(this).closest("ul").find("i.qt").text(a);
Fixed example - http://jsfiddle.net/LESn3/1/
You're not actually updating the text
It'll work if you replace the lines:
$(this).closest("ul").find("i.qt").text-a;
// ...
$(this).closest("ul").find("i.qt").text+a;
with:
$(this).closest("ul").find("i.qt").text(a);
Based on my understanding of the OP, here is the solution you should be looking at.
$(document).on( "click", ".minus,.plus", function() {
var quantity = $(this).siblings('.qt').text();
var a = parseInt(quantity);
if($(this).hasClass('minus'))
a-=1;
else
a+=1;
$(this).siblings('.qt').text(a);
});
Let me know if you have any questions.
FIDDLE
Related
On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});
You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})
I have a table. There are columns with checkbox, when checkbox is clicked I want to get value from same row's column's named 'desc' value.
I don't know how to target that column. This is what I tried:
jQuery( "input[type=checkbox]" ).on( "click", function() {
var value = jQuery(this).parent('TR').find('TD.desc').html();
});
jQuery( "input[type=checkbox]" ).on( "click", function() {
var value = jQuery(this).closest('.desc').html();
});
Table looks similar to this, just with more fields:
<table>
<tr>
<td>
<input type='checkbox'>
</td>
<td class="desc">
html
</td>
</tr>
</table>
Use parents() instead of parent(). "Parent" looks the immediate parent, while "parents" finds every superior tag.
$(this).parents("tr").find("td").html();
Do not use capital letters "TR", better user "tr". This is what you're looking for.
$(document).ready(function(){
$( "input[type=checkbox]" ).on( "click", function() {
var value = $(this).parent().parent().find('td.desc').html();
});
});
$(document).ready(function(){
$( "input[type=checkbox]" ).on( "click", function() {
var value = $(this).parents('tr').find('td.desc').html();
});
});
Maybe you need this:
$(document).ready(function(){
$( "input[type=checkbox]" ).on('click', function(){
var value = $(this).parent().next().html();
})
});
Example in jfiddle http://jsfiddle.net/55gfdamy/.
[Solved]
This script work good during first run. During run second, third etc. script first display old values var wartosc and late display new value var wartosc (uwaga('notice',wartosc);).
I think that I should somehow close function, but I don't think as :D.
$(function() {
$("#player").on('click', 'img', function() {
var zadanie = $( "input[name^='act']:checked:enabled" ).val();
var wartosc = $(this).attr('value');
var kupka = $('.kupka').attr('value');
switch(zadanie){
case '2':
$( "#dialog" ).dialog( "open" );
$('.wybor').click(function (){
$( "#dialog" ).dialog( "close" );
var ukryta = $(this).attr('value');
uwaga('notice',wartosc); // my own function like alert :D
})
break;
}
});
});
Since the click handle is bound in another handle, it may be bound more than once. You should unbind click event before you bind the new click handle.
$('.wybor').unbind('click').click(function (){...
When you use .attr('value') you're getting the value from the HTML, not the current value of the input if it has changed. Use .val() for that:
var wartosc = $(this).val();
var kupka = $('.kupka').val();
I have an issue here.
I've been using Tabs (widget jqueryUi).
All seems to work fine, but sometimes when I submit a form (inside the tab), the result comes in the window and not in the tabdiv.
I don't want that, the client has to keep in the websystem.
I already tried putting target="_self" in the form, but keep doing the issue sometimes.
var $tabs = $("#main").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close notext inline'>Remove Tab</span></li>",
idPrefix: "tab_",
add:function(e, ui){
$tabs.tabs('select', '#' + ui.panel.id).show("blind");
$j( "#list_tabs .ui-icon-close:last" ).on( "click", function(e, elemento) {
var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
$("#main").tabs( "remove", index );
desativarItemSubmenu($('#' + $(this).parent()[0].id.replace('tab_', '')));
});
},
select: function(event, ui){
var id = $(ui.tab).parent()[0].id;
if(id)
ativarItemSubmenu($('#' + id.replace('tab_', '')));
},
cache:true,
ajaxOptions: {async: false,cache: false}
})
$(".anchor").live("click", function(){
if("<?php echo $this->session->userdata("cod_usuario") ?>" == ""){
window.location.reload;
}
var url = this.rel;
var tab_title = this.text;
var tab_id = "tab_"+this.id;
if(!$('#' + tab_id).length){
if($('#main').tabs('length') > 3)
$("#main").tabs("remove", 3);
$("#main").tabs("add", url, tab_title);
$("#list_tabs li:last").attr("id", tab_id);
$("#list_tabs li:last").addClass("active");
}
else{
$('#main').tabs('option', 'selected', $('#' + tab_id).index());
}
})
// Remove a tab clicando no "x" (remove tab by click on "x")
$( "#main span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
$("#main").tabs( "remove", index );
});
I am not fully confident about this answer, but if not the solution then perhaps it will give you ideas that could lead to the solution.
It appears that you are changing the ID attribute of tabs on the fly. When you change an element's ID, you remove it from the DOM -- or rather, you re-inject it as a new element into the DOM. Therefore, any javascript that was previously bound to that element is no longer bound. Since you are using jQuery UI tabs, the changed element may stop being a tab.
This could cause the type of problem that you are describing.
Solution: instead of changing the tab ID, refactor your code to use classes that you add/remove.
As a general rule, use great caution when changing IDs on the fly.
I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.
You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});
$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});