Partial View Modal popup buttons not calling Controller Action Method - model-view-controller

I am trying to implement a modal popup which gives a user two buttons, each pointing to action methods in separate controllers.
Here is the partial view:
<div class="modal fade" id="importOption">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Select Import Option</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="flex-container">
<div class="first">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="BundleNodes" asp-action="Import" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="auto" data-dismiss="modal">Select Node(s)</button>
</div>
</div>
<div class="second">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="Nodes" asp-action="SelectBind" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="select" data-dismiss="modal">Auto Import</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
This partial view is basically a modal popup with a form in the body element which contains two buttons. The buttons were taking up too much space in the parent view so I want to move them into a popup, reducing the number of buttons in the parent view. The problem is, once the buttons are in the partial view they don't trigger their respective controller actions.
I am rendering the partial view in the parent view using this line:
#await Html.PartialAsync("_ImportOptionPartialView")

Related

Modal field empty after form submit

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

ASP.NET MVC - Bootstrap 5 modal button does not display dropdownlist items

After beating my head against this problem for 3 days, I think I finally narrowed it down to an issue with the bootstrap modal button. I have modal button popup that displays a partial view, and a select list within that. When I create it to a separate page, it displays with no issues:
dropdownlistworking
However, when I put the exact same code into my modal button view, the dropdown stops displaying my items except for the default:
dropdownlistnotworking
Here is the code on the modal button:
Main view:
<div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#addDoc">Add Doc</button>
<div id="addDoc" class="modal fade"">
<div class="modal-dialog" role="document">
<div class="modal-content">
#Html.Partial("_AddDoc", new Slingshot.Models.OrgDocsModel { OrgId = #Model.First().OrgId})
</div>
<div>
</div>
</div>
Partial:
<div class="modal-header">
<h4 class="modal-title" id="addDocLabel">Add Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" asp-action="_AddDoc">
<input type="hidden" asp-for="OrgId" />
<div class="form-group">
<label asp-for="DocName" class="control-label"></label>
<input asp-for="DocName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DocTypeName" class="control-label"></label>
<select asp-for="DocTypeName" asp-items="#Model.DocTypesList" class="form-control" >
</select>
</div>
<div class="form-group">
<input asp-for="UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
<label class="custom-file-label" for="OrgDoc" class="form-control"</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="Submit" value="Submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>

Laravel vue js modal hide curret modal and show new modal with bootstrap 5

I have 3 components in my vue js
create.vue
list-user.vue
modal-role.vue
in my create.vue i call the 2 other component,
<template>
<div>
<modal-role></modal-role>
<list-user></list-user>
</div>
</template
these 2 components are all modal
modal-role.vue
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRole">
add members
</button>
<!-- Modal -->
<div class="modal fade" id="modalRole" tabindex="-1" aria-labelledby="modalRoleLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalRoleLabel">Role</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li #click="selectRole(item)" data-bs-toggle="modal" data-bs-target="#modalUser" data-bs-dismiss="modal" class="list-group-item list-group-item-action" v-for="item in roles" :key="item.id"> {{ item.name }} </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</template>
list-user.vue
<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
<div class="modal-dialog" v-if="role">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalUserLabel">Choose members as {{ role.name }} </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" #click="dismiss()"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li
class="list-group-item list-group-item-action"
v-for="item in users" :key="item.id"
>
{{ item.name + ' ' + item.surname}}
</li>
</ul>
<div class="row justify-content-center" v-if="!isLast">
<button class="btn btn-primary" #click="loadMore()">
View more
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" #click="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" #click="choose()" data-bs-dismiss="modal">Choose</button>
</div>
</div>
</div>
</div>
So in my create.vue when i have button from my modal-vue to show a modal with list of role,
in my modal-role.vue what i expected is when i select one role, it dismiss the modal on modal-role.vue and show a new modal that is in list-user.role but I got an error:
app.js:14656 Uncaught TypeError: Illegal invocation
at Object.findOne (app.js:14656:44)
at Modal._showElement (app.js:16567:38)
at app.js:16490:35
at execute (app.js:13914:5)
at app.js:16196:7
at execute (app.js:13914:5)
at HTMLDivElement.handler (app.js:13937:5)
and if tried to put the modal in list-user.vue to modal-role.vue, it work but if the second modal dismiss but i still have the overlay background from one of these 2 modals
EDIT
When i show the first modal, got 2 modal backdrop in my element.
I got the problem here, i put a v-if in my modal-dialog div in my list-user.vue, so my modal have no div dialog in mounted then modal bootstrap can't call it to show, so i move my if statement in my modal-content and it work well

How to pass an id to modal using thymeleaf

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
});

Vue component in Backpack button

I'm fairly new to both Laravel and Vue, I'm using backpack for my admin interface and i'm trying to add a button to the rows in one of my CRUD views. I've got teh button added and using a view with HTML and JS directly in teh view, but what I would like to do is use a Vue component for the button so I can re-use this elsewhere.
My view component works fine when I use it in a normal page, but when I add it to the button view it doesn't even register.
Password.Vue component file:
<template>
<div>
Test
<div class="modal fade" tabindex="-1" role="dialog" id="bannerformmodal">
<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">Reset Password</h4>
</div>
<div class="modal-body">
<form action="" method="">
<div class="form-group">
<input id="password" type="password">
</div>
</form>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</template>
<script>
export default {
mounted() {
console.log('Component ready.')
}
}
</script>
resetPassword.blade.php in views/vendor/backpack/crud/buttons
<password></password>
button addition on crud controller:
$this->crud->addButtonFromView("line", "reset_Password","resetPassword" , "end");

Resources