Develop Reference

I can't call a jquery event after changing a html element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm trying to change my modal through a link click event after I already changed its html, but unfortunately it's not working, I'm just a new student, so I'd like to know why this isn't working...
OBS: I'm Brazilian, so some parts of the code will be in Portuguese.
HTML CODE
<div id="modais" class="mt-5 row">
<div class="modal fade text-dark mx-auto" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Faça login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<form class=" mx-auto col-10 border rounded py-3 px-4">
<div class="form-group row">
<label for="loginEmail">E-mail de login</label>
<input class="form-control " type="email" name="loginEmail" id="loginEmail" />
</div>
<div class="form-group row">
<label for="loginSenha">Senha</label>
<!--HERE IS THE LINK ########## --><input class="form-control " type="password" name="loginSenha" id="loginSenha" />
</div>
<p class="small">Não tem uma conta? Cadastre-se clicando <a id="linkModal" href="#">aqui</a></p>
</form>
<p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Entrar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button>
</div>
</div>
</div>
</div>
</div>
JQUERY CODE
$(document).ready( function(){
var modal = "login";
$("#linkModal").click(function(){
if(modal == "login"){
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing up");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="cadastroEmail">E-mail para cadastro</label> <input class="form-control " type="email" name="cadastroEmail" id="cadastroEmail" /> </div> <div class="form-group row"> <label for="cadastroSenha">Senha</label> <input class="form-control " type="password" name="cadastroSenha" id="cadastroSenha" /> </div> <p class="small">Sing in clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div>');
$("#modais").fadeIn("fast");
modal = "cadastro";
}
else{
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing in");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="loginEmail">E-mail de login</label> <input class="form-control " type="email" name="loginEmail" id="loginEmail" /> </div> <div class="form-group row"> <label for="loginSenha">Senha</label> <input class="form-control " type="password" name="loginSenha" id="loginSenha" /> </div> <p class="small">Don\'t you have a account? Sing up clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Entrar</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button> </div> </div>');
$("#modais").fadeIn("fast");
modal = "login";
}
});
});

If you're saying that you click to change it once and then, it seems that the click event doesn't register to the #linkModal, it may be because you need to change
$("#linkModal").click(function(){
to
$(document).on("click","#linkModal",function(){
it's hard to tell what's going on here, because you don't have any elements with the ID "#linkModal" in the code that you shared.

Login & Register modal

I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?

You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!

I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>

How to display different Bootstrap Modal on toggling

I am working on Bootstrap Modal. I have two modals. The First Modal toggles/open the second modal dialog, when the user clicks on "Forgot Password" link. The second modal is the same as the first one except body.
What I want to do, on toggling from first modal to second one, the second modal will appear with different header and footer. Is it possible? How can I have this feature?
My code:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color: whitesmoke">
<button type="button" class="close" data-dismiss="modal">
<span title="close" class="glyphicon glyphicon-remove"></span>
</button>
<h2><span class="glyphicon glyphicon"></span> Login to our site</h2>
<p>Enter username and password to log on:</p>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>
<!--<div class="inner-addon right-addon">
</div>-->
<input type="password" class="form-control" id="password" placeholder="Enter password">
<i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Send us your email and we'll reset it for you!</p>
<input type="text" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
<!--End Body-->
<div class="modal-footer" style="background-color: whitesmoke">
<!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>-->
<p class="text-center">Not a member? Sign Up</p>
<p class="text-center">Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>

Here you go, I hope this code helps you:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
var showMessage = function (heading, message) {
$(".modal-body").empty();
$(".modal-title").empty();
$(".modal-title").html(heading);
$(".modal-body").html(message);
$('#messageBox').modal('show');
};
$("#popup1").click(function () {
showMessage("Heading 1", "Modal popup message 1");
});
$("#popup2").click(function () {
showMessage("Heading 2", "Modal popup message 2");
});
});
</script>
<input id="popup1" type="button" value="Show Popup" />
<input id="popup2" type="button" value="Show Another Popup" />
<div class="modal fade" id="messageBox" 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"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Output Popup 1:
Output Popup 2:
Just use that as an example and make the necessary changes to your code to make it work

Bootstrap Modal showing with Transparent Background

I am using bootstrap modal that i am showing on ajax success call.
I have 2 issues.
1) All the contents are showing and working but the form fields looks not focused as it happens in normal modal.
2) the regex not applying in the form field ?
Where is the issue?
javascript
$(document).ready(function() {
$.validator.addMethod(
"regx",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
$(function (){
//validation rules
$("#signup_form").validate({
rules: {
"name": {
required: true,
minlength: 5,
regx: /^[a-zA-Z]$/
},
submitHandler: function() {
$.post('form_process.php',
$('form#signup_form').serialize() ,
function(){
$("#myModal1").modal('show');
$('#myModal1').on('shown.bs.modal', function () {
$('#email').focus();
});
Html
<div class="container">
<div class="modal" id="myModal1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content"> <!--This should be preset-->
<div class="modal-header">
<!--
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Not Now</button>
-->
<!--<button type="button" class="close" data-dismiss="modal">×</button>
-->
<h3>Login to Website</h3>
</div>
<div class="modal-body" style="text-align:center;">
<div class="">
<div class="">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form method="post" action='' name="login_form">
<p>
<input type="text" name="eid" id="email" placeholder="Email">
</p>
<p>
<input type="password" name="passwd" placeholder="Password">
</p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="glyphicon glyphicon-remove"></span> Not now!
</div>
</div>
</div>
</div>
</div>

You've missed to add modal-content and wrap the modal-header and modal-body into it.. modal-content is the one which contains style background-color. Below would be your changes.
<div class="modal" id="myModal1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-content"> <!--This should be preset-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Login to Website</h3>
</div>
<div class="modal-body" style="text-align:center;">
<div class="row-fluid">
<div class="span10 offset1">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form method="post" action='' name="login_form">
<p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
</p>
<p>
<input type="password" class="span12" name="passwd" placeholder="Password">
</p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

bootstrap modal pop not popping up

I have the following code. I don't know why the modal pop up not popping up when clicking on the login button. I checked and confirmed that data-target and data-toggle are set correctly. Below is my code.
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Ritesh Sangwan">
<title>ossoc | Create account</title>
<link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!------ Navabar start --->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="./index.jsp">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#registerlogin" data-toggle="modal"><i class="glyphicon glyphicon-log-in"></i>Login</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---- navbar end--->
<div class="container marketing">
<div class="jumbotron-modified well">
<div class="container">
<form id="register" action="register" role="form" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">First name:</label>
<div class="col-sm-4">
<input id="fnameInput" name="registerfname" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last name:</label>
<div class="col-sm-4">
<input name="registerlname" type="text" class="form-control" id="lnameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input name="registeremail" class="form-control" id="emailInput" placeholder="someone#example.com" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="passwordInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm password:</label>
<div class="col-sm-4">
<input name="registerpassword" type="password" class="form-control" id="passwordConfirmInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<div id="acceptInput">
<input type="checkbox" />
I accept the terms and conditions.
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="submit" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="margin-right: 5px"></i>Create account</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="pull-right">Back to top</p>
<p>© 2013 Ritesh Sangwan. · Privacy · Terms</p>
</footer>
</div>
<!--- Model start-->
<div class="modal fade" id="registerlogin" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-log-in" style="margin-right: 5px"></i>Log in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---model end ---->
</body>
</html>

Try including jQuery before Bootstrap. Your bootstrap.min.js is before your jquery.
Bootstrap Modal doesn't show