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.

jQuery.attr('data-*') not work on IE8 (work on IE7) [duplicate]

This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The snippet we have is used twice.
The old code
<script type="text/javascript">
jQuery(document).ready(function() {
//...
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
// Write contents
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
//...
});
//...
// Change entry
jQuery('.blogentry').each(function(){
entryindex = jQuery(this).attr('rel');
if (entry == entryindex)
{
// The following works fine (so 'children' works fine):
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
// This does not work - only in IE 8, works in Firefox
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
//alert: 'undefined'
alert(jQuery(this).children('.Image_center').attr('src'));
//...
}
}
//...
});
</script>
The new code
Please see my own posted answer for the new code.
UPDATE:
This does not work if called inside of the click event!!!
jQuery('.Image_left').each(function(){
alert(jQuery(this).attr('src'));
});
SOLUTION TO GET THE IMAGE DATA:
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//... inside the eventhandler (entryindex = 'rel' of blogentry):
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
This works because it is not called inside the event handler and the sources are saved beforehand
BUT! I still cannot write the data, which is my aim:
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
UPDATE!!!
This is just crazy, I tried to write the data via usual javascript. This also works in FF, but no in IE8. Here really is some serious problem witt the attribute src:
document.getElementById('bild_left').src = imgleft;
document.getElementById('bild_center').src = imgcenter;
document.getElementById('bild_right').src = imgright;
alert(document.getElementById('bild_left').src);
This works in FF, but not in IE8, the attribute src remains undefined after writing! This seems to be not a jQuery problem at all!

children looks for immediate child elements only where as find looks for all the elements within it until its last child element down the dom tree. If you are saying find is working that means the element you are looking is not its immediate children.
Try to alert this jQuery(this).children('#Image_center').length see what you get.
FYI. Even when any element is not found jQuery will return an emtpy object it will never be null. So alert an emtpy object will always give you [object Object]. You should alwasy check for the length property of the jQuery object.
Try this
alert(jQuery(this).find('#Image_center').length);//To check whether element is found or not.

Bing Bang Boom,
imgright = jQuery(".Image_right",this).attr('src');

And why don't you easily use one working?
alert(jQuery(this).children('#Image_center').attr('src'));
change children to find
alert(jQuery(this).find('#Image_center').attr('src'));
It is probably the easiest solution, and when it work, why wouldn't you use it?

the problem is not in the attr('src') but in something else. The following snippet works in IE8:
<img id="xxx" src="yrdd">
<script type="text/javascript">
alert($('#xxx').attr('src'));
</script>
But if you for example change the the text/javascript to application/javascript - this code will work in FF but will not work in IE8

This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The new code
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
entryindex = jQuery(this).attr('rel');
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
// Write contents
jQuery('#entryimages').html('');
jQuery('#entryimages').html('<img class="rotate" width="132" height="138" id="bild_left" src="'+imgleft+'" /><img class="rotateright" width="154" height="162" id="bild_center" src="'+imgcenter+'" /><img class="rotate" width="132" height="138" id="bild_right" src="'+imgright+'" />');
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
});
So I am just not using .attr('src') in the event handler....

Try to make a delay:
jQuery(document).ready(function() {
setTimeout(function () {
jQuery('.blogentry').each(function(){
// your code...
});
}, 100); // if doesn't work, try to set a higher value
});
UPDATE
Hope, this code will work.
$('.blogentry img').each(function(){
alert( $(this).attr('src') );
});
UPDATE
I'm not sure, but maybe IE can't read classes with uppercase first letter...
Try to change ".Image_center" to ".image_center"
UPDATE
Check your code again. You definitely have some error. Try this jsfiddle in IE8, attr('src') is showed correctly. http://jsfiddle.net/qzFU8/

$(document).ready(function () {
$("#imgReload").click(function () {
$('#<%=imgCaptcha.ClientID %>').removeAttr("src");
$('#<%=imgCaptcha.ClientID %>').attr("src", "Captcha.ashx");
});
});

HTML count bar code error

