If Else only Loops and Once

0

I have looked at a lot of different articles and S-O posts about If/Else Statements, Binding and Dynamically Created content etc.

Sorry can poast more than 2 links (per S-O):

Third, here is the problem:
I have a password overlay modal that shows when you click a a div that has a class of “.locked” When you enter the “correct” password it will execute the code to close the overlay and change the div green.

If you enter the wrong password it will show a message under the password/form input div.

If you click on cancel it will close the overly.

  • All works well for a successful submission if you only run through
    the process once. The desired result is to have it execute/function every time
    the password form in invoked.

  • All works well for a wrong password submission. It will show a
    randomly selected message under the password input div. This is
    working as expected. It binds and executes on every boxFrame div
    click/invoke and it will loop countless times for incorrect
    entries… both are the desired result.

  • All works well for a cancel button click if you only run through the
    process once. The desired result is to have it execute/function every time
    the password form in invoked.

I feel like I am missing something simple but I am making no headway. I’m a novice with Javascript; maybe my search terms are not pointing me in the right direction.

I have tried:
To wrap the IF Else Conditions inside a while loop based on a classname being (a value greater than 0) present but that resulted in an infinite loop which caused problems… that said, I do need the the functions to bind on each click of the boxFrame div.

I have tried adding return false – this just resulted in nothing triggering.

I have tried going up the DOM tree to bind the click and submit events to a parent element that always exists on the page. Thinking it was a binding issue at first but by virtue of that fact that the overly is successfully created on each instance of the boxFrame and that the second half of the IF/ESLE always works as expected the functions are being successfully called.

I tried putting a console log into each condition just to test if the condition is met the second time around that it actually enters that area of the code… It does not.

