I have a list of messages returned from a server and i'm using angular to template those messages into rows in a table. That all works fine, but i want to have it so when you click the row a modal pops up with that rows information. Unfortunately angular seems to completely ignore hidden elements even though the modal is within the app and controller namespace (not sure if namespace is the proper term). I have googled around and found a BUNCH of fixes for input fields but none for just simple binding. Heres my code.
HTML (Table)
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
</div>
JavaScript
$('.modal.ui').modal();
var app = angular.module('messages', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('MessagesCtrl', function($scope, $http) {
$scope.currentMessage = {};
$http.get('{{ route('message.index') }}').then(function(resp) {
$scope.messages = resp.data.messages;
});
$scope.show = function(message) {
$scope.currentMessage = message;
}
});
HTML (All)
<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
<td>[[ message.email ]]</td>
<td>[[ message.phone || 'N/A' ]]</td>
<td>[[ message.subject ]]</td>
<td>
<i class="icon reply"></i>
<i class="icon unhide" data-ng-click="show(message)"></i>
<i class="icon trash" data-ng-click="destroy(message)"></i>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
<div class="actions">
<a class="ui button green icon mini labeled">
<i class="icon reply"></i>
Reply
</a>
<button class="ui button red icon mini labeled">
<i class="icon trash"></i>
Delete
</button>
</div>
</div>
This is full example: i used bootstrap for open modal
<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
</head>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="message in messages" class="message">
<td>{{ message.email }}</td>
<td>{{ message.phone || 'N/A' }}</td>
<td>{{ message.subject }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
show message
</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
remove message
</button>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
</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">Message</h4>
</div>
<div class="modal-body">
<div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
<div><strong>From: </strong>{{ currentMessage.email }}</div>
<div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
<div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
<div style="margin-top: 10px">
<h1>Message</h1>
{{ currentMessage.body }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary">Reply</button>
</div>
</div>
</div>
</div>
<script>
angular.module("messages", []);
angular.module("messages").controller("MessagesCtrl", function($scope) {
$scope.messages = [{
email: "x#x.com",
phone: "092222222",
subject: "test",
sent_at: "2015/15/15",
body: "your message"
}];
$scope.openModal = function(message) {
$scope.currentMessage = message;
}
});
</script>
</body>
</html>
I figured out the problem. For those using semantic ui (and perhaps bootstrap) when the modal is initialized a script will move it from where you placed it (in the app directive) to the the bottom of the body tag. Like #Maher did in his example make the entire body the app and controller to fix this.
Related
I got simple table where I got files from my backend:
<table class="table table-sm align-items-center table-hover table-flush responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="lPart">Filename</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileUploads | async | filter: name | paginate: { itemsPerPage: 10,
currentPage: p }; let i = index">
<td id="lPart" style="cursor: pointer; font-weight: normal;">
{{file.name}}
<button type="button" class="btn btn-sm btn-default" (click)="show()">{{file.name}}</button>
</td>
</tr>
</tbody>
</table>
I tried add button which opens a modal
<button type="button" class="btn btn-sm btn-default" (click)="show()">{{file.name}}</button>
And there is modal
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{file.name}}</h4>
</div>
<div class="modal-body">
<img src="http://localhost:3000/files/{{file.name}}{{file.ext}}"
id="imagepreview" style="width: 425px; height: 425px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
(click)="hide()">Close</button>
</div>
</div>
</div>
</div>
Problem is that this modal "works" only if is inside <td> tag
There is my method where I get files
showFiles() {
this.fileUploads = this.uploadService.getAccidentFiles();
this.fileUploads.forEach(element => {
});
}
and for opening modal
show() {
this.showModal = true;
}
Another problem is that if I got my modal inside <td> tag I got only last image from my uploaded files. I want to have next to filename button where I can click preview then I can show modal with image preview.
<section class="main">
<h1>Company Management</h1>
<md-card>
<button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
<md-icon style="color:white;">add</md-icon>
</button>
<div class="table-responsive">
<table class="table adminTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>country</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let company of companies">
<td>{{company.user_name}}</td>
<td>{{company.email}}</td>
<td>{{company.country}}</td>
<td>
<button class="btn" md-raised-button>Guide</button>
<button class="btn" md-raised-button>Pin</button>
<button class="iconBtn first">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="iconBtn second">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer cat-btn">
<button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel
</button>
<button md-raised-button class="md-raised save color-white">Save</button>
</div>
</div>
</div>
</div>
this my html code where i used ngmodal for popup window but im not getting any kind of popup model.
i have imported import { ModalModule } from 'ng2-bootstrap'; in the app.module.ts file
can u please help me out to fix this problem
Your code is 100% fine, there is no issue on template side.
But The Possible issues might be:
1) Imported just ModalModule rather than ModalModule.forRoot()
import { ModalModule } from 'ngx-bootstrap';
#NgModule({
imports: [ ... , ModalModule.forRoot() ],
...
})
2) Forgot to add css
Here is the working example of static modal, you can compare your code wiht this :
https://stackblitz.com/edit/angular-ngx-bootstrap
I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.
Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG
I was trying to figure out how to pass a variable to a model. For example, I have a table that have lists of student. I want to click one of them and have a modal popup that is matching that student. So I obviously need to pass some how the id in the table to the model. This is all in Asp.net using razor. And then after having that model popup I would like to edit and resubmit which then would refresh the table. Perhaps even have a success message. I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! or something.
here is the code. Please help me to resolve this issue.
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> #Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/#item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/#item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="#item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>
You can use bootstrap dialog event to achieve what you want :
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});
You can make your modal like the following
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function.
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>
I want to create a lookup data using Bootstrap Modal Dialog. Upon user clicked "select link" from a list of record in the Modal Dialog, the selected Client Name will be pass to textbox in the Main Page. Below is the code
HTML file (Main Page)
<script>
$(function () {
var viewModel = {
workorder: ko.observableArray(#Html.Raw(Model.WorkOrdersJSON)),
}
ko.applyBindings(viewModel);
});
</script>
#using (var form = Html.Bootstrap().BeginForm(new { #class = "form-horizontal", id = "myForm" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Partial("_ClientInfo")
</div>
}
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label" id="clientname" >Client Name</label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- 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">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">List of Work Order</h1>
</div>
<div class="bs-example">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Report Date</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody >
<!-- ko foreach: workorder -->
<tr data-bind="click: $parent.selectTag">
<td>
<span id="test" data-bind="text: wO_Id"></span>
</td>
<td>
<span data-bind="text: wO_Date"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
<td>
Select
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model 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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
After spending a few hours on this issue, finally i figured it out. Below is my new code
HTML file (Main Page)
<script>
function ConfigsViewModel() {
var self = this;
this.clientinformation=ko.observableArray(#Html.Raw(Model.ClientInfoJSON));
this.Selected = ko.observable(this.clientinformation()[0]);
this.SelectConfig = function (Config) {
self.Selected(Config);
$("#clientName").val(this.clientName);
$("#hideclientId").val(this.clientId);
$('#myModal').modal('hide');
}
}
ko.applyBindings(new ConfigsViewModel());
</script>
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label">Client Name</label><input id="hideclientId" type="hidden" />
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- 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">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="bs-example">
<table class="table table-striped table-bordered table-hover" id="tableClient">
<thead>
<tr>
<th>#</th>
<th>Client Name</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: clientinformation -->
<tr data-bind="click: $parent.SelectConfig">
<td>
<span id="test" data-bind="text: clientId"></span>
</td>
<td>
<span data-bind="text: clientName"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->