We Keep Coding

Poor performance when adding large number of elements to page

I have produced a table but I am using <div>s instead of <tr>s and <td>s. here is an example:
<div class="tbl tbl1">
<div class="thead">
<div class="tr">
<div class="td colTitle" style="width: 120px"><span>Title</span></div>
<div class="td colLink" style="width: 190px"><span>Link</span></div>
<div class="td colSize numeric" style="width: 75px"><span>Size(MB)</span></div>
<div class="td colUploadDate" style="width: 75px"><span>UploadDate</span></div>
<div class="td colOpen" style="width: 50px; max-width: 50px;"><span>Show</span></div>
</div>
<div class="tr">
<div class="td colTitle">
<input type="text" class="Filter" />
</div>
<div class="td colLink">
<input type="text" class="Filter" />
</div>
<div class="td colSize">
<input type="text" class="Filter" />
</div>
<div class="td colUploadDate">
<input type="text" class="Filter" />
</div>
<div class="td colOpen">
</div>
</div>
</div>
<div class="tbody">
</div>
</div>
I will fill tbody with an ajax function. After getting all data from the database, I store it into an array in client-side. I use below codes to fill my table using array arr. But when I have a large number of rows it takes a lot of time to display rows in my table.
var res = "";
arr.forEach(function (row) {
res += "<div class='tr' idattachment='" + row["IdAttachment"] + "' >" +
"<div class='td colTitle'>" + row["Title"] + "</div>" +
"<div class='td colLink'>" + row["Name"] + "</div>" +
"<div class='td colSize'>" + (row["Size"] / (1024 * 1024)).toFixed(2) + "</div>" +
"<div class='td colUploadDate'>" + row["UploadDate"] + "</div>" +
"<div class='td colOpen'><a class='link' href='uploads/" + row["Name"] + "'>Open</a></div>" +
"</div>";
});
$(".tbody").html(res);
Is there any more efficient way to load data into table?

