button doesnt work after load partialview with AJAX - html

i have a page that have two buttons Next and Previos. This buttons load a table in a PartialView.
My problem is when i press the button second time, it doesnt work.
Here is the code
The View :
<div id="Centros">
<div class="divPantalla2">
<table cellspacing="0" class="table table-hover table-responsive table-bordered">
<tr>
<th class="thTablas">
Nombre
</th>
<th class="thTablas">
Nro- Establecimiento
</th>
<th class="thTablas">
Departamento
</th>
<th class="thTablas">
Localidad
</th>
<th class="thTablas">
</th>
</tr>
#if (ViewBag.OnePageOfCEProyecto != null)
{
foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
{
<tr>
<td>
#item.Nombre
</td>
<td>
#item.NroEstablecimiento
</td>
<td>
#if (item.dDepartamento != null)
{
#item.dDepartamento.Descripcion;
}
</td>
<td>
#if (item.dLocalidad != null)
{
#item.dLocalidad.NomLocalidad;
}
</td>
<td>
<button type="submit" value="Eliminar+#item.CEID" name="Command" class="btn_eliminar">
</button>
</td>
</tr>
}
}
</table>
</div>
<div id="botones">
#if (ViewBag.OnePageOfCEProyecto != null)
{
<div align="center">
<div align="center">
#if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
{
<button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
<font color="#0C58A8"><<</font></button>
<button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
<font color="#0C58A8"><</font></button>
}
<font color="#0C58A8">#int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
#if (ViewBag.OnePageOfCEProyecto.Count == 8)
{
<button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
<font color="#0C58A8">></font></button>
<button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
<font color="#0C58A8">>></font></button>
}
</div>
</div>
}
</div>
</div>
The PartialView :
<div class="divPantalla2">
<table cellspacing="0" class="table table-hover table-responsive table-bordered">
<tr>
<th class="thTablas">
Nombre
</th>
<th class="thTablas">
Nro- Establecimiento
</th>
<th class="thTablas">
Departamento
</th>
<th class="thTablas">
Localidad
</th>
<th class="thTablas">
</th>
</tr>
#if (ViewBag.OnePageOfCEProyecto != null)
{
foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
{
<tr>
<td>
#item.Nombre
</td>
<td>
#item.NroEstablecimiento
</td>
<td>
#if (item.dDepartamento != null)
{
#item.dDepartamento.Descripcion;
}
</td>
<td>
#if (item.dLocalidad != null)
{
#item.dLocalidad.NomLocalidad;
}
</td>
<td>
<button type="submit" value="Eliminar+#item.CEID" name="Command" class="btn_eliminar">
</button>
</td>
</tr>
}
}
</table>
</div>
<div id="botones">
#if (ViewBag.OnePageOfCEProyecto != null)
{
<div align="center">
<div align="center">
#if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
{
<button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
<font color="#0C58A8"><<</font></button>
<button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
<font color="#0C58A8"><</font></button>
}
<font color="#0C58A8">#int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
#if (ViewBag.OnePageOfCEProyecto.Count == 8)
{
<button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
<font color="#0C58A8">></font></button>
<button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
<font color="#0C58A8">>></font></button>
}
</div>
</div>
}
</div>
The AJAX function (only for the button next):
$(document).ready(function () {
$("#Siguiente").on("click", function () {
var accion = $('#Siguiente').val();
$.ajax({
url: "/Proyecto/TablaCentros",
type: "GET",
cache: false,
data: { command: accion }
})
.done(function (partialViewResult) {
$("#Centros").html(partialViewResult);
});
});
});
And the controller :
public ActionResult TablaCentros(string command, Proyecto p)
{
if (command != null)
{
if (command.Contains("Siguiente1"))
{
if (Session["REGISTRO_PROYECTO"] != null)
{
Proyecto model = p;
int page = (int)Session["PROYECTO_PAGINA_ACTUAL"];
page++;
Session["PROYECTO_PAGINA_ACTUAL"] = page;
List<CentroEducativoModel> lista = (List<CentroEducativoModel>)Session["PROYECTO_CENTRO_EDUCATIVOS"];
var onePageOfCEProyecto = lista.ToPagedList(page, 8); // will only contain 15 products max because of the pageSize
ViewBag.OnePageOfCEProyecto = onePageOfCEProyecto;
cargarEstadoProyecto();
cargarCentroEducativos();
cargarClaseProyecto();
cargarTipoProyecto();
return PartialView("_TablaCentros", model);
}
}
}
return PartialView("_TablaCentros");
}
Sorry for my English,
Thanks!!!

