Is there any framework or technique to simply update data edited in table and stored in mongoDB
I am using angularjs, node.js and mongoDB.
My 'by hand' idea is to:
track edits in angular table that will return json with updated fields
send REST request for update edited fields with proper document id
Using the Angular JS, we can do all CRUD operation. For your question i have answer,
In HTML
<tr ng-repeat="list in getList">
<td>{{$index+1}}</td>
<td>{{list.firstname}}</td>
<td>{{list.lastname}}</td>
<td class=" last"><button type="button" class="fa fa-edit btn btn-primary" ng-click="edit($index,list)"></button>
</td>
</tr>
In controller,
$scope.edit=function(idx,list){
$scope.<name of ng-model>=angular.copy(list)
flag=idx;
}
and now in controller where to saving, check the data in save() function, where the list is existing in the table. If yes the call update(), else call add().
Related
Hi I have a situation in AngluarJS that the HTML is generated by back-end and the only thing that front-end should do is to put the HTML which is mostly table tags into the ng-bind-html and show it to the user. But now these tables should be sort-able too. How can I do it?
The thing that I've already done is to create my own directive using this so make the static string HTML take some actions too. But having them sorted is something else. In other word I want to make my fully generated table with all <tr> and <td> to get sorted by my actions.
Here is my simplified code (compile is my directive):
JS:
// The string is fully generated by back-end
$scope.data.html =
'<table> <tr> <th ng-click="sortByHeader($event)"> Name </th>
<th ng-click="sortByHeader($event)"> Age </th> </tr>
<tr> <td> Sara </td> <td> 15 </td> </tr>
<tr> <td> David </td> <td> 20 </td> </tr>'
HTML:
<div compile="data.html"></div>
The ng-click="sortByHeader($event) is something that back-end can prepare for me so I can use it thanks to the compile I wrote that let me find out which header has been clicked. Other than that there is nothing I can do. Unless you can help me :D
Thanks in advance, I hope my question was clear.
Since you tagged your question with sorttable.js I'm going to assume that you are using that script to sort your tables.
Now, if I understand it correctly, sorttable.js parses your HTML for any tables with the class sortable. Your table is apparently loaded dynamically, therefore sorttable.js does not know about it when it parses the HTML.
But you can tell it to make a dynamically added table sortable, too.
Relevant part taken from the following page:
https://kryogenix.org/code/browser/sorttable/#ajaxtables
Sorting a table added after page load
Once you've added a new table to the page at runtime (for example, by
doing an Ajax request to get the content, or by dynamically creating
it with JavaScript), get a reference to it (possibly with var
newTableObject = document.getElementById(idOfTheTableIJustAdded) or
similar), then do this:
sorttable.makeSortable(newTableObject);
You should be able to do that with angular. If not, I can try to put something together later.
Is the answer to the question "Does the rendered table have to exactly match the HTML retrieved by the backend?" a kind of "No"?
If that's the case, then here's a hacky way of gaining control of the table contents by parsing and capturing stuff from the backend HTML string using regular expressions.
For example: grab all row data and apply sorting client side
// Variables to be set by your sortByHeader functions in order to do client-side sorting
$scope.expression = null;
$scope.direction = null;
var regexToGetTableHead = /<table>\s*(.*<\/th>\s*<\/tr>)/g;
$scope.tableHead = regexToGetTableHead.exec($scope.data.html);
$scope.tableRows = [];
var regexToGetRowContents = /<tr>\s*<td>\s*(\w*)\s*<\/td>\s*<td>\s*(\w*)\s*<\/td>\s*<\/tr>/g;
var match;
while ((match = regexToGetRowContents.exec($scope.data.html)) != null) {
$scope.tableRows.push({
"name": match[1],
"age": match[2]
});
}
And HTML
<table>
<thead compile="tableHead"></thead>
<tbody>
<tr ng-repeat="row in tableRows | orderBy: expression : direction">
<td>{{row.name}}</td>
<td>{{row.age}}</td>
</tr>
</tbody>
</table>
I'm attempting to build an import for our system. I accept an excel file, parse it within a web api into a data table object (number of columns and rows is unknown). I send the data table via json back to my angular app. After a user maps the columns to fields in our database, I then take the data table, pass it back to an api.
The problem is when I pass the table back to the api, any changes I've made to the data isn't applied. It's as if ng-model isn't working
<table>
<tr ng-repeat="row in dt track by $index">
<td ng-repeat="col in row">
<input type='text' ng-model="col" />{{col}}
</td>
</tr>
</table>
Visually this produces exactly what I want. The {{col}} visually shows me that typing different data shows me ng-model must be updating, because {{col}} always shows the value inside the text box
But when I pass my data table to the api, it contains all the original values
ng-model="col" sets the value of col, which is a copy of what is in row[$index]. To update the value which in row, use ng-model="row[$index]".
I have two functions: One for deleting data and another one for updating data. The data comes from a Resource.query().
I'm using ng-repeat to go over every element in the collection. Since every element is a Resource object, I guess that I should be able to apply $save, $remove, ... operations.
The Html could be as simple as:
<tr ng-repeat="data in data_collection">
<td>
<a class="btn btn-info" ng-click="togglePublish(data,'country')">RELEASE</a>
</td>
<td>
<div>
<button class='btn btn-danger' ng-click="remove(data)">Delete</button>
</div>
</td>
</tr>
why if I do:
// Arg: data is a Resource object from the collection
$scope.remove = function(data){
data.$remove(); // <----- THIS DOES NOT MODIFY THE VIEW
}
But this is correctly updating the data:
// Arg: original_data is a Resource object from collection
$scope.togglePublish = function(original_data, country){
// Deep copy
var copy = angular.copy(original_data);
// Modifications over the copy
copy = toogleRegionPublication(copy, country);
Resource().update(copy).$promise.then(function(){
// If update was taken, then update view value
original_data.regions = copy.regions; // <--- THIS MODIFIES THE VIEW
});
}
Why one of them is having some effect on the view but not the one that involves the $remove operation? Why?
As far as I understand
$remove
is just a HTTP DELETE method call over to your restful resource.
To remove the data object from the view I think you can just remove it from the data_collection array. See how to remove object from array.
However, if you still need to call http DELETE to remove that data object from your database or something, you will need to do that as well.
I have a form which updates multiple records in a table and is working fine. I want too be able to add new records via ajax am loading the following in via ajax but am getting blackholed
<?
$uuid = String::uuid();
?>
<tr>
<?=$this->Form->input('Attachment.'.$uuid.'.id',array());?>
<?$this->Form->unlockField('Attachment.'.$uuid.'.id');?>
<td><?=$this->Form->input('Attachment.'.$uuid.'.title',array('label'=>false,'style'=>'float:left;'));?></td>
<?$this->Form->unlockField('Attachment.'.$uuid.'.title');?>
<td><?=$this->Form->input('Attachment.'.$uuid.'.url',array('label'=>false,'style'=>'float:left;'));?> <button onclick="return false;" class="btn attachment_select_file" style="float:left;"><i class="icon-folder-open"></button></i></td>
<?$this->Form->unlockField('Attachment.'.$uuid.'.url');?>
<td><button class="btn"><i class="icon-trash icon-large"></i></button></td>
</tr>
Does anyone have any idea what might be causing this.
Thanks
"There may be cases where you want to disable all security checks for an action (ex. ajax request). You may “unlock” these actions by listing them in $this->Security->unlockedActions in your beforeFilter." - from The cook book
The first thing I'd be doing is disabling the security component completely and seeing if that fixes it. If it does, then re-enable the security component, and add the relevant action to
$this->Security->unlockedActions
in your beforeFilter.
I am developing a application in which one of my template renders a table with n number of rows. Now in each row, i have a column with buttons like edit and delete.
When clicked on edit, a edit form appears in the same window in some div. That form needs to be populated with values fetched from backend.
Now nothing great in this.
My problem is this:
I have a view which renders the complete table using the following template structure:
<script type="text/template" id="ledgersing">
<div class="span6 widget">
<div class="widget-header">
<span class="title">Ledgers</span>
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button>
</div>
<div class="widget-content">
<table width="100%" class="table table-striped dataTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr>
</thead>
<tbody>
<% _.each(ledgers,function(data){ %>
<tr>
<td><%= data.name %></td>
<td><%= data.email %></td>
<td><%= data.contact_number %></td>
<td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div >
</script>
In this it just alerts a id when clicked on x. Now do i need to necessarily use onClick event like this? I mean that i will need the id in whatever construct i use for processing. What can be a better solution? I know backbonejs can handle this mess with ease if application is structured properly.
So essentially i want to know from experts, what will they do in such a scenario. How will they structure the application? I am novice to this frontend framework.
Instead of using _.each in your templates, I'd go with one view per table row as each one has some bit of complexity (edit, delete)
In these view, you use the events hash to register your DOM events. Never use onclick in your HTML, this is a really bad practice.
Don't hesitate to look at the TodoMVC Backbone example for ideas on how to organize your app.
I'm also developing a backbone application for the first time and went thru exactly the same mistake.
I first I just tried to translate my php / asp / ruby / whatever_server_side_template_technology into underscore templates, and got something pretty much like what you had.
Now I can realize it's a mistake. You should use subviews. The events and the associated model will be connected to that subview. Pretty soon you'll have lots of view listening to events and updating themselves when data changes, but if you're carefull it will be ok.
Here's a demo app I'm working on: https://bb-jugar.rhcloud.com/index.html#Wine
and here's the github repo: https://github.com/opensas/BackboneBootstrap
This is how I solved it: https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js