I'm working on a spring boot project,
I want to pass a simple id to my modal, the modal is just for ask to the user if He confirm the item deletion, if he confirm i want to send to my controller class /profil/{id}
but i don't understand how to pass my object id to the modal, it's my first spring boot project, I have no bases in JS...
my html code :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Rendre disponible
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rendre disponible</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Voulez vous rendre ce topo à son propriétaire ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>
</div>
Thanks for your help !
you can use th:data to pass parameters to modal.
<button type="button" class="btn btn-primary"
th:data-yourid="id_you_want_to_pass" data-toggle="modal"
data-target="#exampleModal">Rendre disponible</button>
And you can get this value using javascript. The following will be triggered as soon as modal is about to show.
$('#exampleModal).on('show.bs.modal', function(e) {
var id= $(e.relatedTarget).data('yourid);
//do whatever you want to do with this id
});
Related
I have modal to submit comment entered by the user. But when the user enters submit button, the form-backing-object reaches the post end point but the field entered using the modal is empty.
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Comment for approval</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
<input th:type="hidden" th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"/>
</div>
</div>
</div>
</div>
The place where modal is called is
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
The flow is: after the form is complete, the user clicks "Approve" button, which triggers the modal, the user then enters the comment and presses "Approve" (from the modal) and the form is submitted.
Could someone PLEASE suggest what is wrong here as I am not receiving just the processApproveComment (which is set using the modal) when other properties from the parent form are available.
The post endpoint is :
#PostMapping("/release/process")
public String releaseProcess(Principal principal,
Model model,
#ModelAttribute("answeredQuestionnaire") AnsweredQuestionnaire answeredQuestionnaire){
// answeredQuestionnaire does not have processApproveComment, but all others are available.
}
Update:
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
</form>
</div>
Because button tag not in form tag
Move button tag to form tag
My code is like this.
#if (Session::has('message'))
<script>
$(document).ready(function () {
$("#mailModal").modal('show');
});
</script>
<div class="modal fade" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index:10000000;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
{{ Session::get('message') }}
</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>
#endif
Mail is sending successfully and also message is generating successfully but modal is not showing on page load. What is the problem in my code?
I am trying to insert a modal into a html page. I took the example from bootstrap page:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- 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">
...
</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>
It's not working(nothing pops up). I also use thymeleaf in my project and i think there is the problem but i don't know what it is. Thanks.
$.ajax({
type : 'POST',
data : "",
url : '<?php echo site_url("adduser/register_user");?>',
success : function(data){
$('#error').modal('show');
}
});
the codes above is my code to show a modal but it didn't work. Is it possible to show a modal using ajax?
It seems you use Bootstrap right?
If you read the documentation there is a better way to achieve the same result:
In your main file:
<a data-toggle="modal" href="<?php echo site_url('adduser/register_user');?>" data-target="#myModal">Click me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
And then in the remote file:
<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">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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
This will show the default modal. More information in the manual: Bootstrap Modal
I found a few topics started on this issue however none about any workarounds for MVC environments. For everyone not familiar with the topic. Modals in twitter bootstrap 3.1.1 look faded, similar to the background. Check it here
What would be the workaround for this problem in Code Igniter or any other MVC?
The code that I use:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>