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>
Related
I have a cshtml page with this code:
<form action='#Url.Action("ExportExcel", "Records")' method="post" target="_blank" onsubmit="return exportExcel(), true">
<input type="hidden" name="filteredRecordsIds" id="filteredRecordsIds" value="" />
<input id="btnExportExcel" type="submit" hidden="hidden" />
</form>
in js the exportExcel function:
function exportExcel() {
$('#filteredRecordsIds').val(filteredRecords.map(function (record) { return record.Id }));
return true;
}
in controller Records:
public ActionResult ExportExcel(string filteredRecordsIds)
{...}
I would like to add modal/popup, before the submitting that ask the user:
"Would you like to export with calculations?" with 2 buttons options: "Yes" or "No".
Depending on the user's response, I would like to send the answer to the controller (as second parameter).
How can I add that?
Thank You!
You can try to remove onsubmit,and use a button to open modal,then calling exportExcel when clicking Yes button:
<form action='#Url.Action("ExportExcel", "Records")' method="post" target="_blank" id="myForm">
<input type="hidden" name="filteredRecordsIds" id="filteredRecordsIds" value="" />
<input id="btnExportExcel" type="button" value="submit" data-toggle="modal" data-target="#exampleModalLong"/>
</form>
<!-- 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">
Would you like to export with calculations?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="exportExcel()">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
js(submit the form in exportExcel):
function exportExcel() {
$('#filteredRecordsIds').val(filteredRecords.map(function (record) { return record.Id }));
$("#myForm").submit();
}
Let's say I have the following form:
<form id="evidence-formset" action="{% url 'interpret-criteria' %}" method="post">
<div class="form-group row">
<!-- Some content here -->
<div class="col-auto">
<input type="submit" class="btn btn-primary" value="Calculate" />
<input type="reset" class="btn btn-secondary" value="Reset" />
<input type="submit" class="btn btn-dark" value="Register" onclick="validateRegister()" formaction='https://www.wikipedia.org/'/>
<input type="submit" class="btn btn-link" value="Export results as Excel" formaction="{% url 'export-interpretation' %}" />
</div>
</div>
<form>
And the following JS function (WIP):
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#registerSubmit").submit()
}
And this basic modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Register changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So basically what I want is that when I click the Register button a modal shows, asking for confirmation. If I click again on 'Register' then the input will submit and the webpage should redirect to wikipedia (this is just an example). If I click Close, no form should be submitted and the modal will disappear.
I checked all the previous StackOverflow questions and I couldn't find an answer that worked for me. The closest solution I found is this but it doesn't work.
UPDATE WITH A SOLUTION:
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#myModal").on("click",".btn-primary", function(){
$('#evidence-formset').attr('action', 'https://www.wikipedia.org/').submit();
});
}
remove onclick and add this
$("#evidence-formset").on("submit",function(e) {
e.preventDefault();
$("#myModal").modal();
})
Add ok/cancel to the buttons of the modal
$("#myModal").on("click",".btn-primary", function(){
$("#evidence-formset").submit(); // you can add if (validate(....) in front if you have any validation
});
$("#myModal").on("click",".btn-secondary", function(){
$("#myModal").modal('toggle');
});
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.
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>
I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.
Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>