Messages - JWalshe86/career GitHub Wiki

success message upon job search update

<div class="m-4"> 
  	<p><strong>Note:</strong> By default toasts will automatically hide if you do not set autohide to false.</p> 
	<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button> 
    
     <div class="toast" id="myToast"> 
        <div class="toast-header"> 
             <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong> 
             <small>11 mins ago</small> 
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> 
         </div> -->
         <div class="toast-body"> 
             It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a> 
         </div> 
     </div>

Bootstrap Toast needs bootstrap.min.css & bootstrap.min.js to work

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

πŸŽ‰ image This means the base.html extension isn't passing on these links Added links to base.html & bootstrap functionality passing over to add data template now image

πŸ› The following code in the add_data view isn't working:

from django.contrib import messages

def add_data(request):
    "add data from google sheet"
    if request.method == "POST":
        print('in add_data')
        form = JobsearchForm(request.POST, request.FILES)
        if form.is_valid():
            data = form.save()
            messages.success(request, "Successfully added job application!")
            return redirect(reverse("display_data"))

Found solution here

Added this to settings.py

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

Then this to my base template

{% for message in messages %}
    <div class="alert {{ message.tags }} alert-dismissible shadow fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {{ message | safe }}
    </div>
{% endfor %}

πŸŽ‰ Toasts working now image

Clicking close on the messages now works. Answer found using chatgpt "If you're using Bootstrap 5, ensure that Popper.js is included, and you might also need to check if you’re using the correct data attributes (data-bs-* instead of data-*)."

Edit_HTML

⚠️ **GitHub.com Fallback** ⚠️