It looks like your buttons are part of your partial view. When you initially load your view (without ajax) your button is bound to your click handler and all is well. When you click that button, your handler fires, makes the request and then replaces the #Centros content with the response -- however your bound button is part of the content that is replaced and your "new" buttons aren't bound.
You will need to rebind your handlers to your buttons after the ajax request has completed and you've loaded the result. You have a couple of options -- you can move your script to your partial view so it would fire after it's loaded, you can call your binding code in your done() handler or you can change your selector for your existing code to use a delegate.
I would use the delegate which would look similar to this:
$("#Centros").on("click", "#Siguiente", function() { ... })
This essentially means that anytime a click event happens in #Centros to an element with an ID of #Siguiente then handle the event.

I hope what ny answer will help you. What I have noticed in the signature of your Action in the controller it is supposed to receive two arguments command and Proyecto but on your ajax function you just pass command:accion So your Action does not receive the object Proyecto.

Related

Create a show all button to show hidden row

My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

Checkbox in table to select table row in Angular

I have a table in Angular 6, it has a checkbox in there? What I want to be able to do is select the table row, i.e checkbox, then hit a select button and that gets submitted. I was wondering does the table have to be wrapped in a <form>. The structure of my HTML so far is but it does not work:
<form [formGroup]="assetForm" (ngSubmit)="onSubmit()">
<table class="table table-striped table-hover mb-10">
<thead>
<tr>
<th>Number</th>
<th>Sev</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number">
<i class="form-icon"></i>{{incident.number}}
</label></td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" [disabled]="!Form.valid" type="submit">Select</button>
</form>
Ts.file
onSubmit() {
if (this.assetForm.invalid) {
this.assetForm.setErrors({ ...this.assetForm.errors, 'required': true });
return;
}
this.uploading = true;
this.service.post(this.assetForm.value).subscribe((response: any) => {
console.log(response);//On success response
}, (errorResponse: any) => {
console.log(errorResponse); //On unsuccessful response
this.error = true;
this.uploading = false;
});
}
<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number" [(ngModel)]="incident.checked">
<i class="form-icon"></i>{{incident.number}}
</label>
</td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
Try like, hope it will work.

Add elements below row <td>

