Passing data from ngx-bootstrap Modal to Component - html

I have an array drivers in my component. I'm showing a ngx-bootstrap modal with a value fullname from the drivers array when i click a button in the component. Now i want to get the data back from the modal like which name is selected. How to do that?
<button type="button" class="btn btn-success btn-round" (click)="staticModal.show()">{{'Assign Driver' | translate}}
</button>`
<div class="modal fade" bsModal #staticModal="bs-modal"
tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-static-name" class="modal-title pull-left">Select Drivers</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div *ngFor= "let dri of drivers">
<input type="radio" id="customRadio1" name="customRadio">
<label>{{dri.fullname}}</label>
</div>
<div class = "modal-footer">
<button type="button" class="btn btn-primary" (click)="staticModal.hide()" >Select Driver</button>
<button type="button" class="btn btn-default" (click)="staticModal.hide()">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I want to get value of the selected radio button in the component. And when the modal is closed i want to perform the method placeorder() which i already How to do that?

open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.data = //'your data want to sent in model';
modalRef.result.then((response) => {
console.log(response);
});
In Model component
#input() data : any;
closel() {
let data = [1,2,3,4,5,6];
this.activeModal.close(data);
}
}
}

Related

Is there way to create multiple modal in bootstrap by using on click jquery?

I currently experience problem which I don't know why the same target modal id is not opening after i click the next button. to understand well let's say I have user 1 so when i click the name of user 1 all children of user 1 will display on the modal this is working well.
So now I have the new user which is user2. so i want to display again the children of user2. however the modal is not showing again after i click the button.
Question: Is there way to create a multiple modal on same target id?
Main Problem: Modal already dismiss after i click the second user.
I will show you guys my sample code the already created.
Note: Modal use for displaying all the result response in the jquery.
**Modal And Parent **
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="showMoreChildren" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Downline</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="wrapper_children_click"></div>
</div>
</div>
</div>
</div>
#foreach($children_details ? $children_details : [] as $key => $detail)
<div class="col-md-2">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-dark onClickShowMoreChildren" data-toggle="modal" data-attribute-each-children-id="{{$detail->id}}" data-target="#showMoreChildren">{{$key+1}}</button>
</div>
<input type="text" class="form-control" value="{{$detail->fullname}}" aria-label="Input group example" aria-describedby="btnGroupAddon" disabled>
</div>
</div>
#endforeach
Jquery:
$(document).ready(function(){
$('.onClickShowMoreChildren').on('click',function(e){
e.preventDefault();
var children_id = $(this).attr('data-attribute-each-children-id');
$.ajax({
url:'/membership/view_more_children',
data:{children_id:children_id},
type:'get',
dataType:'JSON',
success:function(res){
console.log(res);
$('#myModal').modal('show');
var html_children_clicked;
$.each(res.children_detail,function(key,value){
html_children_clicked = '\
<div class="col-md-2">\
<div class="input-group">\
<div class="input-group-prepend">\
<button class="btn btn-dark onClickShowMoreChildren" data-toggle="modal" data-attribute-each-children-id="'+value['id']+'" data-target="#showMoreChildren" >'+(key+1)+'</button>\
</div>\
<input type="text" class="form-control" value="'+value['fullname']+'" aria-label="Input group example" aria-describedby="btnGroupAddon" disabled>\
</div>\
</div>\
';
});
$('.wrapper_children_click').append(html_children_clicked);
},
error:function(err) {
console.log(err);
}
})
});
});
Parent Foreach Result:
User 2: Note when i click this i want to show again the modal and children of user 2 will display to the modal div.

Modal rendering before object loads

The this.obj data is populated after modal window load. So, how can I sync both data and modal?
Acomponent.ts
this.dialog.showModal(this.referenceNumber);
dialogComponent.ts
export class DialogComponent {
obj:any;
showModal(name:String) {
if(name!==null) {
this.obj=name;
$("#myModal").modal('show');
}
}
hideModal():void {
document.getElementById('close-modal').click();
}
errorModal() {
$("#errorModal").modal('show');
}
}
dialog.html
<div id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The Angular approach is to control visibility of the modal via the javascript.
So something like:
<div *ngIf="showModal" id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="showModal=false">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note the *ngIf="showModal" and (click) event handler on the button.
Your .ts file would need a showModal: boolean; property, and the button click handler would need run change detection if you are using push change detection.
Edit:
And yes, don't use jQuery in Angular. I recommend the ng-bootstrap library.

Background still remains after Bootstrap 4 modal disappears

I am using bootstrap 4 modal, when I click on "Ok" button I call function and after that the modal disappear, but the back-ground still remains. whereas for the close button the modal and the back-ground dissapers its because I am using "data-dismiss="modal", but if I use this same for "Ok" button this is not working. I have used (data-backdrop="false"), but it completely removes the back-ground which i donot want. so can someone please tell me how to do that. I have uploaded the following code.
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{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>{{question}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onConfirm($event)">Ok</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.ts File
export class ModalComponent {
#Input() question: string = ''
#Input() title: string = ''
#Output() confirm = new EventEmitter<void>()
constructor() { }
onConfirm(event: Event) {
event.stopPropagation()
this.confirm.emit()
}
}

Multiple modals in bootstrap4 not working

I have 2 modals that are triggered by selection of a drop down menu. If I have the "multi-part-delete modal" first and the "multi-part-move" modal second then the "multi-part-move" one does not show. The screen goes dark but the modal does not appear.
If I swap them around then the move one works and the delete one doesn't show. Anyone know how I can get them both to work.
<!-- Multi-Part Delete Modal -->
<div class="modal fade" id="multipartdeletemodal" 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">Delete Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Are you sure you want to delete these parts?<br>
This process cannot be undone</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multidelete" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Multi-Part Move Modal -->
<div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Move Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Please select group?</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multimove">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multimove" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
use this IIFE function and you will have mulitple stackable modal support on bootstrap 4
(function multiple_modal() {
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
})()
Yes, stacked modals are currently not working in Bootstrap 4.1. What I did was make them sequentially close/open each other. For example, when a child("stacked") modal opens from a parent modal, the parent modal closes, and when a child modal closes, it re-opens a parent(previously opened) modal - so there's always one modal open at a time.
On the child modal, I have a data attribute data-parent-modal="#parentExampleModal"
I have the Javascript as below:
$('.modal').on('shown.bs.modal', function (e) {
let $this = $(this),
$parentModal = $this.parent().find($this.data('parent-modal') + '.modal');
if ($parentModal.length) {
$parentModal.modal('hide');
$this.on('hidden.bs.modal', function (e) {
$parentModal.modal('show');
});
}
});
If you need further explanation, please let me know.
You could do it with CSS by selecting the second modal
.modal:nth-of-type(even) {z-index: 1052 !important;}
.modal-backdrop.show:nth-of-type(even) {z-index: 1051 !important;}

Getting a particular ID from a web-grid for a modal

I want a model to open when I click on a button in a web-grid. I have created a button which targets a modal by its ID. For each item in the model(a list), I want to create a modal with the id of the item. Below is my code:
<div id="divCurrentRented">
#{
WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
}
#obj.Table(htmlAttributes: new
{
id="tableCurrentRented",
#class = "table"
},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: obj.Columns(
obj.Column("Title", header: "Title"),
obj.Column("Author", header: "Author"),
obj.Column("Avaible", header: "Available", canSort:false),
obj.Column(header: "Rent", format:#<button type="button" class="btn btn-default" data-toggle="modal" data-target="##item.BookID">Yes</button>)
))
As you can see the data target of the button is equal to the id of the item.
my modal code as below:
<div class="modal fade" id="#Model.First().BookID" ( role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Return confirmation</h4>
</div>
<div class="modal-body">
<p class="modalBody">Are you sure you want to return this book?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As you can see in the first line, I am fetching the bookID of the first item. What I need is to fetch the id for each item of the list so that each button click would open its corresponding modal. Any idea how to do that?
To pass information from page to modal while staying to same page, you can do with bootstrap modal event listener show or shown and pass the data attributes value to modal
e.g to pass id and title to modal as data attributes inside modal trigger button.
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
and use event property relatedTarget to get the data-attribute value e.g id inside modal event listener
var id = $(e.relatedTarget).data('id');
and pass it to modal e.g to <div class="modal-body"></div>
$(".modal-body").html(id);
example with id and title as data attributes passing to modal
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
var title = $(e.relatedTarget).data('title');
//pass date-title to modal header
$(".modal-title").html(title);
//Pass Id to modal body or any element in modal
$(".modal-body").html(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="456" data-title="I'm Second Modal Title">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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" aria-labellbyid="writeLabel"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer" id="edit-footer">
<input type="submit" data-dismiss="modal" class="btn btn-success" value="Submit">
</div>
</div>
</div>
</div>
Fiddle