Develop Reference

How can my users click a button while it's parent component is re-rendering frequently?

I am having the following setup (the below is simplified pseudocode):
<table>
<tr *ngFor="let upload in uploads">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(upload.id)>x</button>
</td>
</tr>
</table>
now, upload will change frequently while progress is being updated. This causes a re-render of the entire row including the button, which makes it very hard to actually trigger the buttons click event. If I click multiple times I'd eventually make it, but I don't think this would make for a good ux...
I think I am must be missing something simple, because I would believe I am not the only person with a similar use case, but I was not able to find any solution - except for moving the button out of the table and having a separate loop through only the array of upload-ids to build the buttons.
I'd highly appreciate if someone could send me on the right track again!

In the end adding the trackBy-function - or in my case trackByRow because I am working with a primeng-table did the trick. I don't fully understand why, because I though trackBy is there to ensure that no other rows are being updated, by my problem was that the actually affected row re-rendered.
But with the trackBy-function in place, when I inspect the dom I see that only the progress-parameter passed to my app-progress-bar component changes, nothing else. And my cancel button works :)

<table>
<tr *ngFor="let upload of uploads; ; let id = index">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(id)>x</button>
</td>
</tr>
</table>
If your upload.id is the same as the index , you can use the index to get the id.

How create a Directory WHIT PHP and HTML whit a Button?

Hello i have a problem... Suppose that i have a table whit two textBox and one button.. when i click the button i must read the value of a textBox and create a directory in a specific path and the directory must be named like the value that i read on the TextBox
I've tryed this code but it dosn't work :(
file = directory.php
<?php
$idCantiere = $_POST["idCantiere"];
$codiceCommessa = $_POST["codiceCommessa"];
echo("Registrazione avvenuta");
chdir("../inserimento");
opendir(".");
mkdir("../inserimento/prova/".$idCantiere);
?>
file prova.html
<table method="POST" action="directory.php">
<tr>
<td bgcolor="#B2E5FB">Cantiere</td>
<td colspan="11"> <input type="text" id="idCantiere"></td>
</tr>
<tr>
<td bgcolor="#B2E5FB">Codice Commessa</td>
<td colspan="11"> <input type="text" id="codiceCommessa"></td>
</tr>
<tr><td><button name="insAffidatario" type="submit" onclick="directory.php">Inserisci Affidatario</button></td></tr>
</table>

The problem with your code and it is a specific one; is that you used <table></table> for what should be a form, it should be <form></form>.
Then you used ID's instead of name attributes. You need to add name="idCantiere" and name="codiceCommessa" to their respective inputs.
You may also want to remove onclick="directory.php" here. The "action" already takes care of that.
Side note: Place your table inside the form and not outside. <form> cannot be made child of <table>.
Also make sure that the paths (and folders) correspond and that they are writeable with proper group/user permissions.
Error reporting will be of help also.
http://php.net/manual/en/function.error-reporting.php
and set to catch and display.

Angularjs, how to pass a scope variable to js function which changes inside ng-repeat?

I have an ng-repeat loop in my html. The variable involved in the looping is displayed in table rows. I need to allow the user to click on the desired value and have a js function receive the value so it can act on it.
An earlier version of my code that does not attempt to pass the value, just display it, is here and works as expected; showing the various host values from filteredList with link attributes (underlined, in my case)
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
My attempt to pass the value of host that the user clicks on to my function "searcher" is here, but it does not work:
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
When it is encountered, angularjs complains:
Error: [$parse.syntax] Syntax Error: Token 'update.host' is unexpected, expecting [:] at column 12 of the expression [searcher({{update.host}});] starting at [update.host}});].
Can someone please advise me of a way acceptable to angularjs to pass the clicked host value to my function?
Thanks very much.

As others have mentioned in the comments, this will work for you:
{{update.host}} </td>
Check out the documentation for ng-click, which indicates it accepts an expression (so you don't need the {{binding}} syntax).

This is the right way to do it
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>

Try:
<td> {{update.host}} </td>
As mentioned, you don't need the curly brackets around variables inside the ng-click. Neither in any angular directive parameter for that matter.

Adding dynamic row to ngTable not displaying

I have created an application with ngTable using grouping functionality, The application is working fine but the problem is that when I add dynamic data (rows) to the table, its not reflecting dynamically, unless or otherwise when we click the table title for sorting or when we click the pagination
I have recreated the problem within a plunker, there you can find a button, when clicked one Dynamic row is added but not reflecting within the table
PLUNKER
<body ng-app="main" ng-controller="DemoCtrl">
<button ng-click="addDynamicDatas()">Add Datas</button>
<table ng-table="tableParamsOne" class="table">
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group" ng-hide="group.data[0].role==='None'">
<td>
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
<span ng-class="{'bold-text': user.role=='None'}" ng-show="user.role==='None'"> {{user.name}}</span>
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
add function
$scope.addDynamicDatas = function()
{
$scope.myDataOne.push({name: "Abcd", age: 10, role: 'Administrator'});
}
Can anyone please tell me some solution for this?

This is probably not an ideal solution but is the only one that I could find.
You can add $scope.tableParamsOne.reload(); after you update your array.
Also currently when your grid is updating when you click a header it is not updating the amount of pages in the pagination. To solve this you can add $scope.tableParamsOne.total($scope.myDataOne.length);

I am also using ng-table(#4.0.0) to make local/client-side insertion/deletion after a successful server submit and got the similar problem of update ng-table. #Bradley's answer above does not work directly. So I chased the source code and found that the reload() called the getData(). After insert a row into the target rowset (ctrl.tbContents.rows in my case), I have to add bellow line in mytbParams definition to make ctrl.tbParams.reload() work:
getData: function() {
return ngTableDefaultGetData(ctrl.tbContents.rows, ctrl.tbParams);
}
Note to inject the ngTableDefaultGetData.

jsp update request happens to be invoked by a link

<tr class="bg-row1">
<td class="td-highlighted-2">
<div align="left"><%=searchList1.getProjid()%></div>
</td>
<td class="td-highlighted-2">
<div align="left"><%=searchList1.getProjname()%></div>
</td>
</tr>
here jsp update request happens to be invoked by a link
in updateproject.jsp how can i refer projid and projname value in a text box

For this type of scenario POST is better suited,
Even if you want to stuck with GET , you can use javascript and use window.open() function for your purpose , and build URL dynamically reading fields