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>
Related
I'm a beginner programmer in jQuery and I do not understand why this feature can not perform the second time. The first time the button content changes, after two seconds it returns to the previous state and the second time I can not do the same thing. Please help! Regards
$(document).ready(function() {
$('#registerButtonM').on('click', function() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
}, 2000);
}
});
});
EDIT:
html:
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Change your #footerButtonsM HTML to
<div class="modal-footer" id="footerButtonsM">
<i class="fa fa-spin fa-circle-o-notch" style='display:none'></i>
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
and your jquery code to:
$(document).ready(function() {
var btnWrapper = $('#footerButtonsM');
var loading = $('#footerButtonsM .fa-circle-o-notch');
$('#registerButtonM').on('click', function() {
var btn = $(this);
btn.hide();
loading.show();
if ($('#passRegisterM').val().length <= 8) {
setTimeout(function(){
loading.hide();
btn.show();
}, 2000)
}
});
});
The result will be the same, but the approach is better.
To setup late binding, change
$('#registerButtonM').on('click', function() {
To this:
$(document).on('click', '#registerButtonM', function() {
Since you have remove the html button from the DOM the onclick handler is autmotically garbaged (this makes sense since the element present does not exist).
An alternative is to declare and function named clicker.. When you remove and insert the html simply add the function clicker to the new button
See snippet below
function clicker() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
$("#registerButtonM").on('click', clicker)
}, 2000);
}
}
$(document).ready(function() {
$('#registerButtonM').on('click', clicker);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
The reason this doesn't work is that you're removing the button on click of the button. This causes it to not be bound any more.
When you do: $('#footerButtonsM').html(''); this removes the button from the dom object and you lose the early binding that you've setup.
Then you put another button back on the page when you do $('#footerButtonsM').html(btn);
Since this is a completely new button it is no longer bound by the click handler that you have setup.
You have a couple options to fix this issue. You can either rebind or a new click handler either early or late binding to the new button.
A quick fix is to change it to late bind by changing :
$('#registerButtonM').on('click', function() {
to be:
$(document).on('click', '#registerButtonM', function() {
Here is a fiddle of this working
This is what I want to do: When the dropdown item is clicked I want to add a new div with an input inside of it and name it based on the clicked item. I'm a complete newbie to javascript. Can someone give me ideas on how to do this?
Here's a sample picture. Example when I click an item in dropdown menu it will add another div with input type inside of it. Like the Major Exam.
Here's my code.
<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Criteria for grading</h4>
</div>
<div class="modal-body edit-content">
<form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"> Add Criteria <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Assignment</li>
<li>Attendance</li>
<li>Laboratory</li>
<li>Activity</li>
<li>Recitation</li>
</ul>
</div>
<br>
<div class="well">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well">
<label for="majore">Quizzes</label>
You question is tagged jQuery, so I will use it.
$(".dropdown-menu li").on("click", function(){
var name = $(this).find("a").text();
var newDiv = $(".well").first().clone();
$(newDiv).find("label").text(name);
newDiv.insertAfter(".well").last();
});
I would think you'd want to add the name of the dropdown li clicked to the new form, but you didn't include that in your question.
I dont understand a problem. I copy/pasted this code form manual for bootstrap...
form {
padding: .5em 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<button type="button" class="btn btn-default">Dropdown <span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Check me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div>
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
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>
I used JHipster to create my project and it has been pretty smooth sailing of late. However, I ran into an issue with editing objects on my main.html. I am able to successfully edit the post when I'm on the posts.html page that the router points to, but I am unable to do it with the exact same code on my main.html. I am able to call the information from the postController on my main page, and it is displayed adequately. I am, however, unable to make my data appear inside the modal popup. I know the information is being received by the controller because my console.log($scope.post) returns the object that I want to edit. However, that information is not transmitted to my modal. Any help appreciated.
Button that calls edit:
//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
Actual Modal Code:
<div ng-controller="postController">
<textarea class="form-control" rows="3" placeholder="Status update here..." data-toggle="modal" data-target="#savePostModal" ng-click="clear()"></textarea>
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="create()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Update function
$scope.update = function (id) {
$scope.post = Post.get({id: id});
$('#savePostModal').modal('show');
};
I know it's successfully calling this get function, but the data from the $scope.post isn't being used.
As it turns out, in order for a modal to work, it has to be in the same controller-div as the text that prints the button. I'm pretty sure this is because the scope on controllers is different if the div is different. Also, don't have a second modal with the same name for testing because it will inevitably fail because of the functions confusion over which one to use.
<div id="toBeUpdated" ng-controller="postController">
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
<li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
<div class="well ng-scope">
<div name="desktopPost" class="h4">
<input type="checkbox" name="checkered"> {{post.name}} <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<div style="display: none" name="mobilePost" class="h4">
<div ng-click="postNameAlert(post.name);">
<div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
</div>
<input type="checkbox" name="checkered">
<span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<p>
<div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
</p>
<br> {{post.author}} on {{post.date_Written}}
<br>
<div name="desktopSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div style="display:none;" name="mobileSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
<div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
<button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
<span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
</button>
<div class="well ng-scope">
<h4>
{{new_post.name}}
<div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
<span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
</h4>
<div id="{{new_post.id}}" style="display:none;">
{{new_post.text}}
<br> {{new_post.author}}
on {{new_post.date_Written}}
<br>
</div>
</div>
</div>
</div>
</div>
</li>
<center ng-if="checkForPosts()">
<button class="btn btn-default" ng-click="incrementLimit()">
<span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
</button>
</center>
</div>