How do you pass a value from a modal with rendered partial view inside to the parent textboxfor.
textbox from my parent:
#Html.Label("Taxpayer Name")
#Html.TextBoxFor(m => m.taxpayername, new { #id = "search",data_toggle = "modal", data_target = "#myModal", data_backdrop = "static",data_keyboard = "false" })
#Html.ValidationMessageFor(m => m.taxpayername)
modal with the partial view:
<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#{Html.RenderAction("Payer", "Registration");}
</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>
The Partial View:
<table class="table" id="payer">
<thead>
<tr>
<th>
#Html.DisplayName("TITLE")
</th>
<th>
#Html.DisplayName("NAME")
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.userTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.FullName)
</td>
<td>
#Html.HiddenFor(modelItem => item.userId)
</td>
<td>
Select
</td>
</tr>
}</tbody>
</table>
#section Scripts{
<script type="text/javascript" src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script>
$(document).ready(function(){
$("#payer").DataTable({
});
});
</script>
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("search");
txtName.value = document.getElementById('name').value;
}
window.close();
}
</script>
whenever i click the select, i was able to retrieve the fullname and id but doesn't populate the textboxfor.
thanks in advance.
Move this function to parent and remove the onclick function:
$(document).on('click',function(){
if (window.opener != null && !window.opener.closed){
var val=$('#name').val();
$('#search').val(val);
}
window.close();
});
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.
I have a table where every row can toggle a dynamic modal form to modify the content of the database bound to the row. The code is looking like this :
<tr data-toggle="modal" data-target="#Modal"></tr>
The modal shows up correctly when we click on the row. But the modal shows up when we try to highlight some content of the row too.
How can make the modal shows up only when we click the row and not when we highlight the row ? I can use Javascript and jQuery as well.
EDIT :
Here is a snippet of my code :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#exampleModal">
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr data-toggle="modal" data-target="#exampleModal">
<td>2</td>
<td>Martin</td>
<td>Morris</td>
</tr>
</tbody>
</table>
<!-- 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/nt7hzkmw/1/
You can click on each row, it will displays the modal. But when you try to highlight some text, for example "smith" it will displays the modal form too
Javascript
var tableid;
$('tr #myModal').click(function() {
var $rows = $(this).closest('tr');
tableid = $rows.attr('id'); // table row ID
// .......
});
HTML
Table
<table>
<tr id="1">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
<tr id="2">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
<tr id="3">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
</table>
Modal
<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>
<h4 class="modal-title">Choose words. You can add words, delete words </h4>
</div>
<div class="modal-body">
<!-- <input type="text" value="Apple,banana,mango" data-role="tagsinput" /> -->
<div class="modal-body-inner"></div>
</div>
<div class="modal-footer">
<button type="button" id = "modelbtn" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
HTML CODE
<table border=1>
<tr onClick="toggleInfo()" >
<td>
just a dummy text
</td>
<td >
td text goes here
</td>
</tr>
</table>
Your popup model
<div style="display:none" id="model">
this is your model....
</div>
Jquery code
function toggleInfo() {
var selection = window.getSelection();
console.log(selection);
if(selection.type != "Range") {
// $("#clicktoshow").toggle();
$("#model").toggle();
}
}
I have not covered cosmetics stuff.
Hope this will helpful.
here is live example.
http://jsfiddle.net/yq810kvz/
First off I'm new to angular. Right now I am displaying in a table a list of records from a database. The grid shows id, first name, last name, and has an edit button per row. When I click the edit button I'm opening a bootstrap modal for the dit page. I'd like to use the data i've captured client side to the grid and pass the rows data to the modal.
Index.cshtml
<div ng-app="PersonApp" class="container">
<br />
<br />
<input type="text" placeholder="Search Person" ng-model="searchPerson" />
<br />
<br />
<div ng-controller="PersonController">
<table class="table">
<thead>
<tr>
<th ng-click="sortData('Id')">
ID <div ng-class="getSortClass('Id')"></div>
</th>
<th ng-click="sortData('firstName')">
First Name <div ng-class="getSortClass('firstName')"></div>
</th>
<th ng-click="sortData('lastName')">
Last Name <div ng-class="getSortClass('lastName')"></div>
</th>
<th>Actions</th>
</tr>
</thead>
<tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
<td>{{r.Id}}</td>
<td>{{r.firstName}}</td>
<td>{{r.lastName}}</td>
<td><span class="fa fa-pencil-square-o"></span></td>
</tr>
</table>
</div>
Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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 class="row">
<div class="col-md-4 mb10">
#Html.Label("First Name")
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-4">
#Html.Label("Last Name")
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
AngularJS
/// <reference path="angular.min.js" />
var PersonApp = angular.module('PersonApp', []);
PersonApp.controller('PersonController', function ($scope, PersonService) {
getPersons();
function getPersons() {
PersonService.getPersons()
.success(function (person) {
$scope.persons = person;
console.log($scope.persons);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
$scope.sortColumn = 'id';
$scope.reverseSort = false;
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
}
return '';
}
}
});
PersonApp.factory('PersonService', ['$http', function ($http) {
var PersonService = {};
PersonService.getPersons = function () {
return $http.get('/Home/GetPersons');
};
return PersonService;
}]);
Thanks
index.html
<tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
<td>{{r.Id}}</td>
<td>{{r.firstName}}</td>
<td>{{r.lastName}}</td>
<td><span class="fa fa-pencil-square-o"></span></td>
</tr>
angularJs
$scope.editperson = function(r){
$scope.myPerson = r;
}
modal
<div class="modal-body" ng-controller="PersonController">
<div class="row">
<div class="col-md-4 mb10">
{{myPerson.firstName}}
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-4">
{{myPerson.lastname}}
</div>
</div>
</div>
function add_items()
{
var ingrediants_name = $("input[name='hidden_name[]']").map(function(){return $(this).val();}).get();
mystat++;
var my=mystat;
console.log(my);
$('#ingrdiants_table').append('<tr> <th class="no">'+my+'</th><td ><select class="selectpicker input-xlarge" name="ingredients_name[]" id="ingredients_name[]" style="width:200px;" >\n\
\n\
\n\
</select>\n\
</td> <td><input type="text" name="ingrediant_quant[]" class="form-control"></td></tr>');
//var selecter = $("input[name='ingredients_name[]']").map(function(){return $(this).val();}).get();
var letters = "";
for (i = 0; i < my; i++)
{
for(j=0;j<ingrediants_name.length;j++)
{
//$("#ingredients_name[0]").append('<option>'+ingrediants_name[j]+'</option>');
letters += '<option>'+ingrediants_name[j]+'</option>';
}
document.getElementById("ingredients_name[0]").innerHTML = letters;
}
}
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<button class="btn btn-primary" type="button" name="add" onclick="add_items()">Add Ingredients</button>
</div>
<div class="modal-body">
<table id="ingrdiants_table" class="table table-bordered table-hover">
<thead>
<th>N</th>
<th>Ingrediant Name</th>
<th>Quantity</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="pencat">save</button>
</div>
</div>
</div>
</div>
Please help me to resolve this. I am creating select option dynamically on click with append in java script. I have assigned select option id="name[]",now i want to assign option to all of select option box through append or something better. how can it work?
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>