I am using Angular 8,
In this I need to do a popup in NgFor loop, the data is binding in popup modal but the same data is binding continously in the bootstrap modal...
My Html is
<tr *ngFor="let law of List; index as i">
<td>{{i+1}}</td>
<td>
<mat-form-field>
<input matInput placeholder="Name" [formControl]="college">
</mat-form-field>
</td>
<td>
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target=".bd-example-modal-lg" (click)="data(law )"
(click)="get()">Quantity</button>
</td>
</tr>
<div class="modal fade bd-exampletwo-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Delivary Details</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div>
<table ">
<thead>
<tr>
<th>Sl.No</th>
<th>first Name</th>
</tr>
</thead>
<ng-container>
<tr [formGroupName]="j">
<td>{{j+1}}</td>
<td>
<td>
<mat-form-field>
<input matInput placeholder="firstname" formControlName="f_name</mat-form-field>
</td>
</tr>
</ng-container>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How to iterate the bootstrap modal in ngfor .. In this same data is binding again and again..
data-target=".bd-exampletwo-modal-lg{{i}}">
<div class="modal-dialog modal-lg" id="{{i}}"></div
I used this to iterate but not working How to Do that
Bootstrap's JavaScript-based components, such as modal, do not work correctly with Angular. It is best to use an Angular-specific library, such as ng-bootstrap or ngx-bootstrap.
Related
I have a modal containing file uploader. I have a Add More button, which on click append a new file upload.
Here is my modal.
<div class="modal fade" id="quotationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Quotation Upload</h5>
</div>
<form
method='post'
enctype='multipart/form-data'
id="quotationForm"
>
<div class="modal-body">
<table id="quotationModalTable" width="50%">
<tbody id="quotationTbody">
<tr>
<input type="text" value="randomValue" name="randomValue">
</tr>
<tr class="add_row">
<td id="no" width="5%">#</td>
<td width="75%"><input class="file" name='files[]' type='file' multiple/></td>
<td width="20%"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<button class="btn btn-success btn-sm" type="button" id="add" title='Add new file'/>Add new file</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary submit" name="btnQuotationSubmit" type='submit'>Upload</button>
</div>
</form>
</div>
</div>
</div>
Now when I try to submit form, I am not getting those files. This is my code for form submit.
$("#quotationForm").submit(function(e) {
let files = $('.file').val();
let formData = new FormData($("#quotationForm")[0]);
<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" >
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-top:55px;">
<div class="modal-header" style="background:#003c4c;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:#FFF;">Check Availibility</h4>
</div>
<div class="modal-body">
<table class="table table-hover hd-bg-table table-bordered">
<thead>
<tbody>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle" rowspan="2"></th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
<th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
</tr>
<tr>
<th><b>Initiation</b></th>
<th><b>SPOC Assignment</b></th>
<th><b>Participant Contribution</b></th>
<th><b>Review</b></th>
<th><b>Closure</b></th>
</tr>
</thead>
<tr ng-repeat="x in infoWithStatus track by $index">
<td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
<td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
<td>
<select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
<option value="">Please select a role</option>
</select>
</td>
<td>{{x.count1}}</td>
<td>{{x.count2}}</td>
<td>{{x.count3}}</td>
<td>{{x.count4}}</td>
<td>{{x.count5}}</td>
<tr/>
</tbody>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
Here as we can see i am calling a function on click, that contains some validations. But, after the validations are done, it closes the model. But , i want the model to still open after validation as well.
You should remove
data-dismiss="modal"
from here
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
And in your validate(infoWithStatus) you should close the modal if validation is success. Use below code to hide modal
$("#responsive-modal3").modal("hide");
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.
I've set all rows of my table to open a bootstrap modal.
However, inside each row I have a select box with a couple of status that the user must be able to chose.
How can I prevent the modal of opening when the select box is clicked?
Here is my code:
HTML
<div class="row">
<div class="col-md-6">
<table class="table">
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>John Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>Jane Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">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>
Jsfiddle link:
https://jsfiddle.net/2c21mzfm/
Thanks in advance.
See this fiddle:
$(".user-row select").on("click", function (e) {
e.stopPropagation();
});
The idea is that you stop the click event (e - the first argument of the on callback that is the delegated parameter to the event) bubbling up to .user-row with stopPropagation
You are setting the entire table row to activate the modal. Only set the td to activate the modal.
HTML
<tr class="user-row">
<td data-toggle="modal" data-target="#myModal">John Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
I'd like to display Stackable Modal in my view :
Principal view
.....some code
#*Pop Up ajout demande*#
<div class="modal fade" tabindex="-1" data-focus-on="input:first" role="dialog" id="addModal" style="height: 100%">
<div class="modal-dialog" style="width: 100%">
<div class="modal-content" style="width: 100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title center-block" style="color:red; font-size:larger"></label>
</div>
<div class="modal-body">
#Html.Partial("AjouterDemandePopUp")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnEscape">Quitter</button>
</div>
</div>
</div>
</div>
Partial view AjouterDemandePopUp
...........some code
<div class="modal " tabindex="-2" id="VehModal">
<div class="modal-dialog" style="width: 100%">
<div class="modal-content" style="width: 100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title center-block" style="color:red; font-size:larger">Choix de véhicule</label>
</div>
<div class="modal-body">
<p><label id="labchauffeurs">Chauffeurs disponibles</label> <select id="lstchauffeurs" name="lstchauffeurs" style="width:250px; "></select> </p>
<p>
<table id="tblauto" class="table table-bordered table-striped">
<thead>
<tr style="color:white;background-color:#3c8dbc" id="autoheader">
<th></th>
<th>Chauffeur</th>
<th>Marque</th>
<th>Plaque d’immatriculation</th>
<th>Kilométrage</th>
<th>Année de fabrication</th>
<th>Carte de carburant </th>
<th>Observation</th>
</tr>
</thead>
<tbody id="tblautoBody"></tbody>
</table>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="btnSetVehicle">Valider</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnQuit">Annuler</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
The problem is when I validate or close the second pop ( pop up inside partial view) the first pop up will be closed !!!
I need to know the reasons of this behavior? How can I fix this?
When you click on the button with attribute data-dismiss="modal" then it will call bootstrap function to close all opened modals.
Instead of using built-in function - create your own function, which will close specific modal. Use attribute like data-dismiss-modal="#modal_id" - then you will dismiss modal only with id #modal_id
$(document).on('click', '[data-dismiss-modal]', function () {
var target = $(this).attr('data-dismiss-modal');
$(target).modal('hide');
});
Example: https://jsfiddle.net/73mdx4jm/