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 */
}

Function runs twice after click

I am currently working on a project that utilizes an input to create a list of items. I have the addition of programs working, however the deletion of an item is where I am having problems.
The items are added to an array via .push() and the method of deletion is via the .splice() method. The function correctly splices the correct array element but ends up doing a second pass and deleting the elements before it. How do I stop the splice from happening more than once?
$(skill_add_button).click(function(e){ //on add input button click
var skill_input=document.getElementById("skill_input").value;
document.getElementById("skill_input").value = "";
e.preventDefault();
if(s < 12){ //max input box allowed
if (skill_input==""){
skillset = skill_arr.join('');
alert(skillset);
} else {
s++; //text box increment
$(skill_wrap).append('<div class="skill_tag" id="skill_tag'+s+'">'+skill_input+'</div>'); //add input box
skill_arr.push(skill_input+'|s|');
alert(skill_arr);
$('.skill_tag').hover(function(){
$(this).css("background-color", "#C14330");
$(this).css("cursor", "pointer");
}, function(){
$(this).css("background-color", "#04CA29");
});
$('.skill_tag').click(function() {
var skill_id = $(this).attr('id');
var index = skill_id.split('skill_tag').pop();
skill_arr.splice(index,1);
$('#'+skill_id).remove();
alert(skill_arr);
s--;
});
}
}
if(s > 11) {
$(skill_add_button).remove();
}
});
If I try to put my .skill_tag click function outside of my skill_add_function, it does not work at all.

