1.this is present in file index.blade.php .In this between html code one button tag is placed in which data target is present in different file .Can it be possible to trigger the modal from remote button
<button class="btn btn-small btn-warning btn-circle" data-toggle="modal" data-target=".ept-modal" onclick="productTestMapModal('<?=base64_encode(base64_encode($product->id));?>')">Available Tests</button>
2.while modal target file is
<div class="clear-back">
<div class="modal-header">
{{ $product->name }} - Available tests
<button type="button" title="Close" class="close pull-right white" data-dismiss="modal">
<i class="material-icons">close</i>
</button>
</div>
<div class="pad-15">
<span class="text-success"><i class="fa fa-circle user-online"></i> Select tests to be mapped in {{ $product->name }}</span>
<button class="btn btn-primary pull-right btn-circle" onclick="productTestMap(this, '<?=base64_encode(base64_encode($product->id));?>')">Save</button>
<div class="clearfix"></div><br/>
<div style="width:99%;overflow-y:auto;">
<table class="table">
<thead>
<tr class="center">
#foreach($product->course->testGroups as $testgroup)
<th>{{ $testgroup->name }}
<button class="btn btn-primary btn-circle btn-sm" onclick="selectTestgroups('{{$testgroup->id}}')">Select All</button>
<button class="btn btn-primary btn-circle btn-sm" onclick="unselectTestgroups('{{$testgroup->id}}')">UnSelect All</button>
</th>
#endforeach
</tr>
</thead>
<tbody>
<tr>
#foreach($product->course->testGroups as $testgroup)
<td>
#foreach($testgroup->subgroups as $subgroup)
#foreach($subgroup->tests as $t)
<span class="badge badgetest_{{$testgroup->id}} {{ in_array($t->id,$product_tests) ? 'selected' : '' }}" onclick="toggleSelection(this)"><span class="test-id hidden">{{ $t->id }}</span>{{ $t->name }}</span>
#endforeach
#endforeach
</td>
#endforeach
</tr>
</tbody>
</table>
</div>
<div class="clearfix"></div><br/>
</div>
in order to open modal from another blade file, you have to include that file, button in the target file index.blade.php like so:
#include('rel_path_to_modal_file.modal_file_name')
and please follow the bootstrap documentation to use modal as it call by id, not a class.
Related
<div class="table">
....
<tr *ngFor="let product of products; index as i">
<th scope="row">{{ i + 1 }}</th>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.price }}</td>
<td>{{ product.quantity ? "not over" : "it's over" }}</td>
<th>
<button
class="btn btn-warning ml-2"
data-toggle="modal"
data-target="#updateProduct"
(click)="fetchProduct(product._id, updateModal)"
>
UPDATE
</button>
<button
class="btn btn-danger ml-2"
data-toggle="modal"
data-target="#deleteProduct"
>
DELETE
</button>
</th>
</tr>
....
</div>
<div
class="modal fade"
id="deleteProduct"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<h4>Are you sure you want to delete?</h4>
<button
type="button"
class="btn btn-secondary ml-2 mr-2"
data-dismiss="modal"
>
CANCEL
</button>
<button
type="button"
class="btn btn-primary ml-2 mr-2"
(click)="deleteProduct(product._id)"
>
DELETE
</button>
</div>
</div>
</div>
</div>
These two blocks of code are in the same HTML page.
My goal is to remove a warning modal when the delete key is pressed in the table. And then press the delete button on the modal to delete the existing line.
But I can't get the id value I returned here in the modal part.
Normally when I do this without a modal in the table it works fine because I can take the id value and delete it directly. But I don't know how to give this id value when I am out.
How can I solve this?
in your ts create new variable:
deleteID : any;
in your html add below code:(inside ngFor)
<button
class="btn btn-danger ml-2"
data-toggle="modal"
data-target="#deleteProduct"
(click)="deleteID= product._id"
>
DELETE
</button>
inside modal:
<button
type="button"
class="btn btn-primary ml-2 mr-2"
(click)="deleteProduct(deleteID)"
>
DELETE
</button>
hope it will be help.
How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>
I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}
<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>
I'm trying to upload files in my angular2 application. Currently I'm using the ng2-file-upload directives and it works for uploading files. However, I would like to also upload a JSON object along with the file. Kinda like this
{username:"john",file:file}
I don’t see how I can implement this feature. I would be open to changing APIs if need be. Here is what I currently have, which can also be found in the sample online.
fetch-datat.ts
import * as ng from '#angular/core';
import { Http } from '#angular/http';
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
const URL = 'http://localhost:5000/api/SampleData/upload';
#ng.Component({
selector: 'fetch-data',
directives: [FileSelectDirective, FileDropDirective],
template: require('./fetch-data.html')
})
export class FetchData {
public uploader:FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
constructor(){
console.log(this.uploader);
}
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
fetch-data.html
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href>Angular2 File Upload</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone">
Base drop zone
</div>
<div ng2FileDrop
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
(fileOver)="fileOverAnother($event)"
[uploader]="uploader"
class="well my-drop-zone">
Another drop zone
</div>
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
<th>Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs"
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs"
(click)="item.cancel()" [disabled]="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs"
(click)="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
I am working on an application that allows a user to click a delete button on a row in a table, then a confirmation modal should pop up; finally when you click yes, you should be able to delete that row. My code doesn't do that, instead it first deletes the header of which I only want to delete the row I specified, not the header. I used bootstrap for the css.
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("datatable-responsive").deleteRow(i);
$('#confirm-delete').modal('hide');
}
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John </td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
</tbody>
</table>
<!--model-->
<div class="modal fade" id="confirm-delete" 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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Use Element.parentNode.parentNode.remove();
function deleteRow(r) {
r.parentNode.parentNode.remove();
//$('#confirm-delete').modal('hide');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John</td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
</tbody>
<!--model-->
<div class="modal fade" id="confirm-delete" 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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Assuming that the argument you're passing to your deleteRow function is a grand-child of the row you want to delete, your problem may be that you're calling deleteRow (the DOM method) on the table itself, not the table's tBody. Try
document.getElementById("datatable-responsive").tBodies[0].deleteRow(i);
(edit:) But Rayon's solution is more elegant anyway. Saves you the trouble of getting a reference to the tbody.
I'm trying to confirm deleting a row from datatable using bootstrap modal dialog
whenever a user clicked deleted link, bootstrap modal should be displayed to confirm the action.
here is my source code:
<c:forEach items="${equipes}" var="equ">
<tr>
<td><c:out value="${equ.idEquipe}"/></td>
<td class="center"><c:out value="${equ.designationEquipe}"/></td>
<td class="center">
<center>
<a class="btn btn-info" href="modifierEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
<i class="halflings-icon white edit"></i>
</a>
<!--
<a class="btn btn-danger" href="supprimerEquipe?id=${equ.idEquipe}&nom=${equ.designationEquipe}">
<i class="halflings-icon white trash"></i>
</a>
<button type="button" data-target="#sup" class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i> </button>
-->
<a type="button" href="#sup?id=${equ.idEquipe}&nom=${equ.designationEquipe}" class="btn btn-danger btn-lg" data-toggle="modal" ><i class="halflings-icon white trash"></i></a>
</center>
</td>
</tr>
</c:forEach>
my purpose is to pass arguments to the bootstrap modal below to to use them if the user clicks the OK button of the modal:
<div class="modal hide fade" id="sup">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Suppression</h3>
</div>
<div class="modal-body">
<p>Voulez vous vraiment supprimer cet enregistrement ?</p>
</div>
<div class="modal-footer">
OK
Annuler
</div>
</div>
Please if I should use the javascript and jquery, I'm looking for the coorect code that can solves my problem.
Thank you.
In your loop:
<a type="button" href="#sup" class="btn btn-danger btn-lg modalOpener" data-toggle="modal" data-id="${equ.idEquipe}" data-nom="${equ.designationEquipe}"><i class="halflings-icon white trash"></i></a>
In your modal:
<a id="okbtn" href="supprimerEquipe" class="btn btn-primary">OK</a>
In your js:
$(".modalOpener").click(function(e) {
var _href = $("#okbtn").attr("href");
var params = "?id=" + $(this).data('id') + "&nom=" + $(this).data('nom');
$("#okbtn").attr("href", _href + params);
});
Demo: https://jsfiddle.net/curtisweeks/v10308hb/