I have this function:
$(document).ready(function() {
$('#time-options').on('change', function() {
if ($('#time-options').prop('checked')) {
$('#time-options-div').slideDown(500);
return false;
} else {
$('#time-options-div').slideUp(500);
return false;
}
});
});
So whenever the #time-options is checked, the div slides down. But sometimes the #time-options is already selected when the page loads, so in this case I would like the #time-options-div to be already open.
How can I achieve this?
Try to invoke the change event manually once, after the event got bound.
$('#time-options').on('change', function(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}).change();
The simplest way is to also run the block inside the on change function. With some refactoring you can also have:
$(document).ready(function(){
function slide(){
if($('#time-options').prop('checked')){
$('#time-options-div').slideDown(500);
return false;
}else{
$('#time-options-div').slideUp(500);
return false;
}
}
$('#time-options').on('change',slide);
slide();
});
Related
$(document).on('click', '.add-button-prototype', function(){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
return false;
}
});
Example 1 catch click event for all new added element with given class, but not prevent execution of the code.
$('.add-button-prototype').click(function(e){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
return false;
}
});
Second example work only for loaded element with given class and not for new added after init of page. But it prevent execution of the code.
How to catch all element of same class, old and newly added and prevent execution of code if condition are true;
Besides return false add e.preventDefault();
So your code should look like:
$(document).on('click', '.add-button-prototype', function(e){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
e.preventDefault();
return false;
}
});
Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?
In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO
You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.
I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:
if (jQuery('#top').checked) {
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
}
That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.
What does firebug or Chrome console tell you? You could try something like this:
$('#top').is(':checked')
as in (thanks RET):
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
}
return false;
});
try
$('#top').is(':checked')
but the function submit only binds the function and calls it every time submit is clicked.
so you must put the checked check in the submit function
jQuery('#post').submit(function() {
if(!$('top').is(':checked')){ return };
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
});
Yeah, that logic won't quite do what you're hoping for. Try something like:
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
// all your existing code
I could be wrong, but I don't think the answer given by #greener is going to work, because that will only declare the submit function if #top is checked at page create time.
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}
I got a confirmation alert to confirm a user action.
on click "ok", it should do the following code:
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
on "cancel", the following.
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
However, the way my code is currently formated, the first block of code is executed regardless of which button is pressed.
I think this is pretty much just moving the code around, but I'm unsure how to correctly do it as my precedent attempts all failed. Any help appreciated. Thanks !
Full code:
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery("#submitButton").click(disableSubmitButton);
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
</script>
You can try:
//jQuery("#submitButton").click(disableSubmitButton);
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
else
{
disableSubmitButton();
}
});
Do you really need to disable the submit button? Returning false on the other click should be enough.
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
</script>
However I would instead bind to the submit event:
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#rent_space').submit(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
});
}
</script>
You only need one event listener. The condition can be handled in the listener body.
jQuery("#submitButton").click(function(e) {
e.preventDefault();
if(confirm("...")) {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
});
NB. you should use e.preventDefault() instead of return false to prevent the default behaviour of an event.
Hari's answer is correct. I prefer the (slightly) more idiomatic:
jQuery("#submitButton").click(function() {
if (confirm("Are you sure you want to proceed?")) {
disableSubmitButton();
} else {
return false;
}
});
EDIT EDIT I got it to work thanks to your suggestions. Thank you. :)
Heres the code that worked.
<script>
jQuery(document).ready(onDocumentReady);
function onDocumentReady() {
jQuery('#submitButton').click(function() {
if (!confirm('Are you sure you want to proceed ?')) {
return false;
}
else{
jQuery("#submitButton").click(disableSubmitButton);
}
});
}
function disableSubmitButton() {
jQuery("#submitButton").attr("disabled", "true");
jQuery("#rent_space").submit();
}
</script>