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.....
Related
I have a few on click events who actually are doing the same thing. Someone told me I should use a case switch for this so I can reduce my code. But I don't know how to do that in combination with a on click event.
$( "#wishlist_top" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "wishlist" in menu']);
});
$( ".wishlist" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "plaats op wishlist"']);
});
$( ".product_size" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat advies"']);
});
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat niet beschikbaar?"']);
});
if ( $('*').hasClass('404') ) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klant is op een 404 pagina gekomen']);
}
Thank you!
While you can use a switch/case for this, it might not be the best idea. You still need to listen for click events on each class/ID, so I'd make a function and call that with the specific string.
Using your code from above, you can make a function like so:
function tagRecording(value) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', [value]);
}
Now just use a click listener like so:
$( "#wishlist_top" ).on( "click",
function() { tagRecording('Klikt op "wishlist" in menu'); } );
So next time you want to change your code, you just change the tagRecording function (you can rename it however you like).
Another option here is to use data attributes in your markup. Add the message you want to pass to a data-text attribute in each of your elements -
<a href="#" class="product_stock" data-text='Klikt op "wishlist" in menu'>Foo</a>
And then you can set up one JS handler, which grabs the text from your data attribute:
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', $(this).data("text"));
});
Of course this only works if you have control over the creation of the markup.
I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};
When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};
You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.
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" );
});
I need to do different things depending on whether a checkbox with an ID attribute is checked or unchecked by a mouse. An event needs to be fired when either a check or an uncheck is performed. I suppose one could use a single check event handler and just see what the check state is but I don't know how.
You can use the change event which will be fired when the checkbox state is changed, so register a change event handler using the id of the checkbox
//dom ready handler
jQuery(function ($) {
//change event handler
$('#myid').change(function () {
if (this.checked) {
//checked do something
$('span').text('checked');
} else {
//unchecked do something else
$('span').text('unchecked');
}
})
})
Demo: Fiddle
Document Ready
change event
change event handler
id selector
Probably you should start with
jQuery API
Learn jQuery
function check_preconf() {
if(document.getElementById("step1_full").checked) {
$( "#step2_half" ).prop( "disabled", true );
$( "#step3_half" ).prop( "disabled", true );
$( "#step4_half" ).prop( "disabled", true );
$( "#step5_half" ).prop( "disabled", true );
}
}
I'm using jQuery to copy the value of one input field to another on blur. Here's my code:
$( "input[id$=token-input-search_field]" ).blur( function() {
$(this).val() = $('input[id$=search_field]').val;
});
But it doesn't seem to work. What am I doing wrong?
$( "input[id$=token-input-search_field]" ).blur( function() {
$(this).val( $('input[id$=search_field]').val() );
});