Bootstrap 4 Show Alerts - javascript

In Bootstrap v4 how do I show alerts through JavaScript? My goal is to have the alert hidden when the page loads then when a AJAX call completes turn the alert on to display a message.
I see in the documentation how close the alert but no where how to display it:
https://getbootstrap.com/docs/4.0/components/alerts/#methods
I have the following fiddle where I show the alert first (not what I want) then press a button to close it. A second button is there to turn it back on but no clue what to pass to it to make it work. I figure if I can make this sample work I can then figure out how to make it work with the alert not displayed on the page load
https://jsfiddle.net/jhf2e5h6/
<div class="row">
<div class="col-sm-12">
<div id="divInfo" class="alert alert-success show fade ">
<div class="alert-heading"> :</div> <p></p>
</div>
</div>
</div>
<button id="close">Close</button>
<button id="show">Show</button>
<script type="text/javascript">
$(function () {
$('#close').on('click', function () {
$('#divInfo').alert('close');
});
$('#Show').on('click', function () {
$('#divInfo').alert('?????');
});
//
});
</script>

Method .alert destroys the DOM. So no possibility to go back. Have a look to documentation :
https://getbootstrap.com/docs/4.0/components/alerts/#methods
You should try to use removeClass/addClass.
$('#close').on('click', function () {
$('#divInfo').removeClass('show');
});
$('#show').on('click', function () {
$('#divInfo').addClass('show');
});
And you have mistake on 'Show', you should try 'show'.

Bootstrap 4 has .d-none, which does display: none. This comes in handy if your alert contains a dismiss button.
So add .d-none to your .alert element (e.g. on page load), and do the following:
// Show the alert
$('.alert').removeClass('d-none').addClass('show');
// Hide the alert
$('.alert').addClass('d-none').removeClass('show');

close removes it from the DOM so it can't be re-shown.
You can instead toggle the invisible class...
https://www.codeply.com/go/mbshAxZQMH
$(function () {
$('#close').on('click', function () {
$('#divInfo').addClass('invisible');
});
$('#show').on('click', function () {
$('#divInfo').removeClass('invisible');
});
});

I prefer to dynamically create alert content
<div id="alert"></div>
<script type="text/javscript">
function showAlert(obj){
var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
' <strong>' + obj.message + '</strong>'+
' <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
' <span aria-hidden="true">×</span>'+
' </button>'
' </div>';
$('#alert').append(html);
}
$('#Show').on('click', function () {
showAlert({message: 'Hello word!', class:"danger"});
});

Related

trigger method not working in jQuery

