display alert after button is clicked - javascript

I have a button that pops up an alert "Hello" after being clicked.
It works fine for the first click but after I close the alert and I clicked the button again, the alert doesn't shows. Please help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Show Alert</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="row">
<div class="alert alert-success hidden" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<span class="glyphicon glyphicon-ok"></span> Hello
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-default">Open
Alert</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('#success-alert').removeClass('hidden');
});
});
</script>
</body>
</html>

Your hidden class should come back but is not due to data-dismiss. Remove data-dismiss from your closing button and attach a click event to it which will give back the hidden class on click. Here's the working code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Show Alert</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="row">
<div class="alert alert-success hidden" id="success-alert">
<button type="button" class="close">x</button>
<span class="glyphicon glyphicon-ok"></span> Hello
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-default">Open
Alert</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('#success-alert').removeClass('hidden');
});
$("button.close").click(function() {
$('#success-alert').addClass('hidden');
});
});
</script>
</body>
</html>

This is because
Data-dismiss completely removes the element. Remove this attribute and bind the click event on close button, You can hide the alert using this event.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Show Alert</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="row">
<div class="alert alert-success hidden" id="success-alert">
<button type="button" class="close" >x</button>
<span class="glyphicon glyphicon-ok"></span> Hello
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-default">Open
Alert</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('#success-alert').removeClass('hidden');
});
$(".close").click(function() {
$("#success-alert").addClass('hidden');
});
});
</script>
</body>
</html>

Related

Modal Bootstrap with application Spring boot (JAVA)

I'm a beginner and I'm trying to add a Javascript event to the delete button so that a modal appears for application with Spring Boot Java.
I'm not sure if my bootstrap connection is done correctly.
I have a LayoutDefault where I call the other layers. In LayoutDefault I'm adding the links for bootstrap connection.
Can anyone help me trigger the event?
modal's html:
<!DOCTYPE html>
<html xmlns="http://wwww.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div class="modal" id ="confirmationExclusion" tabindex="-1" data-backdrop="static">
<div class="modal-dialog">
<form action="/title" method="post">
<input type="hidden" name="_method" value="DELETE"/>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">You have sure?</h5>
<button type="button" class="close-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
<button type="button" class="btn btn-primary">delete</button>
</div>
</div>
</form>
</div>
</div>
</html>
button to activate modal:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{LayoutDefault}"
>
<head>
<meta charset="UTF-8">
<title>Pesquisa</title>
</head>
<body>
<section layout:fragment="content">
....
<button type="button" data-toggle="modal" data-target="#deleteModal" th:attr="data-codigo=${titulo.codigo}, data-descricao=${title.describle}"
class="btn btn-link" title="Delete">
<i class="material-icons">delete</i>
</button>
<script src="/js/cob.js"></script>
....
</section
</body>
</html>
my file js for trigger the event cob.js
$('#deleteModal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var codTitle = button.data('cod');
var describleTitle = button.data('describle');
var modal = $(this);
var form = modal.find('form');
var action = form.data('url-base');
if(!action.endsWith('/')){
action += '/';
}
form.attr('action', action + codTitle);
modal.find('.modal-body span').html('Are you sure you want to delete the record <strong>'+describleTitle+'<strong>');
});
LayoutDefault:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header th:replace = "Header"></header>
<section layout:fragment="content">
<p> Main content </p>
</section>
<!--
not found
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
-->
</body>
</html>
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
there is a path problem in the src of the javascript change to
<script th:src="#{/js/popper.min.js}"></script>
<script th:src="#{/js/jquery-3.6.0.min.js}"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>

script function will not open modal

I have an input type="CheckBox" with an onclick function to launch a modal if the checkbox is clicked. But it will not launch the modal?
I inserted an alert(id); under the if statement & it did alert "chkfb", so I know the result is "TRUE", but the $('#Searchfb').modal(); will not work.
Added the scripts at the bottom of
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<script type="text/javascript">
function myCheckBoxFunction(id) {
var checkBox = document.getElementById(id);
if (checkBox.checked == true) {
$('#SearchFb').modal();
} else {}
}
</script>
<input id="chkFb" type="checkbox" onclick="myCheckBoxFunction(this.id);" />
<label for="chkFb">&nbspFb Services</label>
<!-- Modal -->
<div class="modal fade" id="Searchfb" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data- dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/
umd/popper.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
https://getbootstrap.com/docs/4.0/components/modal/#modalshow
$('#Searchfb').modal('show');
The problem is you id name
<div class="modal fade" id="Searchfb" role="dialog">
Remember, the id name must be the same in you script
$('#SearchFb').modal('show');
So just need change for fb or Fb in the html or the js code. Happy code!

How To get the Previous selected State of an Element?