Each time you click on $(skill_add_button) you create a new div.skill_tag but and you add .click event on ALL .skill_tag elements of the page.
Save your generated div into a var and use this var to add click event.
var myDiv = '<div class="skill_tag" id="skill_tag'+s+'">'+skill_input+'</div>';
$(skill_wrap).append(myDiv); //add input box
[...]
myDiv.hover(function(){
[...]
myDiv.click(function(){

$('body').on('click','.skill_tag',function(){
//TODO::add code here
})

IE click event span not triggered

I'm having this webpage
http://pocolocoadventures.be/reizen/
And it should filter (with isotope.js) the travelboxes on the page.It does in safari, chrome, firefox, opera, .. but in IE, the filter doesn't work. Even worse, JS doesn't react at all at a click event on te span.
This is the piece of js
// Travel Isotope
var container = $('#travel-wrap');
container.isotope({
animationEngine : 'best-available',
itemSelector: '.travel-box ',
animationOptions : {
duration : 200,
queue : false
},
});
$(".filters span").click(function(){
var elfilters = $(this).parents().eq(1);
if( (elfilters.attr("id") == "alleReizen") && elfilters.hasClass("non-active") )
{
$(".label").each(function(){
inActive( $(this) );
});
setActive(elfilters);
}
else{
//set label alleReizen inactive
inActive( $("#alleReizen") );
if( elfilters.hasClass("non-active") ){
setActive(elfilters);
}
else{
inActive(elfilters);
}
}
checkFilter();
var filters=[];
$(".search.filters").children().each(function(){
var filter = $(this).children().children().attr("data-filter");
if( $(this).hasClass("non-active") ){
filters = jQuery.grep(filters, function(value){
return value != filter;
});
}
else{
if(jQuery.inArray(filter,filters) == -1){
filters.push(filter);
}
}
});
filters = filters.join("");
filterItems(filters);
});
function filterItems(filters){
console.log("filter items with filters:" + filters);
container.isotope({
filter : filters,
}, function noResultsCheck(){
var numItems = $('.travel-box:not(.isotope-hidden)').length;
if (numItems == 0) {
$("#no-results").fadeIn();
$("#no-results").css("display", "block");
}
else{
$("#no-results").fadeOut();
$("#no-results").css("display", "none");
}
});
}
function setActive(el){
el.removeClass("non-active");
var span = el.find('i');
span.removeClass("fa-check-circle-o").addClass("fa-ban");
}
function inActive(el){
el.addClass("non-active");
var span = el.find('i');
span.removeClass("fa-ban").addClass("fa-check-circle-o")
}
function checkFilter(){
var filterdivs = $('.filters span').parent().parent();
if( filterdivs.not('.non-active').length == 0 ){
setActive( $("#alleReizen") );
}
var filterLabels = $(".filters .label");
if( filterLabels.not('.non-active').length == 0){
setActive( $("#alleReizen") );
}
}
function noResultsCheck() {
var numItems = $('.item:not(.isotope-hidden)').length;
if (numItems == 0) {
//do something here, like turn on a div, or insert a msg with jQuery's .html() function
alert("There are no results");
}
}
Probably something small and stupid; but I can't find it..
Thanks in advance!

On your website you've build the buttons like this:
<button>
<span>
</span>
</button>
Now the button element is designed to be a button. It differs from the input button. In the latter you'd set the caption using value. In the button element you set it as a text node. The button element can contain elements like a span. The spec isn't very clear about whether or not you should have event handlers on the children of the button element. It's a browser developers interpretation of allowing it or not.
This problem has been posted here before (a few times)
span inside button, is not clickable in ff
Missing click event for <span> inside <button> element on firefox
It seems that Firefox is allowing it, based upon your findings. IE isn't. So to be on the safe side: use the button the way it was intended.
Wrap the button inside a span (not really logical)
Put the click handler on the button.
$(".filters button").click(...);

played around in the console a bit, and this seemed to work well.
$(".filters").on('click', 'span', function(){
// foo here
console.log('foo');
});
Maybe the filters are manipulated by one of your js files after page load?
.on will allow you to select a container which listens on changes that happen inside it, passing the element you want the actual action to work on.
If it's ok for you, I'd suggest to use the <button> element, instead of the <span>.
Let me know if that works for you.

Looking to disable a set of fields unless a radio button is marked

I have uploaded the HTML / CSS / JS at: http://jsfiddle.net/mbender/aH8Ax/
I know the problem probably lies within the JS, as i have almost no experience with it.
$(function () {
var $promised = $("input[name='RadioGroup1']");
$promised.each(function () {
$(this).on("click", function () {
$promised.each(function () {
var textField = $(this).nextAll("input").first();
if (textField) textField.prop("disabled", !this.checked);
});
});
});
});
There is also a conditionally hidden element to work around. You will see what i mean in the fiddle

The input field is disabled whenever the attribute 'disabled' is present in the tag, it doesn't matter what the value is set to. What you can do is loop through all the input elements inside of the USA section and call
.removeAttribute('disabled');
if the user selects the USA radio button.
EDIT: something like this should work (as long as you have JQuery)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type=text/javascript>
$(function() {
var $promised = $("input[name='RadioGroup1']");
$promised.each(function() {
$(this).on("click",function() {
var USARadio = document.getElementById("RadioGroup1_0");
if(USARadio.checked == true){
toggleUSA(true);
}
else{
toggleUSA(false);
}
});
});
});
function toggleUSA(disable){
var USATable = document.getElementById("rowThree");
var USAInputs = USATable.getElementsByTagName("input");
for(var i=0;i<USAInputs.length;i++){
if(disable == true)
USAInputs[i].removeAttribute("disabled");
else
USAInputs[i].setAttribute("disabled", "true");
}
}
</script>

JQuery. Simple drop down selection menu behavior question

I have a simple html option/select (dropdown) menu. I want to use JQuery to redirect links when an option is selected. I have a "go" button in noscript tags in case javascript is disabled, but in the case that the user has javascript..I would like the redirection to happen automatically on-click. Could somebody please guide me on how to accomplish this using jquery (I have this done using simple javascript 'onclick' events but I'd like to move all of my code to jquery)?
Right now my code looks like this (the function gets call from the 'onclick' event):
function option(dropdown) {
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL;
if(SelValue=="1")
baseURL="something1";
else if(SelValue=="2")
baseURL="something2";
else if(SelValue=="3")
baseURL="something3";
top.location.href = baseURL;
return true;
}

To bind the click element in jQuery you can do
$('#elementId').click(function(){
//do redirection
});
But for you case I think you need to bind the change event
$('#elementId').change(function(){
var optionSelectedValue = $('#elementId option:selected').val();
if(optionSelectValue == value1) {
newUrl = url1;
}
else if(optionSelectValue == value2) {
newUrl = url2;
}
top.location.href = newUrl;
});