Develop Reference

JQuery - element exists in code but returns 0 when using .length()

I have spent hours trying to figure out why the $('#news-main-container').html(itemlist); isn't working and found that when I use alert($('[id="news-main-container"]').length); it returns 0, implicating the element doesnt exist but I can see the element in the code when I inspect element. The itemlist is alerting but it won't insert into #news-main-container because it thinks it doesn't exist. Does anyone know what could cause this?
//get cached News JSON
function getNewsCache(){
cache['news'] = JSON.parse(localStorage.getItem('news'));
var objCache = cache['news'].data;
objCache = JSON.parse(objCache); //Parse string to json
buildNewsList(objCache);
}
//build HTML list of news items
function buildNewsList(objCache){
var itemlist='';
$.each(objCache, function(i, jd) {
var newstitle = jd.title.rendered;
var newsexcerpt = jd.excerpt.rendered;
var newscontent = jd.content.rendered;
var newsimageid = jd.featured_media;
var thumbsrc = '';
itemlist = itemlist+'<div class="content-news-box" id="newsclick" data-newscontent="'+newscontent+'" data-newstitle="'+newstitle+'"><div class="news-thumb-img"><img height="150px" src="'+thumbsrc+'"/></div><div class="news-title">'+newstitle+'</div><div class="news-excerpt">'+newsexcerpt+'<img height="40px" class="news-arrow-right" src="img/icon-arrow-right.png"/></div></div>';
});
alert(itemlist);
alert($('[id="news-main-container"]').length); //returns 0 but I can see it in the code!!
$('#news-main-container').html(itemlist); //WHY DOESNT THIS WORK?!?!?!
}
$("#load-news").click(function(event){
$('#stage').html('');
$('#stage').css('background','none');
$("#stage").load("news.html");
var data = {};
//get cache
cache['news'] = JSON.parse(localStorage.getItem('news'));
getNewsCache();
});