function changecolor(event) {
document.querySelector(".selected").classList.remove("selected");
event.classList.add("selected");
}
.btn-default.selected {
background: #2f9734;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class=" btn btn-default selected" data-spid="2bhk" onclick="changecolor(this)">Default 1</div>
<div class="btn btn-default" data-spid="3bhk" onclick="changecolor(this)">Default 2</div>
<div class="btn btn-default" data-spid="4bhk" onclick="changecolor(this)">Default 3</div>
<div class="btn btn-default" data-spid="5bhk" onclick="changecolor(this)">Default 4</div>
<div class="btn btn-default" data-spid="6bhk" onclick="changecolor(this)">Default 5</div>
</div>
</body>
</html>
This Code is a Prototype.
I can't change the changecolor function and Also, the new HTML change can be done via JavaScript. Now how can I get the previous selected state. Actually I want the previous selected button's data-spid.
function changecolor(event)
{
document.querySelector(".selected").classList.remove("selected");
event.classList.add("selected");
}
var spids = ['2bhk'];
$(document).ready(function() {
$(".btn").click(function(element) {
spids.push($(".selected").attr('data-spid'));
if(spids.length-2>=0){
console.log('previously selected: ' + spids[spids.length - 2]);
}
});
});
.btn-default.selected
{
background:#2f9734;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class=" btn btn-default selected" data-spid="2bhk" onclick="changecolor(this)">Default 1</div>
<div class="btn btn-default" data-spid="3bhk" onclick="changecolor(this)">Default 2</div>
<div class="btn btn-default" data-spid="4bhk" onclick="changecolor(this)">Default 3</div>
<div class="btn btn-default" data-spid="5bhk" onclick="changecolor(this)">Default 4</div>
<div class="btn btn-default" data-spid="6bhk" onclick="changecolor(this)">Default 5</div>
</div>
</body>
</html>
You can just instantiate a variable with initial value as '2bhk' and then update it whenever changeColor() is called.
var previousSpid="2bhk";
function changecolor(event){
document.querySelector(".selected").classList.remove("selected");
event.classList.add("selected");
previousSpid = $(".selected").attr('data-spid')
}

Using Collapsibles in bootstrap

I have two buttons that reveal two different elements. When I click the first button FIRST is shown. When I click the second button SECOND is shown but FIRST is also visible. What I want to happen is when the second button is clicked FIRST should get hidden and SECOND should be shown.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">Simple collapsible</button>
<div id="first" class="collapse">
FIRST
</div>
<br>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">Simple collapsible</button>
<div id="second" class="collapse">
SECOND
</div>
</div>
</body>
</html>
An in class gets added when target gets collapsed. So just add a click event to your button and use removeClass on .collapse elements and remove the class called in. That will do the trick.
$('button').on('click',function(){
$('.collapse').removeClass('in');
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">Simple collapsible</button>
<div id="first" class="collapse">
FIRST
</div>
<br>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">Simple collapsible</button>
<div id="second" class="collapse">
SECOND
</div>
</div>
</body>
</html>
In JQuery use this
$('class1').click(function () {
$('yourDropDowmID').hide();
}
This should hide your previously opened collapsible and to do it for the other class just repeat this but add the corresponding class or id names
Hope this helped :)

bootstrap modal.js last complete button missing

I'm just trying to learn modal.js I'm expecting that at the last page(data-step=3), I would see a finish button and when i click on that, it'll close the modal. But the problem here is, at the last page, only the cancel and previous button is visible. The next button is hidden, which is fine but i thought it would be replaced by the finish button. What am i missing here?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-o.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id='tab-shopping-cart' class="order-nav-tab" data-toggle="modal" data-target="#cartModal">
<div class="order-nav-shopping-cart">Click here</div>
</div>
<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel" aria-hidden="true">
<div class="modal-dialog modal-cart modal-dialog-cart">
<div class="modal-content modal-cart modal-content-cart">
<div class="modal-body modal-cart" style="overflow:scroll">
<div class="row hide cart-s1-common" data-step="1" id="modal-step-1">
<div class="row modal-header modal-header-cart" >
<div class="modal-shopping-cart"></div>
</div>
<div class="row cart-s1-title">
<div class="col-xs-5 txt-center">
ORDER
</div>
<div class="col-xs-2 txt-center">
PRICE
</div>
<div class="col-xs-2 txt-center">
QTY
</div>
<div class="col-xs-3 txt-center">
TOTAL
</div>
</div>
<br/>
</div>
<div class="row hide cart-s2-common" data-step="2">
<div class="row cart-s2-title">
<div class="col-xs-12 txt-center">
TIME REMAINING:<br/>
<label id="lblCountDown"></label>
</div>
</div>
<div class="row cart-s2-content">
<div class="col-xs-12 txt-center">
<div class="row">
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='10:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='11:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='12:00'/>
</div>
<div class="row">
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='13:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='14:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='15:00'/>
</div>
<div class="row">
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='16:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='17:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='18:00'/>
</div>
<div class="row">
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='19:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='20:00'/>
<input id='cart-s2-timepicker' type='button' class='cart-s2-timepicker' value='21:00'/>
</div>
</div>
</div>
</div>
<div class="row hide cart-s3-common" data-step="3">
This is the last step!!!
</div>
</div>
<div class="modal-footer modal-footer-cart">
<button type="button" class="btn btn-cart js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
<button type="button" class="btn btn-cart js-btn-step" data-orientation="previous"></button>
<button type="button" class="btn btn-cart btn-success js-btn-step" data-orientation="next"></button>
</div>
</div>
</div>
</div>
<script>
$('#cartModal').modalSteps({
btnCancelHtml: 'Quit',
btnPreviousHtml: 'Back',
btnNextHtml: 'Go',
btnLastStepHtml: 'Finish'
});
</script>
</body>
</html>
My suggestion is:
Order your includes in header - jquery, bootstrap css + other css files, bootstrap.js, respond.js then jquery-bootstrap-modal-steps.js (as I see from your code this one is missing) and your specific page scripts. It should look like this.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-o.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/jquery-bootstrap-modal-steps.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
You can use only $('#myModal').modalSteps(); and test if it works correctly then start adding Available options and callbacks.
for more info check this =>
http://www.jqueryscript.net/other/Create-Step-By-Step-Modal-with-jQuery-Bootstrap.html

Categories