We Keep Coding

JavaScript to check for event without page refresh

I could use a point in the right direction. I have a product that I am showing on a cart page for charity donations. If someone adds the donation to their cart I have been able to remove the donation option since it is now already in the cart. This is done because when a donation button is clicked the page is refreshed and the donation added to the cart. The problem I am having is when someone removes the donation from the cart the page does not refresh and therefor the option to donate does not show up until I manually refresh the page. I would post some code but I dont have any because I am not sure how I go about the page looking at the cart basically in a loop to keep checking if that item in the cart or not.
This is the code I use to check and see if the donation is in the cart.
$(document).ready(function() {
var found = false;
$('.bd a').each(function(index, ele){
if($(ele).html().indexOf('Charity Bucks') > -1){
found = true;
}
})
if(found){
$('#divID').css('display','none');
}
});

from this stack
this is event listener for changes at element with class .bd
$("body").on('DOMSubtreeModified', ".bd", function() {
// code here
});
try add this code :
$("body").on('DOMSubtreeModified', ".bd", function() {
$('.bd a').each(function(index, ele){
if($(ele).html().indexOf('Charity Bucks') > -1){
$('#divID').css('display','none');//or inline-block; or block; as your default css for this element
}else{
$('#divID').css('display','inline');
}
})
});

I ended up using a callback to solve my problem
<script>
$(document).ready(function() {
var found = false;
$('.bd a').each(function(index, ele){
if($(ele).html().indexOf('Charity Bucks') > -1){
found = true;
var parent = $(ele).parent().parent();
var sibs = $(parent).siblings('.group4');
$(sibs).find('a').each(function(index2, ele2){
console.log(ele2);
if($(ele2).html().indexOf('remove') > -1){
console.log('found it');
$(ele2).on('click', function(){
$('#divID').show();
});
}
});
}
})
if(found){
$('#divID').hide();
}
});
</script>

The issue is due to a missing else statement. In your logic you only modify the #divID element if you find the charity entry, but not if you no-longer find the charity entry and have already hidden the element.
Additionally I would recomend showing/hiding the element via a css class rather than directly though css properties.
$(document).ready(function() {
$('#remove-donation-button').click(removeDonation());
var found = false;
$('.bd a').each(function(index, ele){
if($(ele).html().indexOf('Charity Bucks') > -1){
found = true;
}
})
if(found){
$('#divID').addClass("hide-charity");
}
});
function removeDonation(){
$('.hide-charity').removeClass('hide-charity');
/** Actually remove */
}

Redirecting to a different page if ID is not available

I have two buttons:
Button-A
Button-B
And some JavaScript to trigger a click event:
jQuery("#A").click(function() {
jQuery("#B").trigger('click');
return false;
});
If Button-B is not available (for example, on mobile, the button is not available), then Button-A redirects user to a different page (site.com/another-page). How can I implement this?
How can I achieve that?
Thanks

You can check the length of the jQuery object to see whether it exists
jQuery("#A").click(function () {
var $btn = jQuery("#B").trigger('click');
if(!$btn.length){
window.location = 'new location'
}
return false;
});

Check if the element exists and then add the event listener
$(function(){
if($("#B").length) { // the element exists
jQuery("#A").click(function(){
jQuery("#B").trigger('click');
return false;
});
} else { // element doesn't exist, add a different listener
jQuery("#A").click(function(){
window.location = "http://newurl.com";
});
}
});

function clickHandler(e){
var $btn = $("#B").trigger('click');
if(!$btn.length)
window.location = 'site.com/another-page';
e.preventDefault();
}
$("#A").click(clickHandler);

jQuery - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?

It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.

Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO

$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});

// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;

Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});

Overlay div via jquery is set up successfully but not removed on click

I have one simple jquery script which triggers on click on button and create another div overlays on current html,i got success creating the div but the problem is when i try to close the div by a button which i have created at setting up overlay div is not working what can be the possible cause? the code is as under
input#btn cause the div to diplay and its working fine.
Jquery function file
$(document).ready(function(){
$('input#btn').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'none')
{
$('#div').css('display','block');
$('#div').html('<H1>PALAK MEVADA</H1><input id="close" type="button" value="CLOSE"/>');
}
return false;
});
$('input#close').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
});

Use on():
$(document).on('click','input#close',function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});

The button doesn't exist when your code is first initialized, so your $('input#close').click(); isn't bound to anything.
Try this:
$('input#close').on('click', function(){
// Your code here...
});

Problems with my javascript, I dont want to validate <select> tags that are disabled

This javascript will find all my selects and validate them but I want to add that it doesnt validate my disabled selects. How can I code that in my javascript?
$("#next-step").click(function () {
var $step = $(".wizard-step:visible"); // get current step
var validator = $("form").validate(); // obtain validator
var anyError = false;
$step.find("select").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
Thanks in advance!

if (!this.disabled && !validator.element(this)) {
anyError = true;
}​
or (slower)
$step.find("select:enabled").each(function() {
if (!validator.element(this)) {
anyError = true;
}
});​

The easiest way, i know of is to give the select tags, a class like skipvalidation and then
$("form").validate(
ignore: ".skipvalidation"
);
You can find all the disabled elements and add the class as
$("input:disabled").addClass("skipValidation");
$("form").validate(
ignore: ".skipvalidation"
);