We Keep Coding

jQuery Ajaxstop inside of click event fired multiple times

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 );
});
...
})

jQuery - Another way to write this statement (DRY)

I am wondering if there's a way to write the following code without the if / else.
Currently, this works fine. But I'm trying to figure out how I can leverage a DRY method and I don't like the fact that the prop is written twice.
I have a text value and the user needs to input that code into the text box. Once the values match, it "enables" the submit button, otherwise it disables it.
$( '#input-code' ).on( 'change keyup paste', function() {
if ( $( this ).val() == $( "#random-code" ).text() ) {
$( '#submit-btn' ).prop( 'disabled', false );
} else {
$( '#submit-btn' ).prop( 'disabled', true );
}
});

You can migrate the if..else into a internal condition to set the attribute,
$( '#input-code' ).on( 'change keyup paste', function() {
$( '#submit-btn' ).prop( 'disabled', this.value !== $( "#random-code" ).text() );
});
Additionally, if you are dealing with modern browsers, you can just use on('input' instead of 'change keyup paste'. Check for browser support though.

You can use the negated expression directly in prop.
This will disable the button when button text and the text inside #random-code will be same.
Make sure you trim the text(), to remove leading and trailing spaces, otherwise it will not match with the button text.
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', !($(this).val() == $.trim($("#random-code").text())));
});
OR
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', $(this).val() !== $.trim($("#random-code").text()));
// ^^^
});

$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', function(){
return ( $( this ).val() == $( "#random-code" ).text() );
});
});
for more detail you can check here...
Jquery prop() detail.....

Check input text value when page is loaded

I have a couple of register page in my project. Example is page to register student info, Enrolment Info,etc.
In the page I want to set button to disable when a criteria is met. This is my code
$(document).ready(function() {
if($('#student_id').val().length === 0){
$('#student_update').prop( "disabled", true );
$('#student_delete').prop( "disabled", true );
}else{
$('#student_add').prop( "disabled", true );
}
});
If the student id is empty meaning there is nothing to update or delete I want to disable else the add button is disabled.
The Student Id is ready only meaning the only way to put value into it is to select data from database.

if( !$('#student_id').val() )
as you do not need to check if the length is > 0
since an empty string evaluates to false in jquery.
for readability you can use :
if( $('#student_id').val().length === 0 )
You can use something like this:
$(document).ready(function() {
disableButton();
$('#student_id').keyup(function(){
disableButton();
});
});
function disableButton(){
if(!$('#student_id').val()){
$('#student_update').prop( "disabled", true );
$('#student_delete').prop( "disabled", true );
$('#student_add').prop( "disabled", false);
}else{
$('#student_add').prop( "disabled", true );
$('#student_update').prop( "disabled", false);
$('#student_delete').prop( "disabled", false);
}
}

Try this:
if($('#student_id').val()=="")
OR spell lenght correctly:
if($('#student_id').val().length==0)

$( "input" ).change(function () in Kendo

I need to track if an element and if ye which element is changed in a form.
The $( "input" ).change(function () { handler is not firing in Kendo UI. My code is
$( "input" ).change(function () {
alert('aaaa');
event.preventDefault();
});
what am I doing wrong? Or is there a more proper way in kendo?

I think you are looking for keyup event.
$("input").keyup(function () {
alert('aaaa');
});
Demo
Change event for input only fires when focus is lost after changing value. See this

Give your input (for example #target) and them:
jQuery( ".target" ).change(function() {
alert( "aaaaa" );
});

Fire click event on header after sorting column

I am using table sorter plugin on my table //http://tablesorter.com/docs/index.html
And I want fire an event on click of the header that after sorting the column, I am trying as below
$("tableId").tablesorter();
$("thead th").click(function () {
alert("hi");
});
But want happens is my event fires first than plugin event, i want my event fire after the plugin's event...
Any Idea Plz...................

With jQuery 1.3+ :
$( "thead th" ).live( "click", function() {
alert( "hi" );
});
With jQuery 1.4.3+ :
$( document ).delegate( "thead th", "click", function() {
alert( "hi" );
});
With jQuery 1.7+ :
$( document ).on( "click", "thead th", function() {
alert( "hi" );
});
More here (http://api.jquery.com/live/)

You can bind to the sortEnd event which triggers after the table has sorted (demo; javascript is way at the bottom of the page):
$(function() {
$("table")
.tablesorter()
.bind("sortEnd",function() {
alert("hi");
});
});
I wouldn't fire another click event on the header within this event callback as you will create an infinite loop of clicking and sorting.
Also, in case you are interested, I have a fork of tablesorter with lots of improvements.