How To get the Previous selected State of an Element? - javascript

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')
}

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>

how to call bootstrap5 modals using vanilla javascript?

there is a button
<button onclick="showModal('#Url.Action("EditUserProfile","Profile",null,Context.Request.Scheme)','ویرایش پروفایل کاربر');"
class="btn btn-warning w-100 mb-3">
ویرایش اطلاعات
</button>
there is a modal
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modal-body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
when I click the button I want show modal only using vanilla JavaScript
async function showModal(url, title) {
let modalEl = document.querySelector('#modal');
let bsModal = Bootstrap.Modal.getInstance(modalEl);
let modalTitle = document.querySelector('#modal-title');
let modalBody = document.querySelector('#modal-body');
let requestPage = await fetch(url);
let requestPageResponse = await requestPage.text();
modalTitle.innerHTML = title;
modalBody.innerHTML = requestPageResponse;
bsModal.show();
}
when I try this I get this error
Uncaught (in promise) ReferenceError: Bootstrap is not defined
at showModal
<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="https://kit.fontawesome.com/0842d2bf89.js" crossorigin="anonymous"></script>
<link href="~/Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main-wraper">
<vc:top-nav></vc:top-nav>
<div class="main-content">
#RenderBody()
</div>
<vc:footer></vc:footer>
</div>
<script src="~/Bootstrap/bootstrap.min.js"></script>
<script src="~/js/navbar.js"></script>
#RenderSection("scripts", false)
</body>
</html>
You need to make sure the twitter-bootstrap script is above your showModal() function
Something like:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- This script must be above -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- This script must be below your boostrap script -->
<script src="YOUR SHOW MODAL ASYNC FILE PATH"></script>
</body>
</html>
In your showModal function
Change this line
let bsModal = Bootstrap.Modal.getInstance(modalEl);
to this
let bsModal = new boostrap.Modal(modalEl)
See docs

How to show a modal on a new window using jQuery

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.

display alert after button is clicked

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>

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 :)

Categories