I have a page which has about 100 divs like this.
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
The IDs have different number. And I am trying to click on this div/or the spam via jQuery one by one. So, I made a loop like this..
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
get_div = jQuery("#" + div).trigger('click');
}
}
});
The above code should work, but for some reason it doesn't. It works with styling and all other DOM manipulations like changing color of the text via
jQuery("#" + div).css({'color': 'red'}) so the loop is ok, I also tried to target the span using jQuery("#" + div).find('span').trigger('click') but nothing happens.
btw: on the website, if you click any of the divs, the instantly show you more information, but with the this nothing changes, I am not sure if the trigger click is even working
Here is the updated version of your code. Instead of jQuery("#" + div).trigger('click'), you can use $(this).trigger('click') and separately, define what should happen on the click event.
$(document).ready(function() {
$('div').each(function() {
div = $(this).attr('id');
if (div && div.includes('ListItem_JBEEB')) {
$(this).trigger('click');
}
});
});
$('div').on('click', function() {
console.log($(this).attr('id') + ' got clicked..');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
<div id="ListItem_JBEEB_848">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-1</span>
</span>
</div>
<div id="ListItem_JBEEB_849">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-2</span>
</span>
</div>
You have to initialize the click event before calling it, You have to check that the particular click event is already initialized before calling it not not else it won't perform the click event.
For Example
// THIS WILL WORK
$(document).ready(function() {
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
});
// THIS WILL NOT WORK
$(document).ready(function() {
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
});

Bootstrap modal hide is not working

Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.
<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>
<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-bootstrap-dialog modal-sm">
<div class="modal-bootstrap-content">
<div class="modal-bootstrap-body">
-- content ----
</div>
</div>
</div>
<div class="modal-bootstrap-footer">
<button type="submit" class="button primary" data-dismiss="modal">Close</button>
<button type="submit" class="button primary">Save changes</button>
</div>
</div>
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
bootply
You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.
Just remove the data attributes and go with the Javascript method:
<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>
<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<!-- modal contents -->
</div>
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
} else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
I had same problem. Remove fade class.
I had the same problem, tried a lot of things but the only solution that worked for me is #Tang Chanrith suggested to remove individually parts of the modal but a little bit improved to place back and the scrollbar. I'll put my answer just if the accepted answer did not work for them. Sorry for my english. Hope I helped.
#Tang Chanrith
Try this function
function hideModal() {
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$("#myModal").hide();
}
Improved Sollution
You just have to delete a class from body and css that generated
function hideModal() {
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$("#myModal").hide();
}
For those still having issues (hi Googlers!), if you're using fade, you'll have to use javascript to remove fade class.
Try this function
function hideModal(){
$("#myModal").removeClass("in");
$(".modal-backdrop").remove();
$("#myModal").hide();
}
Remove the modal class "fade" will do.
I have solution this problem.
$('#landingpage, body').on('click',function(){
$( ".action-close" ).trigger( "click" );});
try to add return false like this:
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
return false;
});
I checked your code.
Now you compare a == 5. but a is always 4. you may have to check this why you are doing this comparison.
Also you need you remove the data-target if you want to open modal from javascript :
<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>
data-target directly opening the modal.
Check if this is working.
You should try this $('.modal.in').modal('hide')
Via https://github.com/twbs/bootstrap/issues/489
I had the same problem, my mistake was that I was trying to open the modal window a few times. We must test that the modal window is not already open before trying to open it.
if (!($("#MyModal").data('bs.modal') || {})._isShown){
$("#MyModal").modal('show');
}
Hide modal dialog box using bootstrap
Method 1: using bootstrap
$('.close').click();
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');
Method 2: using stop-propagation
$("a.close").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Method 3: After shown method invoke
$('#myModal').on('shown', function () {
$('#myModal').modal('hide');
})
Method 4: Using CSS
this.display='block'; //Set block css
this.display='none'; //set none css after close dialog
In the java script code you need to add one line of code
$("#savechanges").on("click", function (e) {
$("#userModal").modal("hide");
e.stopPropagation(); //This line would take care of it
});
As I encountered, sometimes you need to remove display style:
style="display: block;"
I had the same issue. I tried the JavaScript way suggested in the post, unfortunately it only worked half of the time. If I triggered my modal a few times, it bugs out. As a result I created a work around using CSS:
/* Hide the back drop*/
.modal-backdrop.show {
display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
background-color: rgba(47, 117, 19, 0.3);
}
I was opening the modal popup when I click on the link using data-toggle="modal" attribute which was bound with that link and trying to close it using javascript but I was failed each time, so when I remove the "data-toggle" attribute and "href" from that link and opened it using javascript then it was closing properly using javascript as well.
from the below few lines of code, you can understand easily
Advanced Search
I changed the above link to something link this
Advanced Search
After that when I try to close it using javascript, then I become successful
$("#CustomerAdvancedModal").modal('hide');
I am also having the same problem, where I can't find the correct solution for it.
Later I observed that what is happening when the modal gets closed when it works well.
Three Main properties are,
modal-open class gets removed from <body> tag.
In <body> tag change CSS .
<div> class of modal-backdrop gets removed.
So, When u do these things manually, you will achieve it, when not works.
The code should be as following in Jquery,
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal-backdrop").remove();
$('#myModal').hide();
Hence, try this and get a solution.
Before you open a loading modal, make sure that you close all others.
This is the function is use to close the modal:
function hideLoadingModal() {
$('#loadingModal').on('shown.bs.modal', function () {
$('#loadingModal').modal('hide');
});
}
Now if I want to open the modal I call the above function and open a new one after that.
Like this:
hideLoadingModal();
$('#loadingModal').modal('show');
Hope this helps you.
Cheers
One possible reson should be the order of jquery and bootstrap and your script is not in proper sequence.
Below should be the sequence.
1. <script src='js/jquery-3.2.1.min.js'></script>
2. <script src='js/bootstrap.min.js'></script>
3. your own script:
<script type="text/javascript">
$("#buy").click(function () {
var a = 4;
if (a == 5) {
alert("if");
$('#myModal').modal('show');
}
else {
alert("else");
$('#myModal').modal('hide');
}
});
</script>
Check if you closed all nested div inside main modal div
<div data-backdrop="static" class="modal fade" id="modal-progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-----NESTED DIV ------------------
</div>
None of the above solutions worked for me. If this is your case, try to imitate click event on the close button (the one which is added dynamically):
<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;">
<div class="modal-dialog modal-dialog-centered" role="document">
...
</div>
Close</div>
</div>
$('.close-modal').click() should resolve the issue.
Try this
give an id to close button
<button type="submit" id="modalcloseBtn" class="button primary" data-dismiss="modal" >Close</button>
and trigger onclick event
$('#modalcloseBtn').trigger("click");
G.modals = [];
/**
*
* #param {
* modalId: string,
* callback: function
* } options
* #returns
*/
const openModal = (options) => {
const {
modalId = false,
callback = () => { }
} = options;
if (!modalId) return;
const modalNode = document.querySelector(`#${modalId}`);
modal = new bootstrap.Modal(modalNode);
modal.show();
const modalObject = {
modal,
id: modalId
};
G.modals.push(modalObject);
callback();
};
/**
*
* #param {
* modalId: string,
* callback: function
* } options
* #returns
*/
const closeModal = (options) => {
const {
modalId = false,
callback = () => { }
} = options;
if (!modalId) return;
const currentModal = G.modals.find(item => item.id === modalId) || false;
if(!currentModal) return;
const { modal } = currentModal;
const { _element, _backdrop } = modal;
_element.classList.remove('show');
_backdrop._element.remove();
G.modals.splice(G.modals.indexOf(currentModal), 1);
callback();
};
openModal({
modalId: 'your-modal-id',
callback: () => {
DoSomethingAfterModalOpened();
}
});
closeModal({
modalId: 'your-modal-id',
callback: () => {
DoSomethingAfterModalClosed();
}
});
if nothing helps (that happens) - make sure that nobody prevents it like below (my case):
$modal.on('hide.bs.modal', function (e) {
if (shouldNotBeClosed) {
return e.preventDefault();
}
});
Same issue here for no reason, i'm not using "fade" stuff.
I open modal and close modal only with js, the hide function is working only when called inside a setTimeout.
<script>
var modal_show = function(){
$("#modal_post").modal("show");
};
var modal_hide = function(){
$("#modal_post").modal("hide");
};
window.addEventListener("message", function(event){
// listening iframe post message
modal_hide();
});
</script>
<div class="modal" id="modal_post" tabindex="-1" role="dialog" style="width: 100%;" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" style="width: 450px; height:600px; background: white; border: none; box-shadow: none;" role="document">
<div class="modal-content" style="width: 100%; background: white; border: none; box-shadow: none;">
<div class="modal-body" style="width: 100%; background: white; border: none; box-shadow: none; padding: 0;">
<div>
<iframe src="https://perdu.com" style="width:450px;height:600px;"></iframe>
</div>
</div>
</div>
</div>
</div>
For no reason, modal_hide(); is working inside the console but not in my code.
If i replace the modal_hide(); in the event listener with setTimeout(modal_hide, 200); it's working properly
its very easy.. Remove fade class :)

