Develop Reference

Getting table data to Bootstrap Modal using Sinatra ERB templating

I have a simple table which, using ERB templating (i.e. <%= =>), displays a table of data.
Each row in the table has an edit button to edit the contents of the row. I am trying to make it such that when I click on the edit button, a Bootstrap Modal will pop up with the contents of the row in <textarea> tags but whenever I do this, it only always displays the contents of the first row.
Here is the table in the ERB file
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<% $snippety.each do |snippet| %>
<tr>
<td align="center">
<a class="btn btn-default" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#basicModal3" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-trash"></em></a>
</td>
<td><%=snippet["question"]%></td>
<td><%=snippet["answer"]%></td>
<td>
<form onsubmit="return confirm('Are you sure you want to delete the Snippet?')" action='/api/v1/snippets/delete/<%= snippet["id"] %>' method="post">
<input type="submit" value="Delete" class="delete"> | <a id="button" shape="circle" color="black" href='/api/v1/snippets/edit/<%= snippet["id"] %>'>Edit</a>
</form>
</td>
</tr>
<!-- DELETE MODAL -->
<div class="modal fade" id="basicModal3">
<div class="modal-dialog" role="dialog">
<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>
</div>
<div class="modal-body">
<p style="text-align:center">WARNING</p>
<p style="text-align:center">This will delete the Snippet forever and cannot be recovered</p>
</div>
<div class="modal-footer">
<form action="/api/v1/snippets/delete/<%= snippet["id"] %>" method="POST">
<button type="submit" class="btn btn-primary">Delete</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- EDIT MODAL -->
<div class="modal fade" id="basicModal4" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Snippet</h4>
</div>
<form action="/api/v1/snippets/edited/" method="POST">
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label for="comment">Question</label>
<textarea class="form-control" rows="5" id="comment" name="question"><%=snippet["question"]%></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="comment">Answer</label>
<textarea class="form-control" rows="5" id="comment" name="answer"><%=snippet["answer"]%></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Snippet</button>
</div>
</form>
</div>
</div>
</div>
<%end%>
</tbody>
</table>
I know I can open a new page with the table data to be edited via a Sinatra controller but I don't want to have to do that.

How to load a Modal with JQuery (.load) into in it at the same time once button is pressed?

In this scenario I would like to preserve bandwidth by when a modal opens then it loads the import_audit_table into a Div in the Modal. Is this possible?
<script>
$(document).ready(function(){
$('#import_audit_div1').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</script>
<input type="button" class="btn btn-default" value="Modal Opener" id="import_audit_div1" data-toggle='modal' data-target='#import_audit_div'/>
<div class="modal" id="import_audit_div" role="dialog">
<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">Title</h4>
</div>
<div class="modal-body">
<h3>
<div id="import_audit_table">
</div></h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</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>

Why doesn't my submit button work?

The form is available when the user clicks a modal. When I click the submit button in the modal, it button does not work.
foreach ($posts as $post) { echo '
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
</tr>
</tbody>
';
}
Here is the modal:
echo '
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">'; echo '
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype=\ "multipart/form-data\">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>' ;

You need to check if the submit button has been passed then run the code. This will ensure that you won't get an undefined index error.
if (isset($_POST['submit'])) {
// Your code here.
}
Also use form (<form></form>) tags to specify POST request in method="post".

Errors
Wrong placement of <form> open and close
Miss-Match Character in enctype=\ "multipart/form-data\", (\).
So Final Well-Form Code is
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
**
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">**
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Note: You are not uploading any Files in your form. So No use of enctype

Don't use echo with single quote: that's what's making your headache. Create code like this:
<div id="<?php echo $id_user ?>" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/<?php echo $id_user ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
and this other code:
<?php
foreach ($posts as $post): ?>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
<?php endforeach; ?>
Also read What is the difference between single-quoted and double-quoted strings in PHP?