Develop Reference

Open only one modal from different buttons

I am trying to get a report from my created tables. The thing is I have 3 different button to trigger 3 different modal right now. This approach works but I think it is unnecessary to create them seperately. I want only one modal with auto routed to related "Action". I think it will be solved with jquery but I can't seem to understand.
The buttons that triggers modals is below.
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
</div>
My modals are below.
<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
The only changing part is the modal's,
<form action="/Export/ExportGeneral" role="form" method="post">
Depending on the triggered modal it route to another action such as,
ExportGeneral
ExportWarranty
ExportVehicle
What I am asking is if there is a thing that help me to click the different buttons but open them in only one modal which's
<form action="/Export/ExportGeneral" role="form" method="post">
Change's automatically depending on, clicked button. (Maybe an id to buttons ?)
Thank you for your time!

In your anchor tag, you just need to replace your code with mine:
<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>
Now on the bottom of your page, add this jQuery code and everything will work fine.
<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
e.preventDefault();
var form = $("#multpurpose-form");
form.prop("action", $(this).data("url"));
});
Now I will explain what is happening in my code. All anchor tags are linked to a single modal. The action method of form in the linked modal is changing against "anchor tag data-url" through jQuery code.

change your html like
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>
<a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
<a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>
and give your form id so we can change thier attribute using javascript like
<form action="" id="modalForm" role="form" method="post">
then in script
function openModal(modalName){
if(modalName == 'GeneralModal'){
$("#modalForm").attr("action",'/Export/ExportGeneral');
$("#modalId").modal('show');
}
else if(modalName == 'VehicleModal'){
$("#modalForm").attr("action",'/Export/ExportVehicle');
$("#modalId").modal('show');
}
else if(modalName == 'WarrantylModal'){
$("#modalForm").attr("action",'/Export/ExportWarranty');
$("#modalId").modal('show');
}
}
i think it might solved your problem and optimized your code. :)

Keep modal displayed when I click submit

I want to create a sign in - signup form, using html <form> and bootstrap4 modal. Every thing is okay but when I click the submit button, the modal is dismissed, so the error of data validate format can not be show for clients. Now how can I keep the modal displayed when I click submit button?
<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>
<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs w-100" role="tablist">
<li class="nav-item w-50">
LOGIN
</li>
<li class="nav-item w-50">
SIGN UP
</li>
</ul>
</div>
<div class="tab-content" style="font-size: 14px;">
<div id="login" class="tab-pane active" style='height: 550px'>
<form method='post' action=''>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
<h6 class="text-center text-muted">Login to your account</h6>
<div class="error" id='signin_err'>{signin_err}</div>
<div class='section-input'>
<div class="mt-2">Email</div>
<input type="text" class="form-control w-100 my-2" name="" autofocus>
</div>
<div class='section-input'>
<div class="mt-2">Password</div>
<input type="text" class="form-control w-100 my-2" name="">
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
</div>
</form>
<div class="forgot text-center mb-3">forgot your password?</div>
</div>
<div id="register" class="tab-pane" style='height: auto'>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
<h6 class="text-center text-muted">Sign up now</h6>
<div class='error' id='signup_err'>{signup_err}</div>
<div class='section-input' style="margin-top: 70px">
<div class="mt-2" id='signUp_name'>Name</div>
<input type="text" class="form-control w-100 my-2" name="name" autofocus >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_mail'>Email</div>
<input type="text" class="form-control w-100 my-2" name="mail" id='mail' >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_psd'>Password</div>
<input type="text" class="form-control w-100 my-2" name="psd" >
</div>
<div class='section-input'>
<div class="mt-2" id='confirm_psd'>Confirm password</div>
<input type="text" class="form-control w-100 my-2" name="psd_cf" >
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
</div>
<div style='height:70px'></div>
</div>
</div>
</div>
</div>
</div>

I have no idea how your backend is being implemented, but based on your code, my guess is that your page is being refreshed every time you click submit because of the empty action. I see no other way that the modal will close.
You'll need to submit via AJAX if you want to display any validation without refreshing.

Bootstrap modal not working in safari / windows

