CODEWITHSUNDEEP
jquery
Svedr
Svedr

Reputation: 579

Why is this if/else statement not running repeatedly?

I have an issue with my function. What I am trying to do is dynamically add and delete inquiry-items. When I add an item, I put +1 to var InquiryItemCount, and when I delete an item I take out -1 from var InquiryItemCount. As you can see I am trying to show a certain div when InquiryItemCount is > 0 and hide it when it equals to zero. Right now, the div is hidden all the time. Thank you for your help.

jQuery(document).ready(function($){

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
});

if(InquiryItemCount > 0) {
    $('.create-inquiry-title').show();
}
else {
  $('.create-inquiry-title').hide();
}
});

Upvotes: 1

Views: 65

Answers (4)

Popnoodles
Popnoodles

Reputation: 28409

You told it to run just that time by putting the script in the javascript, not calling it from anywhere. It doesn't run after each bound event because you didn't include it in their functions.

You want it to run each time there's a change to InquiryItemCount, so write is as a function and call it.

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
    checkInquiryItemCount(InquiryItemCount);
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
    checkInquiryItemCount(InquiryItemCount);
});

// You should also hide the one you don't want to show on page load using CSS, 
// but you can run the function if you like.
// This can be before the function declaration (best to put functions last).
checkInquiryItemCount(0);

function checkInquiryItemCount(InquiryItemCount){
    // also, just use toggle() to show/hide as it accepts a boolean
    $('.create-inquiry-title').toggle(InquiryItemCount > 0);
}

Upvotes: 2

Vishrut Reddi
Vishrut Reddi

Reputation: 97

Right now the if-else statements are placed in the jQuery(document).ready() function. So this means that when the document is ready for load thats when the if-else would be executed. Once only here. What you should do is add the if-else in a function and then call that function whenever you want check for showing or hiding the div.

This should help:

jQuery(document).ready(function($){

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;

    // Check Now
    checkShowForInquiry()
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;

    // Check Now
    checkShowForInquiry()
});

});

function checkShowForInquiry(){
    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
       $('.create-inquiry-title').hide();
    }
}

Upvotes: 2

Victor Levin
Victor Levin

Reputation: 1177

jQuery(document).ready(function($){

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;

    showHide(InquiryItemCount);
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;

    showHide(InquiryItemCount);
});


});

function showHide(InquiryItemCount){

    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
      $('.create-inquiry-title').hide();
    }

}

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

The problem was that your if else was getting executed only once. You need to trigger your logic on every add/delete. You need to update your code to following

jQuery(document).ready(function($){

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
    updateTitle();  // triggering your logic
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
    updateTitle(); // triggering your logic
});

function updateTitle() {
    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
       $('.create-inquiry-title').hide();
    }
}
updateTitle(); // calling function to trigger functionality on load
});

Upvotes: 1

Related Questions