How can you simply hide Bootstrap alerts instead of deleting them when closing?

I am utilizing the power of Bootstrap 4 Alerts to showcase error messages, just like in their demo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

I am also incorporating AJAX calls for form POST submissions.

The issue I am encountering is that after a user submits and closes the error message, if they submit again and encounter an error, I am not able to display the alert container because it seems to have been removed from the DOM or the page. The DIV element appears to have been destroyed, making it impossible to make it visible again with a d-block class.

Is there a way to make the close button simply 'hide' the container instead of completely removing it? I need to be able to display it again even after the user has closed it.

Thank you! Pat

javascriptajaxbootstrap-4

Answer №1

After some tinkering, I decided to swap out data-dismiss="alert" for an 

onClick="$('#idOfDiv').addClass('d-none');"
approach...

Thanks a lot for your assistance! -Pat

Answer №2

Have you experimented with incorporating jQuery or Javascript into your project?

Consider enhancing your design by including an "arrow" icon in the top corner. Additionally, try splitting your alert into two separate sections: one that is a thin strip that stays visible at all times, and another that toggles when clicked.

Answer №3

Update the data-dismiss="alert" to 

onclick="$(this).closest('.alert').hide()"
:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Wowza!</strong> Make sure to take a look at those fields below.
  <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dropdown options for the input type file in Vuejs PWA are not appearing

I have created a Vue.js progressive web app that allows users to easily upload images from their mobile phones. While the app typically functions well, there is an issue where upon downloading the app to the homescreen, the image upload feature sometimes b ...

javascripthtmliosvue.jsprogressive-web-apps

Most effective method for integrating ajax URLs and browser history in a unique Joomla component

I have been given the task of enhancing the search functionality of a custom Joomla component that is solely operated through AJAX. Currently, the search does not handle URL/query strings, preventing users from using the browser back button to return to pr ...

javascriptphpjqueryjoomla

What is the correct method to remove an item from local storage?

Using localStorage, I have stored multiple objects in an array. Is there a way to remove just one object from this array? If I use localstorage.removeItem(keysofthelocalstorage), I can delete the entire array, but I specifically want to remove only certai ...

javascriptjson

Rendering in ThreeJS Causes IE11 to Crash

I encountered a peculiar issue with Internet Explorer 11 while working on WebGL programming. Everything was functioning smoothly in all browsers until, out of the blue, IE started crashing when altering the positions of 4 meshes, without pointing to any sp ...

javascriptinternet-explorercrashthree.jswebgl

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on im ...

javascriptjqueryhtmlcssclick

What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...

htmlcssbootstrap-4bootstrap-5

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

Was the Gideon Sundback Google doodle created using JavaScript? I attempted to follow along in Firebug, but I couldn't quite grasp its implementation details. Any ideas on how it was possibly implemented? Any insights on the potential techniques use ...

javascriptcssgoogle-doodle

What is the correct way to update the state of an object in ReactJS using Redux?

Hello, I am facing an issue with storing input field values in the state object named 'userInfo'. Here is what my code looks like: <TextField onChange={this.handleUserUsername.bind(this)} value={this.props.userInfo.username} /> ...

javascripttextfieldreduxreactjs

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js

What is the best way to refresh a PHP function based on a JavaScript event?

I have a website where a div tag shows all the values from a SQL database using PHP. I want to reload this div tag with a JavaScript event, such as clicking on an HTML button. Is it possible to bring back all the values from the SQL database and display th ...

phpjavascriptmysql

How to invoke PHP script through AJAX using jQuery

I am attempting to send a parameter through AJAX from jQuery and use a specific SQL query based on the value of that parameter. I then want to receive the response from the PHP page called via AJAX. My question is why this code isn't functioning as ex ...

phpjquerysqlajax

AngularJS has encountered an issue with a route resolve promise that has not been completely resolved

I'm currently working on a simple task to manage user roles within routes. The goal is straightforward: Verify the role of the logged-in user on each route (using a resolve function to authenticate the user based on token or login credentials) Direc ...

javascriptangularjsangular-routingangular-promise

Tips for implementing an onclick jquery function within an input field

Just starting out with JavaScript and jQuery, I have a jQuery function that looks like this: $('.input-group .date').datepicker({ }); I want to apply it to the following HTML structure: <div class="input-group date" id="dp3"> <inp ...

javascriptjqueryonclick

There appears to be no data available from the Apollo Query

I'm facing an issue with the returned data from Apollo Query, which is showing as undefined. In my code snippet in Next.js, I have a component called Image with the src value set to launch.ships[0].image. However, when running the code, I encounter a ...

javascriptreactjsgraphqlnext.jsapollo

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...

javascripthtmlurlhref

Ways to retrieve a specific value from a JSON dataset

I currently have an Ajax live search script with multiple text inputs for searching products. The live search functionality works perfectly, but I have a query: If I decide to change the name of a product, how can I go back to the previous page and re-s ...

javascriptjqueryajaxlaravel-5

Enhance the efficiency of React code by optimizing the loading of data from multiple sources concurrently instead of one after another

In my project, there are 2 tabs displaying visualizations generated from separate data sources. Each tab requires multiple queries to be executed in the background to fetch the data, resulting in a delay when loading each tab individually. The current impl ...

javascriptreactjs

Iterate through the array in order to showcase or output it in PHP syntax sourced from an API

[0] => Array ( [id] => 6 [name] => Digitally Imported Psy Goatrance [country] => GB [image] => Array ( [url] => https://img.dirble.com/station/6/original.png ...

javascriptphpjson

What is the best way to address the excess white space between an image and progress bar on larger screens while utilizing the Bootstrap Grid system?

https://i.sstatic.net/NXMNV.pngLet's begin by visualizing the concept through these images: In Picture (1), the progress bars are positioned below the image on medium to large screens, with the text aligned to its right. https://i.sstatic.net/Cw1aM.pn ...

htmlcssbootstrap-4bootstrap-5grid-system

Attempting to assign a File object as a property to a component but receiving an empty object in return. I'm curious about the security implications of this as well

I created a modal for previewing avatars with a generic design: <avatar-update :img-file="avatarFile" :show="avatarModalShow" :img-url="url" @close="avatarModalShow = !avatarModalShow" :change-avatar="updateCrop" @destroyUrl="imgUrl = null"> </av ...

javascriptlaravelsecurityvue.js