Use virtual rendering to only render the rows that are actually in view.
Example with Clusterize.js:
var rows = [];
for (var i = 0; i < 10000; i++) {
rows.push('<tr><td>Row ' + i + '</td></tr>');
}
var clusterize = new Clusterize({
rows: rows,
scrollId: 'scrollArea',
contentId: 'tbody'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css" rel="stylesheet"/>
<div class="clusterize-scroll" id="scrollArea">
<table>
<thead class="thead">
<tr class="tr">
<td>
<span>Title</span>
</td>
</tr>
</thead>
<tbody id="tbody" class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading data…</td>
</tr>
</tbody>
</table>
</div>

I'm going to do a performance analysis. I will go step by step so you can try and do the same if you like the pattern. Keep in mind some times this analysis will say there is nothing obvious you can do.
Performance Goals
When ever you are trying to archive a level performance the first question should be what are we trying to do.
The normal scale is as follows.
< 16ms for animations
< 100ms for immediate reactions
100-300ms Slight perceptible delay
300-1000ms A task being done.
> 1s loss of Focus.
> 10s Frustration and abandons task
It seems you are doing a task so <= 1s is the Goal.
When caring about these Goal follow the data.
JS
You are using forEach seems to be the best option.
https://jsperf.com/for-vs-foreach/75
String Plus vs template literal, does not seem to matter.
https://jsperf.com/template-literal-vs-string-plus/7
Dot Notation vs Square Bracket Notation, does not seem to matter.
https://jsperf.com/dot-notation-vs-square-bracket-notation/5
JS Conclusion
The data supports your Javascript is as optimized as it can be.
CSS
CSS not provided.
CSS Conclusion
Inconclusive
Rendering
jQuery append vs html vs innerHTML
https://jsperf.com/jquery-append-vs-html-list-performance/24
It seems using innerHTML would be a better choice.
Rendering Conclusion
Change .html to innerHTML
Perception
When I render this code without CSS in a as you did not provide it. I start hitting 1s render times when I render 10,000 items.
You can paginate the rendering but if you do this you will need to load chunks that take < 16ms to render. Even if you think you don't have animation scrolling is an animation.
When you do your testing on low end device and get how many items can be rendered under 1 second do the following. I'm using 10k as I hit 1s on my device. 10,000 / 1000 * 15 This will give you the number of items you can load in 1s without disrupting animation.
Add a Spinner or something that shows work is being done. So the user thinks in terms of something is working which gains time from < 100ms to 300-1000ms.
Perception Conclusion
Paginate
Add Spinner or show work is being done.
That's all I got. Good Luck.

Give the browser some breathing space while loading.
var nextRow = 0;
var handler;
//Process a row in every 250ms
var handler = setInterval(function() {
//Select next row
var row =arr[nextRow];
var res= "<div class='tr' idattachment='" + row["IdAttachment"] + "' >" +
"<div class='td colTitle'>" + row["Title"] + "</div>" +
"<div class='td colLink'>" + row["Name"] + "</div>" +
"<div class='td colSize'>" + (row["Size"] / (1024 * 1024)).toFixed(2) + "</div>" +
"<div class='td colUploadDate'>" + row["UploadDate"] + "</div>" +
"<div class='td colOpen'><a class='link' href='uploads/" + row["Name"] + "'>Open</a></div>" +
"</div>";
//Append
$(".tbody").appendChild(res);
//Move on
nextRow++;
//Exit at the end
if (arr.length === nextRow)
clearInterval(handler);
}, 250);
This will keep adding your data to the table until the end.
Also remember, string concatenation is expensive. You could even try the appendChild method without the interval.

adding html image using jquery to div/table

i'm new to JQuery and currently using it in Visual Studio 2013.
I want to ask how do I add img tag into a table or div using JQuery?
Ie. i have a div and i want to dynamically create image using jquery. OR
i have a dynamically created table in a dynamically created div, and I want to add an image to one of its row.
I've tried this in jsfiddle (http://jsfiddle.net/3C7UD/1/)
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" width:"225px" height:"225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" width:"225px" height:"225px" />');
but no image.. I also have tried that in visual studio project but the same (no image).
I can't found any tutorial about adding image, and the solutions I found in this forum haven't work for me by far....

You wrote <img src:"..." /> instead of <img src="..." /> which is the reason why your code isn't showing the image:
Corrected fiddle : http://jsfiddle.net/Zword/3C7UD/3/
Corrected part of code:
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width:"225px" height:"225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width:"225px" height:"225px" />');

HTML attributes are specified with =, not :.
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width="225px" height="225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width="225px" height="225px" />');
Updated demo: http://jsfiddle.net/3C7UD/5/

try changing this 2 lines:
var img = "<img src='"+imgLink+"' />";
and the last one:
$('#divid').append(img);

Change your code to :
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" style="width:225px; height:225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" style = "width:225px;height:225px" />');

Change your:
><img src:"
to
><img src="

jQuery - preserve html elements after change

I'm using Ruby on Rails to implement a simple edit/submit button to replace the content of h4 that has class named "special-content".
Here is my code for rhtml:
<div class="modal-body" style="height: 280px !important;">
<%= image_tag("special/turkey.png", :alt => "turkey", :class => "special-img") %><br>
<h4 class="special-content">#93 Turkey, Avocado & Cheese</h4><h4> with Small Sized Drink & Chip</h4>
</div>
and here is my code for jQuery, which is implemented right above the rhtml code:
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "#edit", function() {
$('#edit').replaceWith('<a class="btn" id="submit">Submit</a>');
$('.special-content').replaceWith('<input class="special-content-edit" type="text" value="' + $('.special-content').html() + '">');
$('.special-img').replaceWith('<input class="special-img-edit" type="text" value="' + $('.special-img').attr('src') + '">');
});
$("body").on("click", "#submit", function() {
$('#submit').replaceWith('<a class="btn" id="edit">Edit</a>');
$('.special-img-edit').replaceWith('<img class="special-img" src="' + $('.special-img- edit').val() + '">');
$('.special-content-edit').replaceWith('<h4 class="special-content">' + $('.special-content-edit').val() + '</h4>');
});
});
</script>
The jQuery should allow users to replace the h4 content. Everything works fine. However, if I navigate to another link and come back to the page, the h4 content changes back to the original content ("#93 Turkey, Avocado & Cheese"). How can I preserve the changed element?

