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 :)
Related
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>
so I was trying to show modal on a new window until now I use
$('#myModal').modal('show');
which show it as a customize window , but I want to open a new browser window and print the modal inside it.
I want to do this because if I just use modal('show'); and my parent page refreshes in the background, (I am using window.location.reload(true); to refresh the parent page, that's why it closes the modal, I couldn't find how to refresh the whole parent page using ajax) it will close the modal window and I don't want this.
Is there any function that I can use to open the modal on a new window?
i have created 2 file;
file 1 has this code,
<!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">
<button type="button" class="btn btn-info btn-lg" onclick="window.open('file:///C:/Users/Admin/Desktop/a.html'); ">Open Modal</button>
</div>
</body>
</html>
and 2nd file has this code
<!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="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<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>
</div>
<script type="text/javascript">
$("#myModal").modal();
</script>
</body>
</html>
for this is working, try this.
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')
}
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>
$(window).load(function(){
$('.alertbox').click(function(){
alert('You Clicked on Click Here Button');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<div>
<a class="alertbox" href="#clicked"> Click Here</a>
</div>
I want the alert to be displayed in the bootstrap Modal.
Create the error div in modal body. and set error
$(document).ready(function(){
$('#alertbox').click(function(){
$("#error").html("You Clicked on Click here Button");
$('#myModal').modal("show");
});
});
<!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.2.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">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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 id="error"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Probably I didn't understood your question correctly, but you can't use the alert function to display a message insidea a page element. Alert displays a system alert outside the page dom.
If you want to display a message inside a modal you have to include (or inject) the modal markup in your page html, then you simply show/hide the modal via bootstrap functions.
You have a very good example here