Getting table data to Bootstrap Modal using Sinatra ERB templating - javascript

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.

Related

CRUD edit model data not showing in the table button

Guys I am stack for two days, I have two bootstrap models the first one is showing with outside button called submit, the other which the button is inside the table is not showing. Probably the problem could be the inclusion js library I am not sure and I don't have a lot of experience with that so i need your help below is my code! thanks in advance.
[![<div class="modal fade" id="editmodel" tabindex="-1" role="dialog" aria-labelledby="editmodell" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cdsViewformLabel">Informaçao do assunto</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 col-lg-12">
<label for="exampleFormControlInput1">ID</label>
<input type="email" class="form-control" id="idedit" placeholder="name#example.com">
</div>
<!-- removed some code to show the textfields just to save space-->
</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>
below my table data and button
?>
<tbody class="ttdody">
<tr>
<td><?php echo $row\['ID'\];?></td>
<td><?php echo $row\['valor'\];?></td>
<td>
<button class="btn btn-success btn-xs-view"><i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-xs-edit"><i class="fa fa-pencil"></i></button>
<button class="btn btn-danger btn-xs-delete"><i class="fa fa-trash-o "></i></button>
</td>
</tr>
</tbody>
<?php
below is my js to display the modal
<script>
$(document).ready(function () {
$('.btn-xs-edit').on('click', function () {
$('#editmodel').modal('show');
});
});
</script>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/jquery-ui-1.9.2.custom.min.js"></script>
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script class="include" type="text/javascript" src="lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="lib/jquery.scrollTo.min.js"></script>
<script src="lib/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="lib/common-scripts.js"></script>][1]][1]

How do I pass button value to modal popup view?

I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>

How to sent angular value (id) along with repeating data-target to run a function

I have got the following code.
Here I need to pass the angular js variable, which is the id of repeating list.
Here the button is the deactivate button and on-click a confirmation box is shown. On confirm click, a function needs to run with the passing id.
But I am not able to send id long with data-target & data-toggle
In the code, I need to sent {{key.id}} to the confirmation box
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </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" data-ng-click="deactivate(1)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>
Thanks in advance!
you need to set a variable for future use like
HTML
<tr data-ng-repeat="key in services">
<td>{{key.service}}</td>
<td class="text-center">
<button ng-click="selectedServiceId=key.id" type="button" data-person="Zim" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#Deactivate">Deactivate</button>
</td>
</tr>
<!-- Modal Deactivate Starts-->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Box</h4>
</div>
<div class="modal-body">
<p>Do you want to Deactivate (servicename) service? </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" data-ng-click="deactivate(selectedServiceId)" data-dismiss="modal">Deactivate</button>
</div>
</div>
</div>

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>

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?

Categories

Resources