We Keep Coding

Why my html element is not shown in the following function

my goal is to display a loading curtain when a query to Quick-Base takes too long.
I have the following code that I thought it was going to work but it somehow does not. Everything works except for the loading curtain because it is never executed when it should be.
My code:
<script>
window.onload = function(){
// .. more code here not related ...
function selectedValueChanged() {
$('#curtain').show();
var e = document.getElementById("record_id_select");
var value_selected = e.value;
var CO_picked_record_id = parseInt(value_selected);
var query_CO_line_details = "{'"+related_CO_fid+"'.EX.'"+CO_picked_record_id+"'}";
var records = getRecords(table_CO_line_details_DBID,query_CO_line_details);
var data_array = createArrayFromRecordsDrilled(records,CO_detail_record_categories);
var table_div = tableCreate(data_array,'table_container_1',"Please Enter Quantities",headerList);
$('#table_container_1').replaceWith(table_div);
$('#curtain').hide();
}
}
</script>
<div id='curtain' style='position:absolute;top:0;left:0;margin:0;background:rgba(255,255,255,.3); display:none; width:100%;height:100%;'><img id ="loading_text" src="loader.gif"></div>
</body>
The code works but the curtain is never shown even if the query takes a couple of seconds (as much as 6 seconds). If I comment out the line "$('#curtain').hide();" I can see the loading curtain working as expected but only after the query has finished. It is as if the function is not been executed line by line but it waits first to complete the query and then to show the curtain. I'm sure I'm missing something but I don't know what. Thank you.

use this instead(no need to add any HTML to page) :
function showLoading() {
if (document.getElementById("loadingDiv"))
return;
var div = document.createElement("div");
var img = document.createElement("img");
var span = document.createElement("span");
span.appendChild(document.createTextNode("Loading ..."));
span.style.cssText = "margin-top:50vh;font-family:IranSans;direction:rtl;color:#f78d24;"
img.src = "/images/LoadingImage.png";
img.style.cssText = "display:block;margin:auto;margin-top:calc(50vh - 64px);width:128px;height:128px;"
div.style.cssText = "position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,0.85);top:0px;left:0px;z-index:10000;text-align:center";
div.id = "loadingDiv";
div.appendChild(img);
div.appendChild(span);
document.body.appendChild(div);
}
function hideLoading() {
var div = getElementById("loadingDiv");
if (div)
document.body.removeChild(div);
}

The solution as #keith suggested was to "transform" the getRecords function from synchronous to asynchronous.
I ended up making the whole function selectedValueChanged() "asynchronous" by using the setTimeout trick.
One solution that worked for me was the following:
function selectedValueChanged() {
var e = document.getElementById("record_id_select");
var value_selected = e.value;
var CO_picked_record_id = parseInt(value_selected);
var query_CO_line_details = "{'"+related_CO_fid+"'.EX.'"+CO_picked_record_id+"'}";
var records = getRecords(table_CO_line_details_DBID,query_CO_line_details);
var data_array = createArrayFromRecordsDrilled(records,CO_detail_record_categories);
var table_div = tableCreate(data_array,'table_container_1',"Please Enter Quantities",headerList);
$('#table_container_1').replaceWith(table_div);
}
}
function loadingSelectedValueChanged(callbackFunct){
setTimeout(function(){
callbackFunct()
$('#curtain').hide();
},10);
}
function selectedValueChangedUP() {
$('#curtain').show();
loadingSelectedValueChanged(selectedValueChanged);
}
And now instead of calling selectedValueChanged, I call selectedValueChangedUP.
What SetTimeout does is to execute the function that receives as parameter after a given amount of time. This process is done in an "asynchronous" way.

Load map from myshiptracking after page load