This Bootstrap modal is not working in Safari but there is no issues in Chrome and Firefox.
I also have a javascript select. When I remove the javascript select the popup works in Safari but otherwise its not working.
<div class="modal fade" role="dialog" id="fav-popup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-fav-header">
<h2 class="txt-pop-head">Add category</h2>
<button class="close" data-dismiss="modal"><span class="fa fa-close"></span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-control" placeholder="">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<div class="select-box select-gray">
<label>Category</label>
<select class="form-control input-control wide custom">
<option value="">Product Category</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="btn-group-custom">
<input type="button" class="btn btn-draft" value="Cancel">
<input type="button" class="btn btn-next" value="Create">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-8 col-md-9">
<h2 class="txt-profile-head">Add Category</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="row-adj">
<div class="products-block">
<div class="category" style="background:#fff;">
<a href="#fav-popup" data-toggle="modal" data-target="#fav-popup"><button type="button" class="btn">+</button>
<h3>Create a Category</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<script src="js/SelectBox.js"></script>
<script>
$(function() {
$("select.custom").each(function() {
var sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200,
});
});
});
</script>

Modal in bootstrap JSF Java EE project

I want to show a bootstrap modal in my JSP login page when the password is wrong. Otherwise the user is redirected (through faces-config.xml) to another JSP page. The username and password are validated in a managedbean that calls a remote bean.
I tried this with JavaScript but cannot get the desired result. This is my JSP login:
<%-- BEGIN: Modal window --%>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
<%-- END : Modal window --%>
<br>
<div class="container-fluid">
<div class="row">
<div class="panel-heading" align="center" style="opacity: 0.5;">
<h2><b><font color="white">RedCine<small><font color="white">Administrativo</font></small></font></b></h2>
</div>
</div>
<div class="row">
<div class="panel-body col-md-4 col-sm-6 col-xs-12 col-md-offset-4 col-sm-offset-3 " align="center">
<div class="container-fluid" style="margin-top: 1%; margin-bottom: 40%;">
<div class="panel panel-success" align="left">
<div class="panel-heading form-group">
<b><font color="white">
Ingrese usuario y contraseña</font> </b>
</div>
<div class="panel-body" >
<h:form id="PersonaBean">
<div class="form-group">
<label for="username">Usuario</label>
<h:inputText value="#{persona.userName}" required="required" styleClass="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<h:inputSecret value="#{persona.password}" required="required" styleClass="form-control" />
</div>
<h:commandButton id="btn_entrar" value="Entrar" action="#{persona.login()}" styleClass="btn btn-large btn btn-success btn-lg btn-block" style="width: 100%; font-size:1.1em;"/>
</h:form>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer" align="center"><font style="color: #111">Copyright #2014 example.com, All Rights Reserved. </font></div>
</div>
</body>
<script>
$(document).ready(function(){
$('#btn_entrar').click(function(){
var resultado;
if(resultado = 0)
{
$("#myModal").modal("show");
}
});
});
</script>
</html>
How can I do that?

your variable "resultado" is not getting set to any value, set the "debugger" keyword above "if(resultado = 0)" and check for that value.

Bootstrap 3 modal not showing

I have 2 modals in a webpage. One of them is for registering a new user and the other is for logging in.
Here is there code
<div class="modal fade" id="register" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body" id="form">
<div id="form-error-register" class="form-error"></div><br>
<div class="input-group">
<span class="input-group-addon">Username: </span>
<input type="text" class="form-control" placeholder="2-20 characters" id="username-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Password: </span>
<input type="password" class="form-control" placeholder="At least 5 characters" id="password-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Confirm Password: </span>
<input type="password" class="form-control" placeholder="At least 5 characters" id="cpassword-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Email: </span>
<input type="text" class="form-control" placeholder="Must be a real email address" id="email-register">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="cancelRegister();">Cancel</button>
<button class="btn btn-success" onclick="registerButton();">Login</button>
</div>
</div>
</div>
<div class="modal fade" id="login" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Login</h4>
</div>
<div class="modal-body" id="form">
<div id="form-error-login" class="form-error"></div><br>
<div class="input-group">
<span class="input-group-addon">Username: </span>
<input type="text" class="form-control" placeholder="" id="username-login">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Password: </span>
<input type="password" class="form-control" placeholder="" id="password-login">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="cancelLogin();">Cancel</button>
<button class="btn btn-success" onclick="loginButton();">Login</button>
</div>
</div>
</div>
The register modal shows fine but the modal does not.
Here is the code to show the modals:
<li>Register</li>
<li>Login</li>
This could not be some css error because the register modal loads.
When I attempt to load the login modal (either via js in the console, or by the button) the webpage goes dark (as if a modal is showing) but the modal never shows.

The #login modal doesn't appear because it's inside the #register modal.
You should add another div close tag before the #login modal declaration.
The reason why the modal is not visible is that its parent, the #register modal, is hidden.