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.

Print each loop of <c:foreach> individually using javascript

Currently I'm printing the whole page with print icon using following code:
<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" />
</a>
I am reading a list of objects in JSP and displaying the object details using <c:foreach>.
I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.
I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?
Edit:
Example:
<c:forEach var="case" items="${distributions}">
<table>
<tr>
Print case details
</tr>
</table>
</c:foreach>
If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.

I have not done the following but theoretically it should work:
1) define a print stylesheet, with:
body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}
2) define an event listener, e.g. with jQuery
$(".detail-item .print").click(function(e) {
$("body").addClass("detail-print");
$(this).closest(".detail-print").addClass("current");
window.print();
});
This should only print what is visible in your print stylesheet.
The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...

In your block you could put the data in a td then use the method described in this post to print the contents of that td.
<script type="text/javascript">
$(function(){
$(".printable").each(function(){
var $td = $(this);
var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
$td.parent().append($printIconTD);
$printIconTD.click(function(){
Popup($td.html());
});
});
});
</script>
....
<c:forEach var="case" items="${distributions}">
<table>
<tr>
<td class="printable">Print case details</td>
</tr>
</table>
Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know

A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.

Javascript in table gives error 'This content cannot be displayed in a frame' in IE

I am using Wordpress and have a simple HTML table in a post. I use javascript to make all of the row clickable to a URL. Some clients report an error using Internet Explorer, 'This content cannot be displayed in a frame'. I need 2 things:
The link to open in a new tab (it currently opens in the same window)
To remove this error (even the content below gives the error).
Any ideas? Thanks in advance
<table class="mytable">
<tbody>
<tr>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>ISBN</th>
</tr>
<tr onclick="document.location = 'http://amazon.com/dp/1234567890';">
<td><strong><em>Book A</em></strong></td>
<td>rrr</td>
<td>hhh</td>
<td>123414</td>
</tr>
<tr class="alt" onclick="document.location = 'http://amazon.com/s?index=books&field-author=fred';">
<td><strong><em>Book B</em></strong></td>
<td>VVV</td>
<td>AAA</td>
<td>n/a</td>
</tr>
</tbody>
</table>

It would be possible to do this using anchors, however it would require one for each column in each row and I guess your not up for that!
I cant seem to replicate the error you're getting, I guess your using a different version of IE to me.
Using the TR onclick event does seem to be the easiest method.
As you want the link to open in a new window or tab (its not really in your control as it depends on how the clients browser is configured) you can use window.open() instead of changing window.location like you are currently.
<script type="text/javascript">
function navigate(url) {
window.open(url);
}
</script>
Add something along those lines to the head of your page.
<tr onclick="navigate('where.you/want-to-go');">
And you'll be able to use it like that. I don't know if this will trigger any pop-up blocker type things but for my tests it opened a new tab.
The window.open function can take some extra arguments to try to force new tabs or windows etc but don't know how many browsers what and how well it works.

jQuery Code on <td> with ajax to extract a column from a table

I have a table of banned IPs. The first column holds the IPs, the second one has the timestamp and the third the action links. I want to make an ajax call when "Remove Ban" is clicked on the link. For that I need the IP address from the first column. But somehow, this isn't working.
Here are the codes (You can check it on jsfiddle.net)
<tr>
<td class="ip">192.168.1.1</td>
<td class="centered">August 10, 2011</td>
<td class="right action_td">
<a class="action ban remove" href="javascript://">Remove Ban</a>
</td>
</tr>
(This is just a <tr>. Other elements of the table removed.)
The js:
$(".action.ban.remove").live('click', function(){ // remove ban
ip = $(this).parent("td.right").siblings("td.ip").html();
alert(ip);
});
Instead of 192.168.1.1, it alerts with "null". Am I doing it wrong?
update okay, I figured out the problem. I had another handler attached to it which was creating the problem. Foolish of me. :-\

Change it to:
ip = $(this).parent().siblings("td.ip").text();
http://jsfiddle.net/sRRn9/

Just needed a table element to wrap the table row. See here.

$('.remove').click(function(e){
e.preventDefault();
alert($(this).parent().prev().prev().html());
});
http://jsfiddle.net/6VFm5/

Try this
$(".remove").live('click', function(){ // remove ban
ip = $(this).parent("td.right").siblings("td.ip").html();
alert(ip);
});
Working demo

Javascript and CSS that can replace alerbox. Alert Box is so unprofessional [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Custom alert using Javascript
I want to create a confirmation message-"Do you want to proceed deleting? [Yes] or [No]".
I have a table with many data rows where the delete link is clicked in a particular row, the data in the row is deleted in the database. When the user clicks the delete option, i want to show the confirmation message first, so that user can validate his actions before deleting.
How can i do that dynamically using java script and css? I don't want to use alerBox() as it is ugly and is so unprofessional.
I am currently working for my school project-jsp and Java Servlet.
Hope any experts will help me. I love this forum as people here are very helpful. Advance thanks!

Actually you could do
window.alert = function(text) { /* some code to show a fancy dialog */};
window.confirm = function(question) { /* some code to show a fancy dialog and return the result */}
Problem is you're messing around where ought not mess around but the advantage is that even in 3rd party code any alerts() or confirms() will come up as your custom dialogs and the code will be simple to read (instead of $.dialog({options}) you just use a normal alert() or confirm call)

Because of the way JavaScript event handling works, there cannot exist any "drop-in" replacement for confirm, but popular JavaScript libraries such as jQuery UI include "modal dialog" features that can be used to achieve a similar effect.
http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/ is an example of how this works. Your "delete" button would not be set up to submit the form but rather open the modal dialog, which would submit the form if the user clicks OK.

If you want really to look good try this approach:Use for example jQuery and jQueryUI.
In your page put this:
<head>
<link rel="stylesheet" type="text/css" media="all" href="pathtoyourappfolder/jquery/css/black-tie/jquery-ui-1.8.4.custom.css" />
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-1.4.2.min.js'" ></script>
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-ui-1.8.4.custom.min.js'" ></script>
</head>
<body>
<div id="dialog-confirm" title="DELETE">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
Are you sure you want to delete this record?</p>
</div>
<table id="TblName">
<tr>
<td class="actions">
del
</td>
<td>...</td>
</tr>
<tr>
<td class="actions">
del
</td>
<td></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#TblName td.actions a.del').click(function(event){
$("#dialog-confirm").dialog('open');
});
}
</script>
</body>

You can add onclick="deleteRow(row_id, this)" to each delete link. Usage of row_id assumes the table is being generated dynamically from a given set and you have an identifier to provide and pick the data to delete. The this is useful to remove the <tr> using Javascript.
Oh and of course the function would make a dialog popup. Use jQuery for that.

You can try FaceBox and FacyBox
http://chriswanstrath.com/facebox/
http://www.bitbonsai.com/facybox/

You can rewrite the functionality. I am intending you wanna know what's happening and how to achieve effects, instead of using a library like jQuery. jQuery and derived solutions can make your life easier, but if you want to know HOW to make it, continue reading.
First, you should make your own "alertBox", with your preferred CSS styling (including it's position) [I suggest position absolute, z-index:2], then in the CSS let its display property as hidden.
OK, now when user clicks your delete link/button you trigger a native javascript confirm dialog. Replace this confirm call, to a function that will display your own styled menu. changing its CSS display property from hidden to "block".
On your own styled menu buttons Yes/No, attach events, one for each button, with respective action (hide menu, or deleting row, removing current line from table...).
Well, that's the idea. Hope you enjoy.