I have 3 different files the index.php, register.php and login.php. In the index.php there is an anchor that will show the modal with remote content from login.php which works perfectly, and in login.php there is an option that will change the content of the modal which load remotely from register.php but when I click it, it show's javascript error in the console.
console error : Uncaught TypeError: undefined is not a function bootstrap.js:868
I am using jquery 1.10.1 and bootstrap 3.1.1
index.php
<script src="common/js/jquery.js"></script>
<script src="common/bootstrap/js/bootstrap.js"></script>
<div class="account_link">
Sign In
</div>
<div id="dialog" class="modal fade" role="dialog" tabindex="-1" area- hidden="true" aria-labelledby="signin">
<div class="modal-dialog">
<div class="modal-content" style="width:320px">
</div>
</div>
</div>
login.php
<html>
<head></head>
<body>
<form name="signin" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="signin">Sign In</h4>
</div>
<div class="modal-body">
<div class="login_control clearfix">
<label>Email</label>
<input type="email" name="email" id="email" placeholder="Email" class="textfield"/>
</div>
<div class="login_control clearfix">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="Password" class="textfield"/>
</div>
<p><input type="checkbox"/><span>Remember me on this computer</span></p>
Not a member? Sign Up
Forgot Password
</div>
<div class="modal-footer">
<button type="submit" class="login_btn">Sign In</button>
</div>
</form>
</body>
</html>
register.php
<html>
<head></head>
<title>Create Account</title>
<body>
<form method="post" name="frm-signup">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="signin">Sign In</h4>
</div>
<div class="modal-body">
<div class="clearfix">
<label>Email</label>
<input type="email" class="textfield" name="reg_email" placeholder="Email"/>
</div>
<div class="clearfix">
<label>Password</label>
<input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
</div>
<div class="clearfix">
<label>Confirm Password</label>
<input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
</div>
</div>
<div class="modal-footer">
<div class="clearfix">
<button type="submit" name="sign-up">Create Account</button>
</div>
</div>
</form>
</body>
</html>
does anyone know how can I achieve this?
Thanks.
I don't think you can call a second modal from the first modal if the first is itself remote.
If you think about it, bootstrap's js will be looking through your DOM when the page is loaded. It will spot your modal anchor and it will attach an event.
However when that event fires, and the remote content is loaded (i.e. login.php is displayed), bootstrap won't go through the new DOM again looking for new modal anchors to which it can attach new events.
You might be better off doing this in your own JS, using the .modal() function in the bootstrap API, and attaching your events after login.php is displayed.
You've probably already read the relevant documentation but here is a link to it anyway, just in case!
Related
Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load();
I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button
For Reference you can check https://theinnovativepackaging.com/
And Modal is as follows
<div id="myDiscountModal" class="modal fade">
<div class="modal-dialog disc-modal">
<div class="modal-content">
<div class="modal-header disc-modal">
<div>
<h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
</div>
<button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-sm-6">
<img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
</div>
<div class="col-sm-6">
<p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
<form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-envelope disc-modal-form-field-icon"></span>
<input type="email" name="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-phone disc-modal-form-field-icon"></span>
<input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
</div>
</div>
<div id="discountMessage" style="display: none;"></div>
<button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
And Javascript Added is:
<script type="text/javascript">
$(window).on('load', function() {
$('#myDiscountModal').modal('show');
});
</script>
Anyone who can guide me what could be the possible conflict that its not working ?
There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.
Have a look at the below code:
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
Login
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
As, you can see..the modal is expected to pop when submit button is clicked in either form. But When I click the submit button in the Login form, nothing happens. I know I have made some mistakes because it was working properly a few hours back then I don't know what I did wrong and now my code is completely broken. The modal window is there to show a loading spinner. In the above code, you can see an anchor element in each Form with text Register and Login respectively. I don't know if it's necessary but I will explain what it does. I want to hide the Login form and show the registration form when Register link is clicked. The registration form also has a button in same manner which hides itself and brings the Login form in visual. The registration form also has a submit button which when clicked, fires the modal.
As I mentioned above, the modal is not popping when submit button from the Login form is clicked. But when I switch to registration form and click Submit there, it fires the modal. The more interesting thing is that when I switch back to the Login form and click submit there, it also shows the modal as expected. In short when the URL changes to myfile.php?#, everything works fine but when it is myfile.php or myfile.php?, I can't fire the Modal from Login form's submit button without switching the form for at least once.
Below code will launch modal window on button click. This is not the code that makes your logic to work but this will just pop up the modal window on button click.
Libraries used: jquery 2.1.1, Bootstrap 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Reference: https://v4-alpha.getbootstrap.com/components/modal/
Give some time to submit the form and to show modal
you are doing same thing at same time, First show the modal and then submit the form
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}
<!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">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>
I'm making a modal form that allows users to log in. As soon as I click on "Log In" the modal form appears and disappears.
Here is the button that calls the modal form. It is part of my navigation bar:
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
Modal Body:
<div class="modal fade" id="myModal" tableindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
This code works for me on jsBin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<div class="modal fade" id="myModal" tableindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
</body>
</html>
Sounds like you may be loading the JavaScript for Bootstrap Modal twice. Are you possibly loading bootstrap.js as well as bootstrap-modal.js? Or both bootstrap.js and bootstrap.min.js?
I want to display this modal popup after php condition check
<div id="myModal65" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
in this php code used for display the popup. But it cannot display.
<?php
if($intwschdle==1)
{
echo "<script type='text/javascript'>$('#myModal65').modal('show');</script>";
}
?>
I think it's much better if you show you modal by default and put it in the php condition like :
<?php
if($intwschdle==1){
?>
<!--full html for modal goes here showing by default - - >
<?php } ? >
I have a form insite a modal. When the size of the window is small then everything is fine. If I maximise the window then the elements of the form are floating outside of the modal. I have checked all my css styling etc, but nothing seems to conflict. I have also set this up on JSFiddle, and it seems to happen and there aswell, with just JQuery and Bootstrap. Its seems to be something on my code but I cant figure out what. Could you please take a look on it and help me out?
http://jsfiddle.net/dsryycbq/
<div id="editPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editPasswordlbl" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="editPasswordlbl">Change Password</h4>
</div>
<div class="modal-body">
<form action="{{url_for('admin')}}" role="form" id="editPasswordForm" method="post">
<input type="hidden" name="formType" value="changePassword">
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Repeat Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-default">Confirm</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You need to add the class .form-horizontal to the form element. This makes the .form-group's act as rows. Next to some margin, this adds a clearfix which stops the columns from "floating".