In addition to this topic execute a javascript after page load is complete I noticed the solution didn't work for loading a map. I do have a similar use case. However, if I follow the script the script needed doesn't load.
I want to load a map after the loading of the page is finished, however I do see the script in the page source, but no script is executed.
The source is:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
In the page source I see:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
Can someone please point me in the direction on how to get the script executed? I also assumed that the script should be appended to the 'body' instead of the 'head'm but I'm not sure about it.
Thanks!
Edit based change of head to body:
<script>
var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
window.onload = function() {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("body")[0].appendChild(element );
}
</script>

So, finally I managed to solve the problem and got the desired map in my browser... using the following HTML+JS code (which you can run with the button below):
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
function loadMap() {
var element = document.createElement("script");
element.setAttribute("id", "myshiptrackingscript");
element.setAttribute("async", "");
element.setAttribute("defer", "");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementById("mapContent").appendChild(element );
}
window.onload = loadMap
console.log('Registered onload')
</script>
</head><body>
<div id="mapContent" />
</body></html>
Two points of attention:
you should add the created script tag as child of a tag belonging to the body ot the page (I used <div id="mapContent"/> and getElementById to access it)
you should load the HTML page through a http:// URL, not through a a file:// one: with the latter you get an error with message like "Browser does not support embedded objects"
I hope this can help you to solve the problem in you real case!

