/    Sign up×
Community /Pin to ProfileBookmark

document not ready problem

Copy linkTweet thisAlerts:
Jun 03.2008

Hi guys,

I got a javascript file like below :

var nl = document.createElement(‘a’);
nl.setAttribute(‘href’, ‘http://localhost:8080/pikepier/sendPage.html?xf=http://localhost:8080/pikepier/pikepier.xml‘);
nl.setAttribute(‘title’, ‘Pikepier’);
nl.setAttribute(‘rel’, ‘gb_page_center[500,550]’);
nl.innerHTML = ‘Send Email’;
var pp = document.getElementById(‘pikepier’);
pp.appendChild(nl);

and my html page is like below:

<html>
<body>
<head></head>
<div id=”pikepier”></div>
<script type=”text/javascript” src=”scripts/pikepier.js”></script>
</body>
</html>
and everythings just work fine.

However, when I put the

<script type=”text/javascript” src=”scripts/pikepier.js”></script>

with the head section, the

document.getElementById(‘pikepier’);

is null.

Please advice. Thanks in advance !

regards,
Mark

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJun 03.2008 — In the second case the code tries to refer an element before it was actually loaded (as the document's loading process is sequential, from top to bottom).

Most of the time, javascript codes must be nested in [COLOR="Red"]functions[/COLOR], and the functions should be called by [COLOR="Blue"]events[/COLOR]. Your case:
<i>
</i>window.[COLOR="Blue"]onload[/COLOR]=[COLOR="Red"]function()[/COLOR]{[COLOR="Red"]createEl()[/COLOR]}
function [COLOR="Red"]createEl()[/COLOR]{
var nl = document.createElement('a');
nl.setAttribute('href', 'http://localhost:8080/pikepier/sendPage.html?xf=http://localhost:8080/pikepier/pikepier.xml');
nl.setAttribute('title', 'Pikepier');
nl.setAttribute('rel', 'gb_page_center[500,550]');
nl.innerHTML = 'Send Email';
var pp = document.getElementById('pikepier');
pp.appendChild(nl);
}

That means your function will be called when the whole global [B]window[/B] object finishes the loading (when the last </html> end tag is loaded)
Copy linkTweet thisAlerts:
@kmthienauthorJun 05.2008 — Hi Kor,

I'm using this http://orangoo.com/labs/GreyBox/ as my pop-up window. When I create a link like below manually :

<a href="http://localhost:8080/pikepier/sendPage.html?xf=http://localhost:8080/pikepier/pikepier.xml" title="Pikepier" rel="gb_page_center[500,550]">Pikepier</a>

the ajax windows popup !

however, when I create the link dynamically like

window.onload=function(){createEl()}

function createEl(){

var nl = document.createElement('a');

nl.setAttribute('href', 'http://localhost:8080/pikepier/sendPage.html?xf=http://localhost:8080/pikepier/pikepier.xml');

nl.setAttribute('title', 'Pikepier');

nl.setAttribute('rel', 'gb_page_center[500,550]');

nl.innerHTML = 'Send Email';

var pp = document.getElementById('pikepier');

pp.appendChild(nl);

}

it just open the page in the same windows ...

appreciate if you could advice me on this issue ... thanks !
Copy linkTweet thisAlerts:
@kmthienauthorJul 23.2008 — hello, can someone out there please help on this ? thanks !
Copy linkTweet thisAlerts:
@Declan1991Jul 23.2008 — Because GreyBox runs through all the a tags onload (I think, I haven't the source code here in front of me), and when you add something after that, it's not caught.

The [url=http://orangoo.com/labs/GreyBox/FAQ/#q13]GreyBox FAQ[/url] tells you what method to use in that case.
Copy linkTweet thisAlerts:
@kmthienauthorJul 23.2008 — ok I tried the advance usage for greybox and it's now working fine for firefox, safari, and opera except stupid ie6/7, which still give me a new page instead of the pop-up ajax box ! sigh ...
Copy linkTweet thisAlerts:
@Declan1991Jul 23.2008 — The new code?
Copy linkTweet thisAlerts:
@kmthienauthorJul 29.2008 — yes exactly the new code like below:

window.onload=function(){createEl()}

function createEl(){

var nl = document.createElement('a');

nl.setAttribute('href', 'http://localhost/send.html?xf=http://localhost/pikepier.xml');

nl.setAttribute('title', 'Sdalk');

nl.setAttribute('onClick', "return GB_showCenter('pikepier', this.href)");

nl.innerHTML = 'pikepier by runtime';

var pp = document.getElementById('pikepier3');

pp.appendChild(nl);

}


-----------------------------------------------------------

<p>

<div id="pikepier3" style="margin-top:5px"></div>

</p>
×

Success!

Help @kmthien spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...