In my angularjs app there a rows (using ng-repeat), created through .
The code creating rows is below:
<tbody>
<tr ng-repeat="data in downloads">
<td data-title="ID">{{$index + 1}}</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
</tbody>
I'm trying to implement something that when you click the arrow, the row expands with information appearing like this:
I however can not get the information to appear along the bottom like that. What should I be trying to implement to get text along the bottom - flex box, inline-box ?
Take a look at Bootstrap collapse.js. I think this is what you are looking for, of course, you have to change it in order to meet your needs.
Try below code for your scenario.
(function(ng, app){
app = angular.module('app', [])
app.controller("mainController", ['$scope',
function($scope) {
$scope.downloads = [{
"user_name": "John",
"download_name": "Doe jhonejhonejhone",
"size": "0 byte"
},
{
"user_name": "Anna",
"download_name": "Doe DoeDoeDoeDoe",
"size": "0 byte"
},
{
"user_name": "Maron",
"download_name": "Anna DoeDoeDoeDoeDoe",
"size": "5 byte"
}
];
$scope.editFiles = function() {
$scope.editBar = true;
};
$scope.remove = function(index) {
$scope.downloads.splice(index, 1);
};
}
]);
}(angular));
.btn-primary{
margin-right: 10px;
}
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form>
<table border=1 class="table table-striped table-bordered">
<thead>
<tr>
<th>
<b> # </b>
</th>
<th>User</th>
<th>Download Name</th>
<th>Complete Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in downloads">
<td>
<b> {{$index + 1}} </b>
</td>
<td>
{{data.user_name}}
</td>
<td>
{{data.download_name}}
<div class="btn-group pull-right" ng-show="editBar">
<button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
</div>
</td>
<td>
{{data.size}}
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can try the following:
move your ng-repeat to your tbody
add ng-init="data.showSubRow = false" to your tbody
add another row to the tbody that should only be visible when showSubRow is true
so your ng-repeat would look like
<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
<tr>
visible row
</tr>
<tr ng-show="data.showSubRow">
visible when clicked
</tr>
</tbody>
now you can add individual buttons in each row to show / hide content on individual rows or add an edit all function that would make all subrows visible
show / hide individual row
<tr>
<td data-title="ID">
{{$index + 1}
<span>
<button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
<button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
</span>
</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
display all
$scope.editAll = function(){
angular.forEach($scope.downloads, function(value, key) {
value.showSubRow = !value.showSubRow;
});
}
Working sample ----> Demo

multiple deletion by using check box in angular 2

this is the code in html page, need code for both component and service please help for this problem ** multiple deletion by using check box in angular 2 **i posted only html code but i dont know code for both components and service here the code have using single deletions but i need multiple deletions
<div class="card-content table-responsive" *ngIf="this.pagedItems!=null && this.pagedItems.length > 0">
<table class="table">
<thead>
<tr>
<th class="text-danger" style="font-weight: bold">Sl NO</th>
<!-- <th class="text-danger" style="font-weight: bold">Date</th>-->
<th class="text-danger" style="font-weight: bold">Income/Expense</th>
<th class="text-danger" style="font-weight: bold">Payment Mode</th>
<th class="text-danger" style="font-weight: bold">Debtor</th>
<th class="text-danger" style="font-weight: bold">Remarks</th>
<th class="text-danger" style="font-weight: bold">Amount</th>
<th class="text-danger" style="font-weight: bold"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of this.pagedItems | paginate: { itemsPerPage: 500, currentPage: p }; let i = index" >
<td>{{i+1}}</td>
<!-- <td>{{item.date_of_entry}}</td>-->
<td>{{item.income_expense}}</td>
<td>{{item.payment_mode}}</td>
<td>{{item.creditor_fname}}</td>
<td>{{item.remarks}}</td>
<td>{{item.amount}}</td>
<td>{{item.entry_id}}</td>
<td><input type="checkbox" name="deletecheck"></td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit" class="btn btn-primary btn-simple btn-xs" (click) = "editSales({entryid:item.entry_id,InExp:item.income_expense,Amt:item.amount,Paymode:item.payment_mode,Debtr:item.creditor_id,Vehic:item.vechicle_no,Remarks:item.remarks})">
<i class="material-icons">edit</i>
</button>
</td>
</tr>
<button (click)="deleteSelected()">Delete</button>
</tbody>
</table>
<br>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Add an array of selected items in the component:
selectedItems: Item[];
Add another button to (de)select items:
<button type="button" rel="tooltip" title="Select" class="btn btn-info btn-simple btn-xs" (click) = "selectSales({entryid:item.entry_id})">
<i class="material-icons">close</i>
</button>
In component:
selectSales(item) {
const indexFound = this.selectedItems.indexOf(selected => selected.id === item.id;
if (indexFound > -1) {
this.selectedItems.splice(indexFound, 1);
} else {
this.selectedItems.push(item);
}
}
deleteSelected() {
this.selectedItems.forEach(item => {
// delete each item
});
}

How can I change value of angular object used in HTML?

I need to change a value in HTML using Angular click. The value is getting changed in the angular function but it is not reflecting in HTML.
My Angularjs and HTML is like :-
$scope.GetTblData = function (Name) {
var Data = $.param({ TblName: Name });
var MyTblDataList = [];
$scope.TempName = '';
$scope.TempName = Name;
if (Name == 'ContactTbl') {
$('#ContactTbl').show();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').show();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseDescTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').show();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseSubDesc') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').show();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'InternTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').show();
$('#LocationTbl').hide();
}
else if (Name == 'LocationTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').show();
}
$http({
url: '/Admin/FetchTblData',
method: 'POST',
data: Data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
}).success(function (data) {
$scope.MyTblDataList = data;
}).error(function (data) {
alert('Cannot Load Table data')
});
}//GetTblData End
<li ng-repeat="r in MyTblList">
<a href="#" data-ng-click="GetTblData(r.TblName)">
<i class="glyphicon glyphicon-ok"></i>
{{r.TblName}}
</a>
</li>
<h2>{{TempName}} Details</h2>
<div class="table-responsive">
<table id="CourseTbl" class="table table-hover table-bordered" style="margin:0px 5px; width:1070px">
<thead style="background-color:aqua">
<tr>
<td>
S. No.
</td>
<td>
ID
</td>
<td>
Name
</td>
<td>
Description
</td>
<td>
Image
</td>
<td>
CourseLink
</td>
<td>
Action
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in MyTblDataList">
<td>
{{$index+1}}
</td>
<td>
{{r.ID}}
</td>
<td>
{{r.Name}}
</td>
<td>
{{r.Description}}
</td>
<td>
<img src="~/img/course-img/{{r.Img}}" height="200px" width="200px" />
#*{{r.Img}}*#
</td>
<td>
{{r.CourseLink}}
</td>
<td>
<div class="btn btn-group-xs">
<input type="button" class="btn btn-lg btn-info" ng-click="editItem(r.ID)" value="Edit" />
<input type="button" class="btn btn-xs btn-danger" value="Delete" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
But the problem is that on click of the anchor tag the value of $scope.TempName changes in Angularjs function but value of {{TempName}} doesn't change.