There are many ways to invoke your function when the page has loaded.
My vanilla's js tool of choice most of the time is:
window.addEventListener('DOMContentLoaded', function(){
//your bindings and functions
}
That way of proceeding is preferred to your onload method as otherwise, you won't be able to attach multiple events when the DOM loads completely.

Try this:
window.onload=function(){
document.write('<script src="http://www.myshiptracking.com/js/widgetApi.js>
</script>');
}

wrap your javascript code with this:
if(document.readyState === 'complete') {
// good to go! Put your code here.}

Show popup one time

I have popup that appears when you go to my site - it's a warning label. I only want it to appear on the first visit and not again. Currently every time I click refresh or go back to the homepage it appears.
Here is the JavaScript code (As soon as someone clicks the 'Warning Button Enter'):
<script>
"use strict"
warning_popup();
function warning_popup() {
addEventListener('load', start);
function start() {
// popup block background
var bkg = document.createElement("div");
bkg.id = "warning-background";
document.body.insertBefore(bkg, document.body.firstChild);
// popup window
var box = document.createElement("div");
box.id = "warning-window";
document.getElementById("warning-background").appendChild(box);
// warning title
var title = document.createElement("div");
title.id = "warning-title";
title.className = "page-title-wrapper page-title";
title.innerHTML = "<h1>Binge Eating Disorder<\h1>";
document.getElementById("warning-window").appendChild(title);
// warning description
var desc = document.createElement("div");
desc.id = "warning-desc";
desc.className = "page-desc";
desc.innerHTML = "<p>Binge Eating Disorder is disease that I take very seriously.<p>";
document.getElementById("warning-window").appendChild(desc);
// warning button enter
var enter = document.createElement("div");
enter.id = "warning-enter";
enter.className = "page-desc";
enter.innerHTML = "<p>View</p>";
document.getElementById("warning-window").appendChild(enter);
// warning button back
//var back = document.createElement("div");
//back.id = "warning-back";
// back.className = "page-desc";
// back.innerHTML = "<p>Take Me Back</p>";
// document.getElementById("warning-window").appendChild(back);
// listens for button clicks
document.querySelector("#warning-enter").addEventListener("click", function() {
document.querySelector("#warning-background").style.visibility = "hidden";
});
document.querySelector("#warning-back").addEventListener("click", function() {
window.history.back();
});
}
}

I think localStorage can solve your problem. Consider this example:
window.onload = init;
function init() {
if (localStorage.getItem('first_time') === "undefined" || localStorage.getItem('first_time') === null) {
// Set the storage key and show the warning—but only this one time
localStorage.setItem('first_time', true);
showWarning();
}
}
function showWarning() {
console.log("Showing warning...");
}
Loading this code will only fire the showWarning function one time.
https://jsfiddle.net/ez2qqpbx/

Execute jQuery after changing DOM

This piece of code adds images to the DOM after dragging them into a div-element.
var showImage = function (ev) {
var file = ev.target.file;
var thumb = new Image(100,100);
thumb.src = ev.target.result;
thumb.className = 'thumbFoto';
thumb.title = file.name;
thumb.alt = file.name;
var anchor = document.createElement('a');
anchor.className = 'thumbLink';
anchor.href = ev.target.result;
anchor.rel = 'album1';
anchor.title = file.name;
anchor.appendChild(thumb);
dropZone.appendChild(anchor);
}
This code is linked to the page using
<script type="text/javascript" src="js/code.js"></script>
After the images are added to the webpage, I would like preview them using Fancybox.
When the page is loaded (before I dragged any image onto it), this script is executed in the html-header:
<script type="text/javascript">
$(document).ready(function() {
/* Apply fancybox to albums */
$("a.thumbLink").fancybox();
});
</script>
Now how do I make sure I can preview the recently added images using Fancybox?

I assume you use jQuery UI draggable object, you can call your fancybox on stop() event of your draggable object, like this:
$( ".selector" ).draggable({
stop: function( event, ui ) {
$("a.thumbLink").fancybox();
}
});
EDIT:
Based on your code you can simply put your fancybox caller in function of showFileInList, like this:
var showFileInList = function (ev) {
var file = ev.target.file;
if(document.getElementById("fileDropText")){
var textToBeRemoved = document.getElementById("fileDropText");
var imageToBeRemoved = document.getElementById("fileDropImg");
textToBeRemoved.parentElement.removeChild(textToBeRemoved);
imageToBeRemoved.parentElement.removeChild(imageToBeRemoved);
}
var thumb = new Image(100,100);
thumb.src = ev.target.result;
// var thumb = createThumb(ev.target.result);
thumb.className = 'thumbFoto';
thumb.title = file.name;
thumb.alt = file.name;
var anchor = document.createElement('a');
anchor.className = 'thumbLink';
anchor.href = ev.target.result;
anchor.rel = 'album1';
anchor.title = file.name;
// anchor.addEventListener("click", showImagePreview, false);
anchor.appendChild(thumb);
// fileList.insertBefore(anchor, dropZone);
dropZone.appendChild(anchor);
// show fancybox
$("a.thumbLink").fancybox({type: "inline", href: "#fileDrop"});
}
See working code HERE

Try routing all of your DOM changes through a single object using the "Chain of Responsibility" pattern. That way the object can keep track of any changes to the dom. Then I would use ConversationJS to fire a function that does whatever you want on DOM change: https://github.com/rhyneandrew/Conversation.JS

Javascript object required error in IE

i'm creating mulitple planet objects in javascript to handle animation.
The animation works fine for each planet but i am getting errors in IE 6/7 saying "object required on line 15 char 2"
Code:
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
function init()
{
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
earthObj.style.position= 'relative'; //error on this line
earthObj.style.left = '80px';
earthObj.style.top = 300px';
}

Before trying to call an object, test if it exists.
earthObj = document.getElementById('earth');
if(!earthObj) {
alert("Could not find Earth");
return;
}

I am on mac and don't have any IE to try. Do you get the same error, if you change the code like this:
function init() {
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
!earhtObj && alert("There is no element with id 'earth'");
earthObj.style.left = '80px';
earthObj.style.top = '300px';
earthObj.style.position= 'relative';
}
I came accros this post and thought if the error might be connected with IE6/7 bug that triggers when some global variable gets the same name as dom object.
I also moved the earthObj.style.position= 'relative'; to the end of block and expect the error to reaper at earthObj.style.left = '80px';

I've found that in IE, the function works if the script is after the defined/generated HTML elements.
i.e. place the script at the end of the HTML document, rather at the beginning, or use jquery's ready function:
$(function() {
mercObj = document.getElementById('mercury');
});