Why I have to click twice to show Div using jquery?

I have a button that I should show a message in front of it so i'm using the following jq code:
<script type="text/javascript">
$("#msg").html(data);
var pos = $("#answer2ticker").offset();
$("#msg").offset({top: pos.top, left: pos.left});
$("#msg").show();
</script>
<div class="alert alert-danger" id="msg" style="position: absolute;" hidden="hidden" onclick="$(this).hide();"> </div>
THE PROBLEM:
the message shows the first time normally, but when I hide it and try to show it again, I have to click on show twice.
so hiding is normal, but showing has to be called twice.
Why dont you just use jQuery toggle function?
$( document ).ready(function() {
var data = "test";
$("#msg").html(data);
$("#answer2ticker").click(function() {
$('#msg').toggle();
});
});
Example: http://jsfiddle.net/acidrat/LbEVL/1/

bootstrap custom alert close on click and for x amount of time?

What I'm trying to do is to add to a custom message box a time function to keep the message box hidden for x amount of time, but only when the user click on the appropriate button. (dismiss)
I'm trying to take advantage of bootstrap but now I think I need some jquery code as well.
this is what I 'm using to show the message:
<div class="notifier-box">
<div class="custompm fade" id="message1">
<p> {L_YOU_HAVE} {PRIVATE_MESSAGE_INFO</p>
<button data-dismiss="alert" class="btn btn-small">{L_DISMISS}</button>
</div>
</div>
with this function:
<script>
head.ready(function () {
// some callback stuff
$('#message1').toggleClass('in');
});
</script>
First you check the correct implementation of Bootstrap Alerts (some examples here):
<div class="alert alert-warning fade in" id="message1">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
Using jQuery you need to setup a timer to auto dismiss alert box, and bind an event to the button who will dismiss the alert with a click:
$(function(){
setInterval(function(){
$("#message1").alert('close');
},3000); // milliseconds to auto dismiss
$("#button_dismiss").on('click', function(){
$("#message1").alert('close');
});
});
Update: According to your comments:
<div id="message1">I am an alert!</div>
<script>
$(function(){
// Set a global timeout handler
var timeoutHandle = window.setTimeout(function(){
$("#message1").addClass('hide');
}, 2000);
$("#some-button").on('click', function(){
// Clear current timeout
window.clearTimeout(timeoutHandle);
$("#message1").removeClass('hide');
timeoutHandle = window.setTimeout(function(){
$("#message1").addClass('hide');
}, 2000);
});
});
</script>

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/
I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});
You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

Categories

Resources