0

In my project for login error I used the bootstrap alert. But the problem is that when there is an error it displaying well. But if there is not an error it show an empty box can anyone tell me what the problem? At starting I don't want to show this empty div. can anyone tell me how to hide this and show this div when there is an error?

The screen is

enter image description here

If there is an error output screen works enter image description here

Code is

<script> window.setTimeout(function() { $(".alert").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 4000); </script> <!-- Below Alert div Start --> <div class="alert alert-warning alert-dismissible fade show" id="alert" role="alert"> {update_message} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <!-- Below Alert div End -->

html code

 {HEADER_HTML} {HEADER_MIDDLE_HTML} <script> function placeHolderAdd() { const mailInput1 = document.querySelector("[name='TREF_email_address1']").placeholder = "enter email"; const passwordInput1 = document.querySelector("[name='TR_password1']").placeholder = "enter password"; const mailInput2 = document.querySelector("[name='TREF_email_address2']").placeholder = "enter email"; const passwordInput2 = document.querySelector("[name='TR_password2']").placeholder = "enter password"; } window.addEventListener('load', placeHolderAdd); </script> <!-- Below Script for auto close --> <!-- <script> window.setTimeout(function() { $(".alert").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 4000); </script> --> <script type="text/javascript"> const alertText = document.querySelector(".alert-content"); if (alertText.value = "") { console.log('null') } </script> <div class="container"> <div class="row"> <div class="col-md-5 mx-auto"> <!-- Below Alert div Start --> <div class="alert alert-warning alert-dismissible fade show" id="myAlert" role="alert"> <div class="alert-content"> <!-- {update_message} --> </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <!-- Below Alert div End --> <div class="card card-custom"> <div class="card-header card-header-custom"> <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"> <i class="fa fa-user loginicon" aria-hidden="true"></i> {HEADING_TITLE1} </a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"> <i class="fa fa-briefcase loginicon" aria-hidden="true"></i> {HEADING_TITLE2} </a> </li> </ul> </div> <div class="card-body card-body-custom"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h5 class="ml-3 pb-2">{SIGN_IN}</h5> <div>{AREA1}</div> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <h5 class="ml-3 pb-2">{SIGN_IN}</h5> <div>{AREA2}</div> </div> </div> </div> </div> </div> </div> </div> {FOOTER_HTML}
Improve this question
2

3 Answers 3

Reset to default
1

you can try this code.
hear is javascript code:

<script> $(function(){ $(".close").on("click",function(){ $(".alert").hide(); }); window.setTimeout(function() { $(".alert").fadeTo(500, 0).slideUp(500, function(){ $(this).hide(); }); }, 4000); }) </script>

Hear is 'HTML' code:

<!-- Below Alert div Start --> <div class="alert alert-warning alert-dismissible fade show" id="alert" role="alert"> {update_message} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

I saw your code I don't see any button which clicks event remove that alert box so You can see some examples for your requirements. How to make alert button hide show using jquery, bootstrap on button click event.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

not working...basically at starting I doesn't want this blank div. If there is an error while user submit the form then alert div appear and disclose. But Now in this case now form submit but alert div persist.
ok, can you share the code of your form. I have to check to submit button click event code.
full html code is added...but I tell you these { name_whatever } is called from .php file. And under .php code is not written by me I'm trying to fixing the login alert message.
yes, I understand that because i am a PHP web developer and also my expertise in PHP laravel framework.
ok no problem more than 2 years experience in code both PHP and laravel framework
|
0 

 $(document).ready(function() { if ($('.alert-content').text().trim() == "") { $(".alert").hide(); } else { $(".alert").show(); } });
 .alert{ background:#eee } .alert *{ display:inline }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="alert alert-warning alert-dismissible fade show" id="alert" role="alert"> <div class="alert-content"> </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

First of all put text inside a div

 <div class="alert alert-warning alert-dismissible fade show" id="alert" role="alert"> <div class="alert-content"> {update_message} </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

Now you can check if message is empty with JQuery (I'm checking on document ready)

<script type="text/javascript"> $(document).ready(function () { if ($('.alert-content').text().trim() == "") { $(".alert").hide(); } else { $(".alert").show(); } }); </script>
Improve this answer

4 Comments

I used your code but nothing is working. still same blank div appears.
it is called from .php file and this code is in .html file
Ok, the code should work if your {update_message} is completly empty. However, when your document is ready maybe your {update_message} has not been set yet. In this case use a setTimeout() or some other trigger
I've added a snippet, as you can see the alert is hidden
0

It seems that you just need to make it so that if there is an error with the login, depending on how that works, it might be a query in the URL stating what error it is, show the whole modal.

Currently what is happening is that your modal is showing with nothing in it as there is no error.

So you need to make it so that the whole modal is only shown once there is an error.

I hope this helps with anyone else trying to help, it seems that a lot of people were misunderstanding what is going on here.

Improve this answer

7 Comments

yes, if there is an error then the div appear, but in my case if there is no error.empty div appear or if there is an error, correct div appear with message.
Yes, that's what I'm saying, the div needs to be hidden when there is no error.
do you have any idea how to hide and unhide if errror occur?
Well I'm not really sure how your application works. You mentioned it uses PHP but you posted a html code block?
basically {update_message} variable called from php file
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.