JavaScript to check for event without page refresh

Question

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

score 0 · Answer 1 · answered Oct 30 '18 at 13:43

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 tried this option but when added to the cart the div below with the donation option did not go away. — Ellen Harris, Oct 30 '18 at 14:40

Ish · Answer 2 · 2018-11-06T13:36:23.887

0

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

edited Nov 06 '18 at 13:36

answered Oct 30 '18 at 13:48

Ish

71
6

I tried this code but once I clicked remove from cart the hidden div still did not reappear. When I inspect the element it is still using the .hide-charity class instead of removing it. – Ellen Harris Oct 30 '18 at 14:41
Ahh yes of course somehow I overlooked that the function is called on load sorry. In that case the else is useless the class removal will need to be called when the item is removed. How does your item removal look like? – Ish Oct 30 '18 at 15:17

score 0 · Answer 3 · answered Nov 01 '18 at 15:24

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>

JavaScript to check for event without page refresh

3 Answers3