CODEWITHSUNDEEP
javascriptdjangodjango-bootstrap3
boyenec
boyenec

Reputation: 1617

Django how to disappeared bootstrap alert box messages after few seconds

Before posting this question I found few solutions on stackoverflow and tried but non of them didn't work. I want the message will be disappeared after 2 or three seconds. here is my code:

 {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                    <div class="alert alert-danger" role="alert">
                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                    {% endfor %}
                    </div>
                </ul>
 {% endif %}

it look like this: enter image description here

here given below few JavaScript code which I tried for disappeared the alert box after few seconds but none of them didn't work:

code1:

<script text="javascript">
    setTimeout(fade_out, 3000);
    function fade_out() {
        $(".messages").fadeOut().empty();
    }
    
 
</script>

code2

<script>
    $(document).ready(function() {
        // messages timeout for 10 sec 
        setTimeout(function() {
            $('.message').fadeOut('slow');
        }, 10000); // <-- time in milliseconds, 1000 =  1 sec

        // delete message
        $('.alert').live('click',function(){
            $('.alert').parent().attr('style', 'display:none;');
        })
    });
</script>

code3

<script>
setTimeout(function() {
    $('.messages').fadeOut('fast');
}, 30000); // <-- time in milliseconds
</script>

code4

<script>setTimeout(function(){$('.messages').fadeOut();}, 15000);</script>

I am not understanding why above code not working? where I am doing wrong?

Upvotes: 0

Views: 1217

Answers (1)

Mahdi mehrabi
Mahdi mehrabi

Reputation: 1734

Code 2 is right just you have a typo in your code use messages class instead of message class

put this code just before </body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        // messages timeout for 10 sec
        setTimeout(function() {
            $('.messages').fadeOut('slow');
        }, 10000); // <-- time in milliseconds, 1000 =  1 sec
    });
</script>

I test this code myself and it works fine

Upvotes: 1

Related Questions