I have some list of tasks, each task can be edited into new dialog window. After closing the dialog it shows the edited tasks.
So my question is how table ng-model is connected to the ng-model of dialog window.
Please see the DEMO
Task in table is filling through ng-repeat and and expression. When we click edit it open new dialog. In the dialog ng-model="selectedTask.description" is defined and in angulur ` $scope.selectedTask = task;' is define. Till here every thing is o.k, But how when dialog is closed then How updated info is showed in table.
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" ng-click="beginEdit(task)">Edit</a>
</td>
</tr>
</tbody>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="addTask(task)">Add Task</a>
</div>
<!-- Start Edit Modal -->
<div id="edit" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="editDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editDialogLabel">Edit Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" ng-model="selectedTask.title" id="inputTask" placeholder="Task title" style="width: 150px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" ng-model="selectedTask.description" id="inputDescription" placeholder="Description" style="width: 300px;">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input ng-model="selectedTask.done" type="checkbox"> Done
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="editTask()" data-dismiss="modal">Update Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<!-- End Edit Modal -->
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
.success(function(response) {
$scope.tasks = response.tasks;
});
$scope.beginEdit = function(task) {
//alert(task.title);
$scope.selectedTask = task;
$('#edit').modal('show');
};
$scope.editTask = function() {
$('#edit').modal('hide');
};
});
</script>
</body>
Because you are using ng-model is two-way binding (source to view, and view-> source).
Refer more: http://www.angularjshub.com/examples/basics/twowaydatabinding/
Hope this helps.
Related
I hope everyone had good holidays.
I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.
My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty.
The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.
Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic.
Here is the code:
(js)
$(document).ready(function () {
$('#AddProdBtn').click(function () {
$('#returnLinesGrid').dataTable().fnAddData( [
$('#prodId').val(), $('#prodQty').val()] );
});
});
(cshtml)
<div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content white-box white-box--lblreset">
<div class="modal-header">
<h5 class="modal-title create" style="display:none;">#TitleResource.ReturnCreate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
<input type="hidden" value="#Guid.NewGuid()" asp-for="Id" />
<div class="modal-body row">
<div class="md-form col-6 create-only row">
<select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnType</option>
</select>
<span asp-validation-for="ReturnType"></span>
</div>
<div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
<select disabled selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
<select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotive"></span>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
<select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotiveAux"></span>
</div>
</div>
<div class="modal-body row">
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)">
<input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="#LabelResource.SelectReturnInvoiceNumber" />
</div>
<div class="md-form col-6 create-only">
<input type="text" value="" asp-for="ClientReturnNumber" placeholder="#LabelResource.SelectClientReturnNumber" class="form-control" />
</div>
</div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="#LabelResource.SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="#LabelResource.SelectProdQuantity" />
</div>
<div class="col-6>
<button type="button" id="AddProdBtn">#ButtonResource.AddProduct</button>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
<thead>
<tr>
<th>#Html.Raw(LabelResource.ProductId)</th>
<th>#Html.Raw(LabelResource.Quantity)</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row modal-footer message-footer pr-5">
<div class=" mr-md-0">
<a data-dismiss="modal" class="btn btn-danger w-100">#ButtonResource.Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary w-100">#ButtonResource.Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do..
Thank you for any and all help.
Pictures
Modal window
Main window, modal is called by pressing "Nova devolução" button
You should add the js to the main view. Below is a working demo:
Main View:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
Create
</button>
#await Html.PartialAsync("_ProductPartial")
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var datatable = $('#returnLinesGrid').dataTable();
$('#AddProdBtn').click(function () {
datatable.fnAddData([
$('#prodId').val(), $('#prodQty').val()]);
});
});
</script>
}
Partial View:
<div id="return-edition-modal" class="modal fade" 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">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
</div>
<div class="col-6">
<button type="button" id="AddProdBtn">AddProduct</button>
</div>
<table id="returnLinesGrid">
<thead>
<tr>
<th>#Html.Raw("ProductId")</th>
<th>#Html.Raw("Quantity")</th>
</tr>
</thead>
</table>
<div class="modal-footer">
<div class="mr-md-0">
<a data-dismiss="modal" class="btn btn-danger">Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Result:
I finally got it! There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window, for some reason. I basically just had to put my jquery code in the .ts file associated(in this case Return.Index.ts) and then it finally recognized the values in my inputs!
Thank you so much, everyone, and early happy new year!
Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons
Activate
De-Activate
Currently, on click to the Activate icon in the table the popup window is appearing with the value of current row along with the Activate button, my need is OnClick to this Activate button in the popup window the activate icon in the current td need to be changed as de-activate icon. Like the same need to do for De-activate icon. please help me to find out this.
below is the code.
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="lsusrfname">Jayashree</span></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<span class="usrin glyphicon glyphicon-ok" title="Activate"> </span>
</td>
</tr>
<tr>
<td><span class="lsusrfname">Siva</span></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span>
</td>
</tr>
</tbody>
</table>
</div>
Model window:
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery :
$(".usrrm, .usrin").click(function(){
var tdusrname=$(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
$("#actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-ok');
$('tr td span').addClass('usrin glyphicon glyphicon-remove');
});
$("#de_actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-remove');
$('tr td span').addClass('usrin glyphicon glyphicon-ok');
});
please help me to find out this
If it's just front end stuff that you need to change and you're not too concerned about the back end then you could add and remove classes as required using jQuery.
Using your fiddle:
/* Click the tick button and add a class of current */
$('.usrin').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the x button and add a class of current */
$('.usrrm').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the activate button and change the classes of the tick or x */
$('#actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
});
/* Click the de-activate button and change the classes of the tick or x */
$('#de_actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
})
/* Click the window close button and remove the current class */
$('.close').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.removeClass('current');
});
I've commented it pretty extensively, but it seems to do what you want. First, when the glyph is clicked, we need to 'bookmark' the element that triggered the modal, whether activating or deactivating. Then, if the modal is dismissed, we need to remove that bookmark. If the user has clicked the activate/deactivate buttons, we need to do a number of things (including, probably, your back-end processing): we need to remove that bookmark, update the glyph classes, redirect the target modal, and change the tooltip text. See it working below, or as a fiddle.
Again, my code should be pretty clearly documented. Best of luck!
$(".usrrm, .usrin").click(function() {
// Mark the element that triggered the modals. we'll need this later.
$(this).parent().addClass("currently-active-el");
// Populate the modal fields.
var tdusrname = $(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname = $(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
/*****
* #actusr.click() - we are activating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the deactive modal, and change the icons for the span.
*
*****/
$("#actusr").click(function() {
$(".currently-active-el")
.attr("data-target", "#usrdeact") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrin glyphicon-ok') // toggle the glyph class
.addClass('usrrm glyphicon-remove')
.prop("title", "Deactivate") // change the tooltip text
});
/*****
* #de_actusr.click() - we are deactivating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the active modal, and change the icons for the span.
*
*****/
$("#de_actusr").click(function(evt) {
$(".currently-active-el")
.attr("data-target", "#usract") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrrm glyphicon-remove')
.addClass('usrin glyphicon-ok') // toggle the glyph class
.prop("title", "Activate") // change the tooltip text
});
/*****
* Any modal button that dismisses the modal also needs to remove
* the placeholder class. Otherwise, things will get messy fast.
*****/
$("[data-dismiss='modal']").on("click", function(){
$(".currently-active-el")
.removeClass("currently-active-el");
})
.usrin{color: #ccc;}
.usrrm{color: #d9534f;}
.usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;}
.usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;}
.table > thead{
background-color:#337ab7;
color: #eee;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="lsusrfname">Jayashree</span></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<span class="usrin glyphicon glyphicon-ok" title="Activate"> </span>
</td>
</tr>
<tr>
<td><span class="lsusrfname">Siva</span></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr" data-dismiss="modal">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
You need to concentrate on the event when modal is opened. See here
$('#myModal').on('shown.bs.modal', function () {
//do the necessary things
})
we have to clear the data of the form after the user is click on the submit button.i will be provided the id to the clear the form but form is not not reset.i am using javaScript reset() function to clear the data.how to solve this.
//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
//here we create the myService function for show the Dmmt array
$scope.user = myService.show();
console.log($scope.user);
//here we create the saveUser function for push the item into the list
$scope.saveUser = function(){
var data =
{
eid:$scope.user.eid,
email:$scope.user.email,
city:$scope.user.city,
salary:$scope.user.salary,
date:$scope.user.date,
}
//here we create will pass the user data to the myService of the show2
$scope.user =myService.show2(data);
//Here we clear the form data
document.getElementById("clearData").reset();
//Here we clear the form data without function
// $scope.user.eid ="";
// $scope.user.email ="";
// $scope.user.city ="";
// $scope.user.salary ="";
// $scope.user.date ="";*/
}
//Calling setParam function for the particular userDetails.
$scope.setParam = function(index){
$scope.one = $scope.user[index];
console.log($scope.one);
}
//here we delete the deleteUser function for remove the item into the lsit
$scope.deleteUser = function(index){
$scope.result3 =myService.show3(index);
console.log($scope.result3);
}//close contrller here
$scope.editeUser = function(x){
$scope.ok= myService.editeUsers(x);
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- include the angularjs files here-->
<script src="angular.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="app/controller.js"></script>
<script src="app/service.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
</head>
<body ng-controller="myCont">
<div class="jumbotron">
<div class="container">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Australia'" data-ng-false-value=''/> Australia<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Playboy'" data-ng-false-value=''/>Playboy
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="alert alert-info" ng-if="message">
Info ×.
</div>
<table class="w3-table w3-bordered">
<thead>
<tr>
<th>User</th>
<th>EmployeenName</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | orderBy:'salary' "
onclick="document.getElementById('id01').style.display='block'"
ng-click ="setParam($index)" >
<td style="max-height:61px;"><img src={{x.img}}></img></td>
<td>{{x.eid}}</td>
<td>{{x.email}} </td>
<td>{{x.salary| currency}}</td>
<td>{{x.city}}</td>
<td>{{x.date | date:'dd/mm/yy'}}</td>
<div style="float:right; margin-top:8px;"><p class="bg-primary">
Total Count after Filtered-{{filtered.length}}</p>
</div>
<td>
<button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button>
</td>
<td ng-show="isEditForm">
<lable>Name</label><input ng-model="x.eid"/><br>
<lable>Email</label><input ng-model="x.email"/><br>
<lable>salary</label><input ng-model="x.salary"/><br>
<lable>city</label><input ng-model="x.city"/><br>
<lable>date</label><input ng-model="x.date"/><br>
<button ng-click="isEditForm=false;">SAVE HERE</button>
</td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalDelete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
//here we will provide the id for clear data
<form id="clearData">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New User Registration</h4>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" ng-model="user.email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" >Submit</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</form>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</div>
</div>
<!-- Declare another model is declare for edit Modal -->
<!--Here we creat the delete user model for dlete the user -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Are R Want to Delete </h4>
</div>
<div class="modal-body">
<strong style="color:blue;">
You re going to delete the {{one.eid}}</strong>
</h4>
</div>
<style type="text/css"></style>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is closed-->
</div>
</div>
</div>
</div>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">×</span>
<img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="form.asp">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
<tr>
<td>{{one.eid}}</td>
<td>{{one.email}}</td>
<td>{{one.salary}}</td>
<td>{{one.city}}</td>
<td>{{one.date}}</td>
<span class="btn btn-info">Follow Here</span>
</table>
</form>
</div>
</div>
</div>
</body>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
AngularJs has ngModel to handle forms.
Use that instead.
Then, to clear the form, you simply set the form data object to new empty object and call $scope.$apply() *if calling outside of angular digest cycle * This will clear the form for you.
Extra </body> and </form> tags in the bottom, Remove them first.
Do not use document APi in Angular controller.
This should work
$scope.user.eid ="";
$scope.user.email ="";
$scope.user.city ="";
$scope.user.salary ="";
$scope.user.date ="";
for cleaner code you can wrap it in a function clear and call.
The short question...Is there any way to use ng-disable on a Boostrap Modal Dialog when a form in a Partial View displayed in the Modal is Invalid?
The long question...
I am working in Asp.net MVC. I need to include a Partial-View in a Modal form. I need the form to display details when an item is clicked so that it can be edited, or display a blank form for the user to add a new record. I can get everything to work just perfectly using Bootstrap Modal (data-target) to open the dialog. However, because I am using ng-click to save the changes to my database. I cannot close the dialog with data-dismiss because the button is in the partial view. If I remove the save button from the partial and put it on the parent it works fine, but then, my ng-disable doesn't work for form validation. I thought I had solved the whole thing by switching to Angular ui-Modal, but when I include that code, it works fine when displaying details of an exisiting record, but won't open the modal at all to display a blank form for a new record. This has been driving me crazy for hours.
So here it is...I need to either to close the Bootstrap Modal from my Angular Controller using ng-click, or I have to figure out how to display the blank form using Angular ui-Modal. Please help!
Here is my modal in my cshtml View:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="addNewComment" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#003A5D; color:white">
<h4 class="modal-title">Comment View</h4>
</div>
<div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
<div class="modal-body">
#Html.Partial("_AddNewComment")
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Here is the Partial View that gets rendered:
<div class="panel panel-primary">
<div class="panel-heading">Add New Comment</div>
<div class="panel-body" ng-repeat="cm in selection.comment">
<form name="CommentForm">
<table style="width:100%; border:none">
<tr>
<td style="border:none">
Short Comment (displayed on the Contractor's homepage)<br />
<div style="font-size:8px">Max 50 characters</div><br />
<input name="ShortComment" type="text" style="width:250px" value="{{cm.vchShortComment}}" ng-model="cm.vchShortComment" required />
<div role="alert"> <span class="error" ng-show="CommentForm.ShortComment.$error.required">Short Comment is required!</span></div>
</td>
<td style="border:none;width:40%">
<div class="panel panel-default">
<div ng-controller="ContractorCtrl">
<br />
<p class="input-group">
<span style="padding-left:30px">Start Date:</span><span style="float:right">
<input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="startDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />
</span>
<span class="input-group-btn">
<button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div ng-controller="ContractorCtrl">
<p class="input-group">
<span style="padding-left:30px">End Date:</span><span style="float:right">
<input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="endDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />
</span>
<span class="input-group-btn">
<button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<br />
<span style="padding-left:30px">Created By: {{user}}</span>
</div>
</td>
</tr>
</table>
Long Comment (shown as Pop-up on the Contractor's homepage)<br />
<div style="font-size:8px">Max 2000 characters</div><br />
<textarea style="width:100%;height:200px" ng-model="cm.vchLongComment" required>
{{cm.vchLongComment}}
</textarea>
<br />
<div>
<span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button> <button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>
</div>
</form>
</div>
</div>
Here is the code from my Angular Controller:
$scope.clickTest = function (comment) {
debugger;
$scope.selection.comment.splice(comment);
};
$scope.ShowDetails = function (comment) {
debugger;
if (comment == undefined)
{
comment = [
{
id: 0,
vchShortComment: 'please add short comment',
vchLongComment: 'please add long comment'
}
]
}
$scope.selection.comment.push(comment);
//modalInstance = $modal.open({
// templateUrl: 'addNewComment',
// controller: ModalInstanceCtrl
// });
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I was able to solve all of my issues by wrapping the entire Modal in "" tags. I put the buttons in the modal-footer and now data-target, data-dismiss and form validation all work as desired. Below is the NEW HTML for the Modal. I hope this helps someone else!
<form name="CommentForm">
<div class="modal fade" id="addNewComment" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#003A5D; color:white">
<h4 class="modal-title">Comment View</h4>
</div>
<div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
<div class="modal-body">
#Html.Partial("_AddNewComment")
</div>
<div class="modal-footer">
<span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button> <button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>
</div>
</div>
</div>
</div>
</form>
I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<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">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodName ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price" value="<?=$prodPrice?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>