I am trying to make an admin panel and I have to edit user's details (parse.com) from this panel.
After many searches on google I succeded to display the user's firstname and lastname. I made another function with query.first() but I can edit only the first user, what should I do to can edit second user or third ?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/parse-1.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="demo">
<div class="container" ng-controller="adminPannel">
<table class="table table-striped">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody><tr ng-repeat="user in users">
<td><button class="btn" ng-click="editUser()"></button><input type="text" id="frstName" ng-value="Firstname" ng-model="firstNameCh"/><input type="text" id="lstName" ng-value="Lastname" ng-model="lastNameCh"/></td>
<td>{{ user.firstname }}</td>
<td>{{ user.lastname }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and js:
var app=angular.module('demo',[]);
app.controller('adminPannel',['$scope',function($scope) {
$scope.users=[];
Parse.initialize("WnaPPAytzCE8AR7NNGENpVGMGQ6pQ9wH2LKRQ6wE", "2qfXZunNrQPnCgNuusPpbGCDmbRBzo7CG4X0edDF");
$scope.use=Parse.User.current();
var noname2=Parse.Object.extend("noname2");
var query=new Parse.Query(noname2);
//query.equalTo("uname",$scope.use.get('username'));
query.find({
success:function(results) {
alert("success");
alert(results.length);
for(var i=0;i<results.length;i++)
{
var object= results[i];
$scope.users.push({'firstname':object.get('firstname') , 'lastname':object.get('lastname') ,'age':object.get('age')});
}
$scope.$apply();
},
error:function(error) {
alert("error:"+ error.code +" "+error.message);
}
});
$scope.editUser = function(){
var query = new Parse.Query(noname2);
query.first({
success:function(noname2){
noname2.save(null,{
success:function(nm2){
nm2.set('firstname', $('#frstName').val());
nm2.set('lastname', $('#lstName').val());
nm2.save();
location.reload();
}
});
},
error:function(error){
alert('error' + error.code + ' ' + error.message);
}
});
}
}]);
I don't know what should I change in my editUser function.
Try here: https://parse.com/docs/js/api/symbols/Parse.Query.html
You can use query.find instead of query.first and then on success you'll get a results list of objects.
Related
This is my angular table,here am showing row data when I click checkbox in a row.
my query is how can I uncheck sibling checkboxes when a checkbox is clicked?I tried to achieve this but I couldn't.
var app= angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
$scope.List=[
{
'encounterDate':'jan 11',
'visitId':'102359',
'emailId':'santhosh#gmail.com'
},
{
'encounterDate':'dec 2',
'visitId':'102360',
'emailId':'vijay#gmail.com'
}
];
}
$scope.showData = function(data){
alert("Encounter Date :" + data.encounterDate +" \n Visit ID:" + data.visitId +
"\n Patient name:"+ data.patientName +"\n Age:"+ data.age +"\n Referred by:"+ data.referredBy +"\n Email: "+ data.emailId)
}
})
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="init()">
<div class="container">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>S.no</th>
<th>Action</th>
<th>Encounter Date</th>
<th>Visit ID</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in List'>
<td>{{$index+1}}</td>
<td><input type='checkbox' class="checkBox"></td>
<td>{{data.encounterDate}}</td>
<td>{{data.visitId}}</td>
<td>{{data.emailId}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried this its not working..
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Any suggesstion? Can Any one let me know that,What I did wrong?
First add ng-model to your checkboxes
<td><input type='checkbox' ng-model="data.checked" ng-change="checkSibling(data)" class="checkBox"></td>
and use ng-change to uncheck siblings when a checkbox is checked
$scope.checkSibling = function(rowData){
angular.forEach($scope.List, function(value, key) {
if(value.visitId != rowData.visitId)
value.checked = false;
});
}
Demo
I have my html page which contains a table. I use dataTable plugin for pagination.1
1https://datatables.net/examples/basic_init/alt_pagination.html
My html as follows.
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<style type="text/css">
table, th,td{
border: 1px solid black;
text-align:center;
}
#clients_data {
margin-bottom:100px;
}
</style>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<title>Clients</title>
</head>
<body>
<table style="width: 100%" id="clients_data" class="display" >
<caption>Clients</caption>
<thead>
<tr>
<th>Clients</th>
<th>Number of Sites</th>
<th>Reset the Processing</th>
</tr>
</thead>
</table>
<table style="width: 100%" id="machines_data">
<caption>Machines</caption>
<thead>
<tr>
<th>Number</th>
<th>Machine Name</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
loadCustomers();
loadMachines();
});
function loadCustomers() {
$
.ajax({
type : 'GET',
url : 'http://localhost:8080/cache/getCustomers',
dataType : 'json',
success : function(data) {
var rows = [];
$
.each(
data,
function(id, value) {
rows
.push(' <tbody><tr><td><a href="clientSiteInfo.html?client='
+ id
+ '">'
+ id
+ '</td><td>'
+ value
+ '</td><td><button type="button" onclick="reset(\''
+ id
+ '\')">Reset</td></tr> </tbody>');
});
$('#clients_data').append(rows.join(''));
$('#clients_data').DataTable({
"pagingType" : "full_numbers"
});
}
});
};
.......
this loads data, but pagination is not working. means when I set 10 entries per page, it shows all entries..I have attached the screenshot. AM i missing any other plugin?
But in the mentioned tutorial, it says I need to use "pagingType" : "full_numbers" attribute only..
The pagination works perfectly as expected. The problem is that you wrongly insert a <tbody> section for each row. And since you only can have one <tbody> per DataTable the shown pagination will be based on the very first row in the dataset, thus always showing one page in total.
You could do this instead :
rows
.push(' <tr><td><a href="clientSiteInfo.html?client=' +
id +
'">' +
id +
'</td><td>' +
value +
'</td><td><button type="button" onclick="reset(\'' +
id +
'\')">Reset</td></tr> ');
});
and
$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');
but you should really consider using columns instead.
This is for an assignment. Here table contains book details which contains book name, author, price, ISBN and category. When user click on book name it should redirect to order page displaying book name, author and price.
BookPage.html
<script type="text/javascript" src="book.js">
<body ng-app="mymodule" >
<div ng-controller="myController" >
<table border=2>
<thead>
<tr>
<th>ISBN</th>
<th>NAME</th>
<th>AUTHOR</th>
<th>CATEGORY</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{ book.ISBN }}</td>
<td >{{ book.Name }}</td>
<td>{{ book.Author }}</td>
<td>{{ book.Category }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
**books.js**
var myapp = angular.module('mymodule', []);
myapp.controller("myController", function($scope, $http,$window) {
$http.get("https://api.myjson.com/bins/p4ujn").then(function(response) {
$scope.books = response.data;
$scope.getdetail=function(){
$scope.getbookdetail=this.book;
$window.location.href = "orderpage.html";
}
});
});
Page to be redirected when user click on book name.
orderpage.html
<script type="text/javascript" src="book.js"></script>
<body ng-app="mymodule" >
<div ng-controller="myController" >
{{getbookdetail.Name}}<br>
{{getbookdetail.Author}}
{{getbookdetail.price }}<br>
</div>
</body
This is my code. It display nothing, just a blank page.
You can use a Service or factory to share the data across the controllers.
DEMO
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
$scope.getnames = function(){
$scope.names = names.get();
}
}
);
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
Apart from service/factory , you can go for other options like localStorage and rootScope, but those are not recommended ways.
You should use factory/Services, localStorage, routeParams or Child Parent controllers
I'm new to Angularjs. I am learning about factory.
In my example, I have 2 requests to Restful Api and got 2 responses in JSON format.
With the first json, I can use ng-repeat to show them but the 2nd json can't bind to the view.
How can I bind both responses into the same view?
this is my code
index.html file
<!DOCTYPE html>
<html lang="en" ng-app='f1feed'>
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="DriverController">
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Full name</th>
<th>Driver ID</th>
<th>Points</th>
</tr>
</thead>
<tbody ng-repeat="driver in drivers">
<tr>
<td>{{$index + 1}} </td>
<td>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</td>
<td>{{driver.Driver.driverId}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
<div class="info">
<h1>1st Driver Detail info</h1>
<ul>
<li>Driver ID: {{alonso.driverId}} </li>
<li>Date of Birth: {{alonso.dateOfBirth}} </li>
<li>Nationality: {{alonso.nationality}}</li>
</ul>
</div>
</body>
</html>
file app.js
var app = angular.module('f1feed',[]);
app.factory('DriverSev', function($http){
var driverApi = {};
driverApi.getDriverStands = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/current/driverStandings.json?callback=JSON_CALLBACK'
});
};
driverApi.getDetail = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/drivers/alonso.json?callback=JSON_CALLBACK'
});
};
return driverApi;
});
app.controller('DriverController', function DriverController($scope, DriverSev){
$scope.drivers = [];
$scope.alonso = [];
DriverSev.getDriverStands().success(function(data){
$scope.drivers = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
})
DriverSev.getDetail().success(function(data){
$scope.alonso = data.MRData.DriverTable.Drivers;
console.log($scope.alonso);
})
});
Thanks
your $scope.alonso is unused in your view put it in another ng-repeat to display it
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody ng-repeat="alon in alonso">
<tr>
<td>{{$index + 1}} </td>
<td>{{alon}}</td>
</tr>
</tbody>
</table>
if it's the same data model, push it in $scope.drivers
$scope.alonso is an array.
<ANY ng-repeat="details in alonso">
<any>Driver ID: {{details.driverId}} </any>
<any>Date of Birth: {{details.dateOfBirth}} </any>
<any>Nationality: {{details.nationality}}</any>
</ANY>
should do the trick, or something ugly such as {{alonso[0].driverId}}
In the following code, I am creating a table that uses AngularJS to grab information from a server and adds each item to a table using 'ng-repeat'.
<table class=" table table-striped" id="eventTable">
<thead>
<tr>
<th>Index</th>
<th>Time</th>
<th>Description</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="event in eventslist">
<tr>
<td>{{event.idx}}</td>
<td class="text-left" nowrap>
{{event.srvTime | date :'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-left">
<a data-ui-sref="events.details({edIdx: event.idx})">{{event.desc}}</a>
</td>
<td class="text-left" nowrap>
{{event.s0.id}}
</td>
</tr>
</tbody>
</table>
I have polling set up on the web page from the javascript controller(see below) so it stays near 'real-time'. I need each new item coming in to be added to the top of the table, how do I do this, should it be in the controller or can I do it straight from the HTML file? Thanks!
$scope.latestEventIndex = 0;
var poll;
eventsFactory.getEvents()
.success(function (result) {
angular.forEach(result.v, function (d) {
$scope.eventslist.push(d);
if (d.idx > $scope.latestEventIndex) {
$scope.latestEventIndex = d.idx;
}
});
$rootScope.eventslist = $scope.eventslist;
})
.error(function (error) {
$scope.status = 'Unable to get events: ' +error.message;
console.log($scope.status);
});
poll = $interval(function() {
eventsFactory.getLatestEvents($scope.latestEventIndex)
.success(function (result) {
angular.forEach(result.v, function (d) {
$scope.eventslist.push(d);
if (d.idx > $scope.latestEventIndex) {
$scope.latestEventIndex = d.idx;
}
});
$rootScope.eventslist = $scope.eventslist;
})
.error(function (error) {
$scope.status = 'Unable to get events: ' + error.message;
console.log($scope.status);
});
}, 1000);
Since your array does not appear to be sorted, you can simply insert the new items into the $scope.eventlists array using Array.splice. Here's a plunker:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<body ng-controller="mycon">
<h1>{{test}}</h1>
<div>
<div ng-repeat="item in list">{{item}}</div>
</div>
<input ng-model="newItem" />
<button ng-click="addItemAtTopOfList()">Add</button>
<script>
var app = angular.module('myapp', []);
app.controller('mycon', function($scope){
$scope.list = [];
$scope.addItemAtTopOfList = function(){
$scope.list.splice(0, 0, $scope.newItem);
$scope.newItem = "";
}
});
</script>
</body>
</html>
Let me know if that doesn't answers your question sufficiently.