Non-working code:
<html>
<body>
<p id="timeCountBar">-></p>
<script>
var timeCountBarText = document.getElementById("timeCountBar").innerHTML;
function subCount(){
timeCountBarText="-"+timeCountBarText;
document.getElementById('timeCountBar.innerHTML').innerHTML=timeCountBarText;
}
function countTime(){
for (int i; i < 100; i++){
setTimeout("subCount",10);
}
//something to do after counting has ended
}
countTime();
</script>
</body>
</html>
Only showed -> and nothing else happened.
What should I do?

SOLVED:
HTML:
<p id="timeCountBar">-></p>
JavaScript:
var timeCountBarText = document.getElementById("timeCountBar").innerHTML;
var sc = setInterval(function(){subCount()}, 10);
var i=0;
var subCount = function() {
timeCountBarText = "-" + timeCountBarText;
document.getElementById('timeCountBar').innerHTML = timeCountBarText;
i=i+1;
if(i==100){
clearInterval(sc);
}
}
You can see it working here:
http://jsfiddle.net/aniruddha153/Ezres/
You had 3 problems:
Logic was not entirely correct.
you should not use setTimeout. Instead you should use setInterval. And the right way to declare setInterval is
setInterval(function(){subCount()}, 10);
You need to use clearInterval
Reference: JavaScript Timing Events

You have two major problems.
The first is easily discovered by looking at the JavaScript console in your browser.
JavaScript is not JavaScript, int should be var.
The second is that setTimeout is not sleep. You need to call subCount either recursively with setTimeout or by using setInterval instead of using a for loop.

Get option.remove work in firefox javascript only

I have an class remover that works just fine in IE och Chrome, wont get any errors but in firefox. it dosent work at all.
Just get an error thats thas remove is not a function.
I been trying different ways to make it work, but none of them removes the class.
function removeDice(){
document.getElementsByClassName("dice")[0].remove(0);
}
An nice function that lets me remove dice classes one by one...
works in chrome but not firefox.
Been reading different methods here in stackoverflow and tried this
document.getElementById("dice").className =
document.getElementById("dice").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
But no luck either.
Any tips ?
Thanks

Have a try with this
Fiddle
function removeClass(classToRemove){
var elems = document.getElementsByClassName(classToRemove);
if (!elems) return;
for (var i=elems.length-1;i>=0;i--) {
var elem=elems[i];
var classes=elem.className.split(" ");
classes.splice(classes.indexOf(classToRemove),1);
elem.className=classes.join(" ");
}
}

Use removeAttribute()
document.getElementById("dice")[0].removeAttribute("class");
UPDATED:
Do this way:-
function removeClassFromAllElements(){
var objClass = document.getElementsByClassName("YOUR-CLASS-NAME");
var tempLen = objClass.length;
for (i=0; i<tempLen; i++) {
objClass[0].removeAttribute("class");
}
}
removeClassFromAllElements();
Refer LIVE DEMO

jQuery working in Firefox, Safari but not in Chrome

I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas?
fiddle here, changed code still no change to behaviour.
http://jsfiddle.net/qAfwJ/
$(document).ready(function(){
//custom toolTip Written by CASherwood but not working in ie9/chrome
var ShowId;
var id;
var contentholder = $(".contentBox");
var toolTip = $(".info");
var idHashString = '#info';
var idString = 'id';
function showToolTip(name, id){
id = name + id;
$(id).fadeIn(1000);
}
function hideToolTip(name, id){
id = name + id;
$(id).fadeOut(1000);
}
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
});

There are a few things here,
You are setting a variable var toolTip = $(".info");
And then using this same variable to add a function to it.
What you are doing here is actually
$($(".info")).mouseover(
Instead of
var toolTip = $(".info");
toolTip.mouseover(
Also you might consider using
jquery.hover(handlerIn(eventObject) , handlerOut(eventObject) );
http://api.jquery.com/hover/

Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.
var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
...
});
Basically what evaluates to is this -
$($(".contentBox"))
That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.
var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
...
});
When you are constructing selectors from strings and variables, you should do so in a similar way to this -
var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);

I'd start by changing
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
to
toolTip.mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
contentholder.mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
since your toolTip and contentholder variables are already jquery objects.

I'm not sure and haven't tested it, but what if you try to move the two functions (showToolTip() and hideToolTip()) before or after the $(function(){});
The might get seen as inner functions of some sort instead of global functions and that might be a thing.