I re-arranged my code so that everything comes within $( "#stage" ).load( "news.html", function() { } and that works. Thanks #The_ehT, your suggestion got me there!

Most likely you run this code before DOM is rendered, so element doesn't exist at the runtime. Try enclosing your code in "document ready"
$(function(){
// Your code
});

Loading an image but onload/onerror not working as expected

I have a div
<div id='cards'>
Which I want to fill with images based on some logic. But only when images are first loaded into memory. Otherwise, through onerror I wanna fill in some text..
function pasteCard(card, to){
if (typeof(card) == 'string')
card = [card];
var image = [];
for (var i = 0; i < card.length; i++) {
image[i] = new Image();
image[i].src = '/sprites/open/' + card[i] + '.png';
image[i].onload = function() {
pasteImage(to, image[i]);
}
image[i].onerror = function() {
pasteText(to, card[i]);
}
// alert(card[i]) #1
}
function pasteImage(to, image) {
to.append(image);
}
function pasteText(to, text) {
// alert(card[i]) #2
to.append(text);
}
}
pasteCard(['ABC123', 'DEF456', 'GHI789'], $('#cards'));
But this isn't working.
Problem/weirdness: If only #2 alert is active it returns nothing. But strangely if #1 alert is also active it does kinda work... (but still doesn't load my images, and mostly fails too when other code is involved)
Question: Why is it not working without #1 alert (at least in that jsfiddle)
suggestions?: what should I do?

Onload and onerror events are fired (executed) outside the scope of your function so your variables will be undefined. In the event method you have access to this which is the image object. You can set a data attribute to each image and access that in your error event.
Here is an example:
http://jsfiddle.net/7CfEu/4/

The callbacks are not in the same scope as your image array is - therefor you need to declare a variable then will "connect the scopes" and use it inside the callbacks
also the i variable probably changes until the callback is fired - so by using it inside the callback you will get undefined behavior
for (var i = 0; i < card.length; i++) {
var current_card = card[i];
var current_image = new Image();
current_image.onload = function() {
pasteImage(to, current_image);
}
current_image.onerror = function() {
pasteText(to, current_card);
}
current_image.src = '/sprites/open/' + current_card + '.png';
image[i] = current_image;
}
Fiddle: http://jsfiddle.net/7CfEu/6/
(Also - closing the div tag is never a bad idea)

Just in case anyone ends up here for same reason I did.
Was going crazy because onload and onerror were not firing in the page I was building. Tried copy pasting
var myimage = new Image();
myimage.onload = function() { alert("Success"); };
myimage.onerror = function() { alert("Fail"); };
myimage.src = "mog.gif" //Doesn't exist.
Which was working within codepen and random otherwise blank pages.
Turns out the problem I was having was that I was doing AJAX requests earlier in the page. This involved authorization which in turn involved a call to
setRequestHeader();
This was resulting in a net::ERR_FILE_NOT_FOUND error instead of the expected GET mog.gif 404 (Not Found)
This seemed to prevent proper triggering of events.
Revert with
xhr.setRequestHeader("Authorization", "");

Can I use javascript timer in a mobile browser

I am using IE in a mobile browser. I add a javascript function to a button that when the User clicks it says 'hello'.
This works.
I then add a timer.
On a desktop browser it works.
it does not work on my mobile browser.
This is my code. (note I Had just tried placing an alert('hi'); in the swapImages() and that did not work either.
var div = document.getElementById('divImage');
var imgCached = document.getElementById('imgCached');
document.execCommand("BackgroundImageCache", false, true);
function OnImgLoaded() {
img1.src = imgCached.src;
}
var interval = 30;
var _timer;
var _index = 0;
function test() {
_timer = setInterval('swapImages()', interval);
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my server url~/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
UPDATE!!
I had been runningit on Chrome desktop and not IE. I am mow testing it in IE desktop. I get the same erro so now I can debug.
The error is this line:
img1.src = imgCached.src;
It tells me:
Unable to get property 'src' of undefined or null reference
I have changed the code to:
var imgLive = document.getElementById('imgLive'); (I have renamed the img control)
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
I get the same error.
I look in Source and the control is correctly named..
Thanks

i'm not sure that the following line is valid in your mobile phone:
imgCached.src = 'http://127.0.0.1/Cloud/test/' ...
the timer executes successfully, but the image doesn't get the proper src since the device doesn't run a web server on it (unless you configured one).
and to answer your topic question, yes- you can use javascript timers in mobile browsers just like desktop browsers.
hope that helped.

First of all: Do you ever call the test function, that starts the timer?
Second: Maybe it's really document.execCommand("BackgroundImageCache", false, true), that fails - it may not be enabled in the mobile version of IE that you are using. You can check if it's enabled using the queryCommandEnabled function, see more here: http://msdn.microsoft.com/en-us/library/ie/ms536676(v=vs.85).aspx

FCKEditor: Access content area

I'm having problems doing this. I can't access the content area object. I need it to attach a click listener.
var oFCKeditor = new FCKeditor( editorName ) ;
oFCKeditor.BasePath = o.editorPath;
if (o.configPath) {
oFCKeditor.Config["CustomConfigurationsPath"] = o.configPath +"?" + ( new Date() * 1 ) ;
}
oFCKeditor.Width = '100%';
oFCKeditor.Height = '100%';
oFCKeditor.ReplaceTextarea();
oFCKeditor.setEnabled(true);
alert(oFCKeditor.EditorDocument);
alert(oFCKeditor.EditorWindow);
alert(FCK);
I also tried accessing there objects from different parts inside FCKEditor's code, but no luck.
What am I doing wrong? What is the usual way to do this?
Thanks
Edit: when I do this:
var oEditor = FCKeditorAPI.GetInstance(editorName) ;
alert(oEditor.EditorDocument);
after creating the editor it works, but only when I'm stepping through it with a debugger, otherwise it's undefined. So it's probably a timing issue. But where am I supposed to get that then?

http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/JavaScript_API#Events

<script type="text/javascript">
var object;
function FCKeditor_OnComplete(editorInstance)
{
object = editorInstance;
}
function Display()
{
alert( object.GetHTML());
}
</script>

Correct access of dynamic iFrame in IE

Plain JS - please no jQuery suggestions - it is for a bookmarklet that needs to use as plain JS as possible.
I hope someone KNOWS the answer since I cannot reliable create a fiddle.
This code will run in the scope of the page it is inserted in - it works perfectly in Fx6-9, safari and latest Chromes on Windows XP and OSX - Only IE gives me undefined when I try to access the iFrame
var zContainer = document.getElementById('zContainer');
if (zContainer==null) {
zContainer = document.createElement("div");
zContainer.id="zContainer";
document.body.appendChild(zContainer);
}
var zStuff = {}; // minimise window var footprint
zStuff.html = '<body>Hello</body>';
if (!zFrame) { // did we already have one?
zFrame = document.createElement("iframe");
zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
zIFS = zFrame.style; zIFS.border="0"; zIFS.width="500px"; zIFS.height="500px"; zIFS.backgroundColor="white"; zIFS.display="block";
zContainer.appendChild(zFrame); // append to div
zFrame = window.frames["zIframeName"]; // undefined in IE8 !!!!!
// zFrame = document.getElementById("zIframeId"); // undefined in IE8 !!!!!
zFrame.src="javascript:'<body></body>'"; // initialise body
zFrame.document.write(zStuff.html); // or zFrame.contentDocument.write
zFrame.document.close();
// zFrame.document.body.innerHTML=zStuff.html; // also does not work
// zFrame.src="javascript:'"+zStuff.html+"'"; // alternative method - either one works in Fx/Chrome
}
Thanks for any hints and for not voting this down. I hope the SO community will be as
helpful to me as I have been to it over the last year and a half...
Update - since the code I posted had some remnants of desperation, I changed it to
if (!zFrame) { // did we already have one?
zFrame = document.createElement("iframe");
zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
zIFS = zFrame.style; zIFS.border="0"; zIFS.width="500px"; zIFS.height="500px"; zIFS.backgroundColor="white"; zIFS.display="block";
zContainer.appendChild(zFrame); // append to div
zFrame.src="javascript:'<body></body>'"; // initialise body
zFrame.document.write(zStuff.html); // or zFrame.contentDocument.write
zFrame.document.close();
}
the above now replaces the page I am on with the code in the zStuff.html
instead of replacing only the iFrame content - it also broke in Fx
Now I have to do this in Fx which IE also does not mind but still replaces the window and not the iFrame
if (!zFrame) {
zFrame = document.createElement("iframe");
zFrame.scrolling="no"; zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
zIFS = zFrame.style; zIFS.border="0px none"; zIFS.width="549px"; zIFS.height="510px"; zIFS.backgroundColor="white"; zIFS.display="block";
zDRContainer.appendChild(zFrame);
zFrame.src="javascript:'<body></body>'";
setTimeout(function() {
var zFrame = window.frames["zIframeName"]; // this is needed for the document.write
zFrame.document.write(zStuff.html);
zFrame.document.close();
},100);
}

The hack I suggested in chat:
var a = setInterval( function(){
try{
zFrame.contentWindow.document.write(zStuff.html);
zFrame.contentWindow.document.close();
clearInterval(a);
}
catch(e){}
}, 10 );
Since it is not known when IE allows accessing contentWindow properties, this will keep trying until it is allowed.