Add space before image, javascript

I am trying to put some space to the left of the radio-play.gif button. What can add to this code to achieve that?
Thanks!
// Last (only one on Mac) row has the VCR buttons.
//
s += '<td>';
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>';
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
if (player != 'MP3')
s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'stop\')">';
s += '</td></tr>';
document.write(s);
// removing mute button
var myEl = document.getElementsByName("mute");
var elP = myEl[0].parentNode.parentNode;
elP.removeChild(myEl[0].parentNode);

Either set a margin to the img tag (it needs to be display:inline-block; for this) or add
a (No breaking space).
Probably the margin would be my preferred way, e.g.
img{
display:inline-block;
margin-left:5px;
}
or
s += ' <img alt="PLAY" ...
Btw.: The correct way would be, to create the <td> and <img> elements via document.createElement and then attach them to the dom. (Or use jquery, it's a bit simpler there)

You can literally put a space character infront of it. I would do it using CSS. Give the image a class class="whatever" and then in CSS:
.whatever {
margin-left: 10px;
}
Since you're doing it inline already, you could just add the margin in the inline css.

s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
OR, more correctly,
s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(\'playnow\')">';

If "space" means visually rendered space to the left of the rendered button element, this would typically be done with CSS. A common implementation would be that the image tag itself, or a container of the image tag, has a CSS class attribute that assigns space appropriately. For the CSS to do this, look into things like padding, margins, absolute vs relative positioning, the left or right attributes, etc.

How to add a jquery accordion dynamically to the page?

I have a div <div id="detailTable" width="100%"> in which i append different widgets sometimes other content, so in order for the jsp page not to look cumbersome, i am removing any existing elements inside detailTable and adding contents on some click. Now I want to add a jQuery accordion but it does not seem to work. Please provide a solution in this context. Thanks
Here is what i am doing to remove and add accordion in detailTable on button click
$('#detailTable').empty();
$('<div>')
.attr('id','healthCheckSpan')
.html('<div class="titleBlue">Health Check Summary</div>'+
'<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+
'<thead>'+
'<tr style="color :#FFFFFF;background-color: #8EA4BB">'+
'<th width="10%" align="center"><b>Recommendations</b></th>'+
'</tr>'+
'</thead>'+
'<tbody >'+
'<tr style="color :#2F5882;background-color: #EDF1F5">'+
'<td align="left" width="10%">'+
'<span id="recommendations">'+
'<div id="hcAccordion">'+
'<h3>Error</h3>'+
'<div><p id="errorhc">ERROR'+
'</p></div>'+
'<h3>Warning</h3>'+
'<div><p id="warninghc">WARNING'+
'</p></div>'+
'<h3>Info</h3>'+
'<div><p id="infohc">INFO'+
'</p></div>'+
'</div>'+
'<script>$(document).ready(function(){'+
'$(function() { $( "#hcAccordion" ).accordion(); });'+
'});</script>'+
'</span>'+
'</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>')
.appendTo('#detailTable');
My screenshot, here i just get a supposed to be accordion but no effects at all.

firstly you should remove that ugly html('....blabla....'); it's terrible...
put that in your normal html, and hide it, then copy it using clone(),
jquery
var html_data = $('#hidden_wrapper').clone().html();
$('#detailTable').empty();
$('<div>')
.attr('id','healthCheckSpan')
.html(html_data)
.appendTo('#detailTable').delay(1).queue(function(){
$( "#hcAccordion" ).accordion();
// now do not use ID as this would change if there are multiple ones... use classes .hcAccordion unless it is once.
});
html
<div id="hidden_wrapper">... accordion goes here...</div>

I think you should create your accordion and then just append or delete divs as you need to. So take
'$(document).ready(function(){'+
'$(function() { $( "#hcAccordion" ).accordion(); });'+
'});'
out of your dynamic HTML and have it run as the page loads.

Following code already added but js is not excuted as it is supposed to load on ready, which is i guess already raised.
Get rid of this code
'<script>$(document).ready(function(){'+
'$(function() { $( "#hcAccordion" ).accordion(); });'+
'});</script>'+
and call $( "#hcAccordion" ).accordion(); after ur append code