Loading image is not displaying on dynamically created HTML page.

Posted by Vishalneeraj-24503 under JavaScript on 1/19/2018 | Points: 10 | Views : 1300 | Status : [Member] [MVP] | Replies : 1
Hi All,
I am dynamically creating HTML page to show User Information. I have added loading image to show the image until data loads properly.
However image is not displaying. I tested the same in other application where there are static/physical HTML pages where loading image is displaying properly but in this application image is not showing.
It may be due to pages creation dynamically.
I have shown image after window load function and hide image after my data loads properly.
Earlier i was using document.ready function but have read somewhere that document.ready does not wait for images, css to load on DOM. Then i used window.load method but still image is not showing.
I can not use jQuery fadein/fadeout method because these methods takes seconds as a parameter and i do not know when my data loads.
I am using Sqlite Database and it's slow. Sometimes it takes 10 seconds to load data but sometimes it take less or more than expected.
Please note that , when any issue occurs on page then image displays.

function BuildUserPopupHTML(Emp_ID) 
var html = '<!DOCTYPE html>\r\n<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />\r\n<html>\r\n<head>\r\n<meta charset="utf-8" /><title></title>';
html += '<script src="js/jquery-1.9.1.min.js"></script>';
html += '<body>';
html += '<script>';
html += '$(window).load(function() {n';
html += '$(\'#img_loader\').show();';

html += 'var Employee_ID = ' + Emp_ID + ';';
html += 'var filtered_json_data_unique_users = FilterJsonByEmpID(Employee_ID);';
html += 'var filtered_json_data_unique_skills = FilterJsonByEmpID(Employee_ID);';
html += 'var table = ""';
html += 'table += "<table id=\'tbl_user'>"';
html += 'table += "<tr><td cospan = \'2\'>Unique Users :</td><td><a id=\'lnk_unq_users\' onclick=\'ShowOrHidePanel(div_unique_users); return false;\' href=\'javascript:ShowOrHidePanel(div_unique_users);\' >" + filtered_json_data_unique_users.length + "</a></td></tr>"';
html += 'table += "<tr><td style=\'color :#636363;\'>Unique Skills :</td><td style=\'color :#636363;\'><a id=\'lnk_unq_skills\' onclick=\'ShowOrHidePanel(div_unique_skills); return false;\' href=\'javascript:ShowOrHidePanel(div_unique_skills);\'>" + filtered_json_data_unique_skills.length + "</a></td></tr>"';
html += 'table += "</table>"';

html += '$("#div_unique_users").html(table)';

html += 'document.getElementById("div_unique_users").style.display = "block"';

html += 'RenderUserKendoGrid(filtered_json_data_unique_users)';

html += 'RenderSkillsGrid(filtered_json_data_unique_skills)';

html += '$(\'#img_loader\').hide();\r\n';
html += 'ResizeContentsByWindowSize(div_Parent)';
html += '});';
html += '</script>';
html += '<style>';
html += '.loading { height: 50px; width:50px; position: fixed; z-index: 9999; left: 50%; top: 50%; margin: -25px 0 0 -25px; opacity:.8; display:block; }';
html += '</style>';
html += '<div id="div_Parent" style="width: 805px; height: 450px; border: 0px solid darkgray;">';

html += '<div id=\'div_unique_users\' style=\'width: 792px; border: 1px solid darkgray; height:95px; padding-left:


Posted by: Jayakumars on: 1/19/2018 [Member] [MVP] Bronze | Points: 25


this is RenderUserKendoGrid 3rd party tool ?

we canot checking in our system becos we are using some other tool so

can you share your sample attachment (source file) for this

i will check and update you

Mark as Answer if its helpful to you


Vishalneeraj-24503, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response