CODEWITHSUNDEEP
jquery
user663724
user663724

Reputation:

Once div is closed its not showing up again

Enter any pin other than 1111 and click on Go Button a div appears .

The issue is that if i click on the cross mark (right side of the newly appeared div)

The div never shows up again , even i enter invalid pins

This is my code 

$( document ).ready(function() {
$('.alert').hide();
})



 $(document).on("click", ".login-btn", function() {

       var pin_input = $.trim($("#pin").val());

        if(pin_input==='1111')
        {
            $('.alert').hide();
        }
        else
        {
            $('.alert').show();
        }
    });

http://jsfiddle.net/vcr9J/401/

Could you please let me know how to resolve this .

Upvotes: 0

Views: 161

Answers (2)

Dayton Wang
Dayton Wang

Reputation: 2352

Like @Jack mentioned, the data-dismiss="alert" which dismisses the alert, the alert is actually removed from the data model. Therefore, when you click to attempt to show the element again, that element no longer exists.

So you have to remove your data-dismiss and respond to the click event on the close button to slideUp element. Then your subsequent show code will find the DOM elements successfully. As:

https://jsfiddle.net/gui47/vcr9J/407/

Upvotes: 0

Daniel Falabella
Daniel Falabella

Reputation: 578

Jack is right: "dismissing a bootstrap alert removes it from the DOM." The element does not longer exists when clicking on the cross mark.

A simple solution is to not rely on Bootstrap's "data-dismiss."

Step 1: remove the following from cross mark button:

data-dismiss="alert"

Step 2: Add your own solution to hide alert when clicking on the cross mark.

Here is the JS Fiddle: http://jsfiddle.net/vcr9J/406/
Here is the code:

JS CODE

$( document ).ready(function() {
$('.alert').hide();
})

$(document).on("click", ".login-btn", function() {

   var pin_input = $.trim($("#pin").val());

    if(pin_input==='1111')
    {
        $('.alert').hide();
    } else {
        $('.alert').show();
    }
});

$('#close-alert').click(function () {
    $('.alert').hide();
})

HTML

<div class="contentWrap">
      <section class="container_mobile" style="width: 500px;">
         <div class="content_inner">
            <div class="alert alert-danger alert-dismissible full_row pull-left" role="alert" style="width:100% !important">
               <button type="button" id="close-alert" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <strong id="information"></strong>
            </div>
            <div class="field_whit_bg login_fields">
               <div class="field_group"><input type="tel" name="pin" class="field_input" placeholder="Pin" id="pin" ></div>
            </div>
            <!--<a class="btn btn-primary login-btn" id="go" >GO</a>-->
            <button class="btn btn-primary login-btn">GO</button>
         </div>
      </section>
   </div>

Upvotes: 1

Related Questions