There is modal window in my jsp. I use it for both: add or edit my items. It decides what to do depends on "id": add if "id" is null, edit - if not null.
<div class="modal fade" id="editRow">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="modalTitle"></h2>
</div>
<div class="modal-body">
<form class="form-horizontal" id="detailsForm">
<input type="hidden" id="id" name="id">
...
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<button class="btn btn-primary" type="button" onclick="save()">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
Generally it works fine, but there is one scenario which does not work:
I open "edit" windows for some item
Don't save it, just close "edit" window
Open "add" window, enter some data
After saving it edit item from 1), instead adding new one
There is button on this jsp, which I press to call "add" window:
<a class="btn btn-info" onclick="add('<spring:message code="meals.add"/>')">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
There is "add" js function from this button:
var form;
...
form = $('#detailsForm');
...
function add(title) {
$('#modalTitle').html(title);
form[0].reset();
$('#editRow').modal();
}
I thought form[0].reset(); should prevent such wrong scenario, but seems it does not help. Could you explain?
Seems that reset() doesn't nullify your form's id, instead it will clear form's input.
https://www.w3schools.com/jsref/met_form_reset.asp
Related
I have a very simple modal form that ultimately will be used to insert data into a SQL database. As I am new to this I am just trying to confirm that control is passing correctly, however the below code does not seem to be working.
Here is my HTML code:
<div class="modal" id="new-role-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Role</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div>
<form method="post" id="new-role">
<input type="text" class="form-control" id="role-title" placeholder="Role Title" name="role-title">
<div class="modal-actions">
<div>
<button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>
<button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My jquery code is:
$("#new-role").submit(function(e){
e.preventDefault(e);
alert('submit intercepted');
});
Once I can get the alert displaying I will ultimately replace this with validation and the relevant code to add the data, but right now I can't even get the alert to display. Where have I gone wrong?
Change
<button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>
to
<button type="submit" class="btn-link modal-action" id="add-role" value="add-role"><strong>Continue</strong></button>
Your script will work.
Problem: Your submit button has attribute data-dismiss="modal" that make the modal close without run your script.
I'm trying to send data from my index page to a modal.
Here's my code.
Modal
<div class="modal modal-1 fade bd-example-modal-lg " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title subtitles" id="exampleModalLongTitle">¿Cómo funciona?</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="demo">
<!-- Here's where I want to get data -->
<input data-id="sum">
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal"></button> -->
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModalCenter2" >Siguiente</button>
</div>
</div>
</div>
</div>
First, my button to show my modal
<button type="button" data-toggle="modal" data-target="#exampleModalCenter" > Cotizar préstamo </button>
Input data that I want to send to my modal
<input class="c-slider__loan-sum" id="sum" name="loan_sum" type="hidden" value="NaN">
<input class="c-slider__loan-period" name="loan_period" type="hidden" value="20">
And I've been trying with this jQuery
$('#exampleModalCenter').on('click','shown.bs.modal', function () {
let a = $(this).data('id');
$(".modal-body #sum").val( a );
$('#myInput').trigger('focus');
})
If someone could help me, I'll be so grateful
I believe your argument list for .on() is incorrect. If you want to specify multiple events to trigger the handler you separate them with a comma: .on('click, shown.bs.modal', func...).
However, I think you need to remove shown.bs.modal all together, as that event is triggered after the modal has rendered.
Another issue you may have is that you're not actually getting the values from your hidden inputs in your handler. You're just, seemingly, trying to get the id of the button that's being clicked and setting that as the value on some non-existent input in your modal. If you are trying to get the id of the button (for some reason I can't see) then you can get it like this const id = $('#buttonId').attr('id');. What you're doing is trying to get the value from a data attribute that doesn't exist on the button element: ...').data('id');.
Check out this simple example to see how you may want to handle this: https://codepen.io/dustinoverby/pen/NExXMb?editors=1010
I have a button which triggers a function from the JS for removing an entity:
<div type="button" class="transparentButton" ng-click="Remove(data)" title="Delete"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
I wanted to change it the way that it, at first, asks for a confirmation and then proceeds with the delete, so made the following change when clicking the button:
<div type="button" class="transparentButton" title="Delete" data-toggle="modal" data-target="#Confirm"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
And enabled some Modal in order to ask for confirm:
<div class="modal fade" id="Confirm" tabindex="-5" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" style="display: none;top:70px">
<div class="modal-dialog">
<div class="container">
<form class="form-signin">
<h4 class="delete-title">Sure you want to Delete?</h4>
<br>
<div class="yesnolink">
<a class="button1" ng-click="Remove(data)" style="float:left;margin-left:80px;">Delete</a>
<a class="button1" data-dismiss="modal" style="margin-right:100px;">Cancel</a>
</div>
</form>
</div>
</div>
</div>
Fun starts from here, the function triggered correctly when I use the initial button, but no action when I try to call it from modal. Any idea what am I missing?
I am trying to achieve the following:
When the page loads, the focus goes to the first element in the form.
When the button is pressed on form, a modal appears to confirm and the focus should be on the "Proceed" button inside modal dialog.
I managed to to make the first one work, but for the second I have no idea why it is not working. Following is my code.
HTML
<form method="post" {% if action %} action="{{ action }}" {% endif %} role="form" enctype="multipart/form-data">
<!-- Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body">
{{ confirm | default: "Would you like to proceed?" }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="submit-main-form" class="btn btn-primary">
<i class="fa fa-save"></i> {{ submit_text | default: "Proceed" }}
</button>
</div>
</div>
</div>
</div>
</form>
Script
/* Sets focus on the first element of the form */
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
$("#confirmationModal").on('show.bs.modal', function(event) {
// not setting focus to submit button
$("#submit-main-form").focus();
});
});
You are using show.bs.modal which Occurs when the modal is about to be shown
I believe you need shown.bs.modal event which Occurs when the modal is fully shown along when all the CSS transitions are completed.
See Bootstrap modal reference.
So I recently had to make a change to CSS that made a view that holds a backbone Modal position: fixed;. This of course caused the problem of the modal appearing behind the backdrop as this SO outlines.
Now I can't necessarily change the CSS without messing up the app, so I opted to go the route of when the user clicks the modal button to append the modal to the body:
events:
"click .share": "adjustModal"
adjustModal: ->
$('#shareAccessModal').appendTo("body")
This works great. However, I now seem to no longer be hitting events triggered from the modal.
Previously this worked great:
events:
"keyup [type='text']#sharedAccess": "updateEmail"
updateEmail: (e) ->
if e.keyCode == 13 && e.currentTarget.value != ""
$('p').remove()
if #model.get('email')
#email = #model.get('email') + "|" + e.currentTarget.value
else
#email = e.currentTarget.value
array = #email.split("|")
for email, i in array
$('.emails').append('<p>' + email + ' <button type="button" class="close" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p>')
e.currentTarget.value = ""
But now updateEmail never seems to be getting called.
Here's my template:
<div class="container">
<a id="back" href="#">
<i class="fa fa-chevron-left"></i></span>
</a>
<div class="message"><%= #title %></div>
<div class="btn btn-inline pull-right continue">Continue</div>
<div class="btn btn-inline pull-right share" data-toggle="modal" data-target="#shareAccessModal"><i class="fa fa-share"></i> Share Access</div>
</div>
<div class="modal fade" id="shareAccessModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Grant Access</h4>
</div>
<div class="modal-body">
<input type="text" id="sharedAccess" class="shared-access" placeholder="Enter email addresses of users allowed to edit/view">
<div class="emails">
<h3>Users with access:</h3>
<% for email, i in #email.split("|"): %>
<p><%= email %> <button type="button" class="close" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p>
<% end %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
Any idea how I should change my code so that I can still act on events triggered from the view? Namely pressing enter in the text field.