Thanks again for any help, here is the code:
Please note form submission works on CodePen
S-O: I receive an error due to sandboxing and permissions.
(CodePen Link http://codepen.io/jh-thank-you/pen/QpaWbg)

//  Modal Vars   =============================================================================

var body = $("body");

var boxFrame = $(".boxFrame");

var overlay = $("<div class='overlay'></div>");
var overlayDiv = $(".overlay");
var lockedModalOverlay = $("<div class='row locked-modal'><form id='passwordForm' class='row column log-in-form'><label>Password<input type='text' name='password' placeholder='Password'></label><label class='passwordResponse'>&nbsp;</label><p><input id='submitButton' type='submit' class='button expanded'></p><p class='button expanded cancelMe'><a type='cancel' class='button expanded'>Cancel</a></p></form></div>");

var lockedModal = $(".locked-modal");



function boxFrameClick() {

  $('body').on('click', '.boxFrame', function() {
  var myBoxFrame = $(this);
    
    if ($(this).hasClass("locked")) {
      
      // Open the Login Modal
      body.append(lockedModalOverlay);
      
      $(".locked-modal").ready(function () {
        // Action after append is completly done
            $(".locked-modal").css('display', 'block').css('opacity', '1').fadeIn('slow');


            $(".locked-modal").ready(function() {
               // Bind Click Event
            cancelMeButton();

            // Bind Click Event and Pass Var
            passwordSubmit(myBoxFrame);
            }); // END READY
        }); // END  READY

    } else {
      // Open the Client Work Modal
      openTile(myBoxFrame);
   
    }
}); // END boxFrame on Click

}; // END boxFrameClick

// Call and Bind Click Event
boxFrameClick();



// START - Locked Login Modal =================================================================

function cancelMeButton() {

  $('body').on('click', '.cancelMe', function() {
    $(".locked-modal").fadeOut('slow').queue(function(next) {
            
      // Clear previous password typed in
            $("#passwordForm")[0].reset(); 
      
            // Remove Method - 
            // Removes the Elements and 
            // all Events Bound to the Elements
            lockedModal.remove();
      
            console.log('cancel/close the overlay form worked');
      

        }); // END Delay Queue

  }); // END cancelMe on Click

}; // END cancelMeButton


function passwordSubmit(myBoxFrame) {
  var passwordCode = 'correct';
  var passwordEntered = null;

  $('body').on('submit', '#passwordForm', function( event ) {
     passwordEntered = $("input[name='password']").val();
        

      if (passwordCode == passwordEntered) {

        // Clear previous password typed in
        $("#passwordForm")[0].reset();

        // Correct Password - Close Password Overlay 
        // and Open Cleint Work Overlay
        event.preventDefault();

        $(".cancelMe").click().delay(270).queue(function(next) {

            // Open the Client Work Modal
          $(".boxFrame").css( "background-color", "green").delay(2000).queue(function(next) {

            // Open the Client Work Modal
          $(".boxFrame").css( "background-color", "gray");
            
            console.log('correct password submit worked');
                      

        }); // END Delay Queue
          
  

        }); // END Delay Queue
      
     } else {
      // Wrong Password Display a message
      event.preventDefault();

      // Clear previous password typed in
      $("#passwordForm")[0].reset();
      
      // selecting a random array item
      var selectResponse = [
                          'No soup for you!',
                          'Great googly moogly!',
                          'Hhmmmm salty!',
                          'I need more cowbell!'
        
                          ];// END Array
      var pickAResponse = function () {
      var currentResponse = selectResponse[Math.floor(Math.random() * 4)];
      return currentResponse;
      };

      $( ".passwordResponse" ).text( pickAResponse ).show().stop().css( 'opacity', '1').fadeTo( 5000, 0, function() { 
        $( ".passwordResponse" ).html( "&nbsp;" ).show().css( 'opacity', '1');
      }); // END Password Text Response
       
       console.log('wrong password submit worked');
       
     } // END If Else
      
           
  }); // END Submit

}; // END passwordSubmit

// END - Locked Login Modal =================================================================
.boxFrame {
  display: inline-block;
  opacity: 1;
  position: relative;
  background-color: gray;
  cursor: pointer;
  width: 200px;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 1150px;
  line-height: 0;
}

.boxFrame p {
  color: white;
  line-height: 1.25rem;
    padding: 1rem;
}


/* *************************************************** */
/* ************ Locked Login Modal Overlay *********** */
/* *************************************************** */

.locked-modal {
  position: absolute;
  display: none; /* set by GSAP */
  opacity: 0; /* set by GSAP */
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  bottom: 0;
  background-color: rgba(0,0,0,.85);
  z-index: 105;
}

.log-in-form {
  position: absolute;
  display: block;
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 80%;
  height: auto;
  transform: translate(-50%, -50%);
}

.locked-modal > form > label {
  width: 100%;
  color: #6D6E70;
  opacity: 1;
}

.locked-modal > form > label > input {
  display: block;
  background-color: #A0A1A3;
  margin-bottom: .55rem;
  margin-top: .5rem;
  padding: .25rem;
  height: 35px;
  width: 100%;
}

.locked-modal > form > p {
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
}


.locked-modal > form > p > input.button {
  background-color: #c42127;
  border: solid 1px #c42127;
  height: 35px;
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
}


.locked-modal > form > p > input.button:active,
.locked-modal > form > p > input.button:focus,
.locked-modal > form > p > input.button:hover {
  background-color: #93191E;
  border: solid 1px #93191E;
}

.locked-modal > form > p.expanded {
  background-color: rgba(0,0,0,.01);
  color: #c42127;
  border: solid 1px #c42127;
  height: 100%;
  width: 50%;
  padding: .5rem;
  margin-right: 25%;
  margin-left: 25%;
  text-align: center;
}

.locked-modal > form > p.expanded:active,
.locked-modal > form > p.expanded:focus,
.locked-modal > form > p.expanded:hover {
  background-color: #93191E;
  border: solid 1px #93191E;
  color: white;
}

@media all and (max-width: 40em) {
.log-in-form { 
    width: 80%; 
  }
}

@media all and (min-width: 40.063em) and (max-width: 90em) {
.log-in-form{
  width: 25%;
  }
}

@media all and (min-width: 90.063em) {
.log-in-form {
  width: 15%;
  }
}

 label.passwordResponse {
  cursor: default;
  height: 1.5rem;
  font-size: .9rem;
  font-style: italic;
  color: white; 
  margin-top: 0;
  margin-bottom: .35rem;
}
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<div class="boxFrame locked"><p>Click on me - A Passworword Modal Form will Open <br><br>Type in the "correct" password and I will turn green. <br><br>Type in the wrong password and I will show a message.</p></div>

Link: If Else only Loops and Once
Source: Stack Jquery

Share.

About Author

Leave A Reply