i can't use an enclosure to save a value into the future

[Jake Barnes]

What am I missing? I feel like I've done this before and it's always
been easy, and now I can't get it to work. I want to get every link on
the page that has the CSS class "more", and then assign a function to
it. The function is suppose to resize a div. I simply need to get the
id of the link into this function, but it's blank. What am I doing
wrong? The first alert(), below, has the id, but when the page loads
and click the link, the alert is blank.


Using Simon Wilson's addLoadEvent function.



addLoadEvent(function() {
// 10-07-07 - the designer wants to fit a lot of content onto the
profile.php page.
// She intends for each section to have a small box (I mean a div)
and when
// these boxes fill up, the PHP code will ensure a "more" button
appears at the
// end. All these divs have a fixed height assigned by the CSS, but
when the
// "more" button is clicked, the div should have height:auto, and an
AJAX
// call should fill it. The "more" buttons will all have a class of
"more",
// and their rel attributes will indicate which div we need to resize
and fill.


var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;
alert(idOfLinkMakingThisCall );

var functionToHappen = function() {
var thisLinkId = idOfLinkMakingThisCall;
alert(thisLinkId);
expandThisDivWithContent(thisLinkId);
return false;
}

if (document.getElementById(idOfLinkMakingThisCall)) {
document.getElementById(idOfLinkMakingThisCall).onclick =
function() {
functionToHappen();
}
}
}
});

 

[Jake Barnes]

What am I missing? I feel like I've done this before and it's always
been easy, and now I can't get it to work. I want to get every link on
the page that has the CSS class "more", and then assign a function to
it. The function is suppose to resize a div. I simply need to get the
id of the link into this function, but it's blank. What am I doing
wrong? The first alert(), below, has the id, but when the page loads
and click the link, the alert is blank.

Using Simon Wilson's addLoadEvent function.

addLoadEvent(function() {
// 10-07-07 - the designer wants to fit a lot of content onto the
profile.php page.
// She intends for each section to have a small box (I mean a div)
and when
// these boxes fill up, the PHP code will ensure a "more" button
appears at the
// end. All these divs have a fixed height assigned by the CSS, but
when the
// "more" button is clicked, the div should have height:auto, and an
AJAX
// call should fill it. The "more" buttons will all have a class of
"more",
// and their rel attributes will indicate which div we need to resize
and fill.

var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;
alert(idOfLinkMakingThisCall );

var functionToHappen = function() {
var thisLinkId = idOfLinkMakingThisCall;
alert(thisLinkId);
expandThisDivWithContent(thisLinkId);
return false;
}

if (document.getElementById(idOfLinkMakingThisCall)) {
document.getElementById(idOfLinkMakingThisCall).onclick =
function() {
functionToHappen();
}
}
}

});

I feel like I've forgotten something obvious about enclosures.
Shouldn't the id of the link be preserved in the onclick event of the
link?


I've redone the code and run into another problem. In the code below,
the id of a link get's attached to the onclick event, just like I
want, but the last id of the array (of links with class "more"), is
being assigned to the first link. I feel like I've missed something
obvious with my for() loop. But what?

addLoadEvent(function() {
var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;

alert(idOfLinkMakingThisCall);

referenceToALinkWhichHasTheClassOfMore.onclick = function() {
var idOfDivToBeAffected =
referenceToALinkWhichHasTheClassOfMore.getAttribute("rel");
var refToDiv = document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

if (refToDiv.style.height == "auto") {
refToDiv.style.height = "250px";
} else {
refToDiv.style.height = "auto";
}

return false;
}
}
return false;
});

 

[David Mark]

What am I missing? I feel like I've done this before and it's always

I take it you are having trouble with closures.

been easy, and now I can't get it to work. I want to get every link on
the page that has the CSS class "more", and then assign a function to
it. The function is suppose to resize a div. I simply need to get the
id of the link into this function, but it's blank. What am I doing
wrong? The first alert(), below, has the id, but when the page loads
and click the link, the alert is blank.

Using Simon Wilson's addLoadEvent function.

addLoadEvent(function() {
// 10-07-07 - the designer wants to fit a lot of content onto the
profile.php page.
// She intends for each section to have a small box (I mean a div)
and when
// these boxes fill up, the PHP code will ensure a "more" button
appears at the

That would be some trick for server side code. Define "fill up."

// end. All these divs have a fixed height assigned by the CSS, but
when the
// "more" button is clicked, the div should have height:auto, and an
AJAX
// call should fill it. The "more" buttons will all have a class of
"more",
// and their rel attributes will indicate which div we need to resize
and fill.

Such a design renders part of your content inaccessible to search
engines, agents without script, users with script disabled, etc.

var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;
alert(idOfLinkMakingThisCall );

var functionToHappen = function() {
var thisLinkId = idOfLinkMakingThisCall;
alert(thisLinkId);
expandThisDivWithContent(thisLinkId);
return false;
}

if (document.getElementById(idOfLinkMakingThisCall)) {
document.getElementById(idOfLinkMakingThisCall).onclick =
function() {
functionToHappen();
}
}
}



});

There are several things wrong with that code. As I see you posted a
follow-up, I will reserve comments for your revision.

 

[David Mark]

I've redone the code and run into another problem. In the code below,
the id of a link get's attached to the onclick event, just like I
want, but the last id of the array (of links with class "more"), is
being assigned to the first link. I feel like I've missed something
obvious with my for() loop. But what?

addLoadEvent(function() {
var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;

alert(idOfLinkMakingThisCall);

referenceToALinkWhichHasTheClassOfMore.onclick = function() {
var idOfDivToBeAffected =
referenceToALinkWhichHasTheClassOfMore.getAttribute("rel");
var refToDiv = document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

if (refToDiv.style.height == "auto") {
refToDiv.style.height = "250px";

Unless the content that "fills in" these div's is an image with a
height of 250px and the div's have no borders or padding, you are
going to have problems.

} else {
refToDiv.style.height = "auto";
}

return false;
}
}
return false;



});

I see what you are trying to do, but you are not doing it right. You
are also creating memory leaks. See the FAQ page on closures.

How about something like this:


referenceToALinkWhichHasTheClassOfMore.onclick =
function() {
var idOfDivToBeAffected =
this.getAttribute("rel");
var refToDiv =
document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

....

And when the loop ends, set referenceToALinkWhichHasTheClassOfMore
(and the array) to null. Alternatively, move the onclick handler
function outside the load function as you don't need to create
closures.

 

[Thomas 'PointedEars' Lahn]

What am I missing? I feel like I've done this before and it's always
been easy, and now I can't get it to work. I want to get every link on
the page that has the CSS class "more", and then assign a function to
it.
The function is suppose to resize a div.
I simply need to get the id of the link into this function,

You want to use event bubbling instead of that misguided nonsensical
"Unobtrusive JavaScript" approach:

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function handleClick(e)
{
var t = e.target || e.srcElement;
if (t)
{
if (/\bmore\b/i.test(t.className))
{
... t.id ...
}
}
}
</script>
</head>

<body onclick="if (typeof event != 'undefined') handleClick(event);">
...

[...]
Using Simon Wilson's addLoadEvent function.

Who is obviously nobody I should have heard of.

addLoadEvent(function() {
// 10-07-07 - the designer wants to fit a lot of content onto the
profile.php page.
[...]

You might have more luck by posting (easily) legible code. It will help to
use a client-side newsreader application instead of Google Groups' faulty
Web interface to Usenet newsgroups.


PointedEars

 

[Jake Barnes]

You want to use event bubbling instead of that misguided nonsensical
"Unobtrusive JavaScript" approach:

Just curious, but why is Unobtrusive Javascript misguided and
nonsensical?

Thanks for your reply, of course.

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function handleClick(e)
{
var t = e.target || e.srcElement;
if (t)
{
if (/\bmore\b/i.test(t.className))
{
... t.id ...
}
}
}
</script>
</head>

<body onclick="if (typeof event != 'undefined') handleClick(event);">
...

[...]
Using Simon Wilson's addLoadEvent function.

Who is obviously nobody I should have heard of.

addLoadEvent(function() {
// 10-07-07 - the designer wants to fit a lot of content onto the
profile.php page.
[...]

You might have more luck by posting (easily) legible code. It will help to
use a client-side newsreader application instead of Google Groups' faulty
Web interface to Usenet newsgroups.

PointedEars

 

[Jake Barnes]

use a client-side newsreader application instead of Google Groups' faulty
Web interface to Usenet newsgroups.

I have Thunderbird on my home computer, but I'm often traveling, and
then I have to use Google Groups.

 

[Thomas 'PointedEars' Lahn]

Just curious, but why is Unobtrusive Javascript misguided and
nonsensical?

Just the key points; I think we have already discussed it at length here:

- Relies on inherently error-prone proprietary properties that are only
supported for backwards compatibility with DOM Level 0 (NN3/IE3) where a
well-supported and (mostly) standards compliant alternative supported
since DOM Level 0 and specified in DOM Level 2 Events is already
available.

- Usually adds the event listener code to every fitting element regardless
whether or not that element is ever subject to the event, or whether the
event bubbles. That also contributes to its general error-proneness and
inefficience.

Thanks for your reply, of course.

Thanks for quoting properly next time; that is possible even with Google Groups.


PointedEars

 

[Jake Barnes]

I've redone the code and run into another problem. In the code below,
the id of a link get's attached to the onclick event, just like I
want, but the last id of the array (of links with class "more"), is
being assigned to the first link. I feel like I've missed something
obvious with my for() loop. But what?

addLoadEvent(function() {
var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");

for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;

alert(idOfLinkMakingThisCall);

referenceToALinkWhichHasTheClassOfMore.onclick = function() {
var idOfDivToBeAffected =
referenceToALinkWhichHasTheClassOfMore.getAttribute("rel");
var refToDiv = document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

if (refToDiv.style.height == "auto") {
refToDiv.style.height = "250px";

Unless the content that "fills in" these div's is an image with a
height of 250px and the div's have no borders or padding, you are
going to have problems.

Well, I'll pass that note along to the designer. I think she was
thinking that we would use PHP on the server to restrict how much text
gets into those boxes, and we could restrict it enough to cover most
situations regarding different browsers, fonts, and sizes. But yes, if
an older reader hits "Expand text size" 4 times, the design will be
blown out. By the way, the divs have no padding. Saves us one
headache.

I see what you are trying to do, but you are not doing it right. You
are also creating memory leaks. See the FAQ page on closures.

If I go to Google and search for "Javascript FAQ", Google suggests at
least 4 sites with that name. I would assume you mean the FAQ at
Jibbering, but when I go here:

www.jibbering.com/faq

And hit control-F and then type the word "closure", FireFox tells me
that it is not on the page.

Which FAQ did you mean? Which one covers closures?

How about something like this:

referenceToALinkWhichHasTheClassOfMore.onclick =
function() {
var idOfDivToBeAffected =
this.getAttribute("rel");
var refToDiv =
document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

Thanks much. That looks fantastic. I'll give it a try.

And when the loop ends, set referenceToALinkWhichHasTheClassOfMore
(and the array) to null. Alternatively, move the onclick handler
function outside the load function as you don't need to create
closures.

I'm not sure I understand this last part. If the onclick handler is
not set onload, then when is it set?

 

[Jake Barnes]

That would be some trick for server side code. Define "fill up."



Such a design renders part of your content inaccessible to search
engines, agents without script, users with script disabled, etc.

Yes, these are private pages, only the owner of the page has access to
them. We don't want search engines having access to these pages. Users
can specify, when they first sign up, whether they usually have
Javascript turned off. If they usually have it on, then they get the
design which I am working on now.

 

[Jake Barnes]

I take it you are having trouble with closures.






That would be some trick for server side code. Define "fill up."

The DIV starts off with a fixed height of 250px. To put text into that
DIV, we use a PHP command:

<?php echo substr($text, 0, 180); ?>

That means the text gets cut off after 180 characters. Once she starts
testing the design on a variety of browsers, platforms, she will raise
or lower the number to make sure it fits in most circumstances.

After the cut-off, we put the "more" link, which people can click on
to see all of the text.

 

[David Mark]

[snip]

I've redone the code and run into another problem. In the code below,
the id of a link get's attached to the onclick event, just like I
want, but the last id of the array (of links with class "more"), is
being assigned to the first link. I feel like I've missed something
obvious with my for() loop. But what?
addLoadEvent(function() {
var arrayOfAllLinksWithTheClassOfMore = getElementsByClass("more");
for (var i=0; i < arrayOfAllLinksWithTheClassOfMore.length; i++) {
var referenceToALinkWhichHasTheClassOfMore =
arrayOfAllLinksWithTheClassOfMore;
var idOfLinkMakingThisCall =
referenceToALinkWhichHasTheClassOfMore.id;
alert(idOfLinkMakingThisCall);
referenceToALinkWhichHasTheClassOfMore.onclick = function() {
var idOfDivToBeAffected =
referenceToALinkWhichHasTheClassOfMore.getAttribute("rel");
var refToDiv = document.getElementById(idOfDivToBeAffected);
alert(idOfDivToBeAffected);
if (refToDiv.style.height == "auto") {
refToDiv.style.height = "250px";

Unless the content that "fills in" these div's is an image with a
height of 250px and the div's have no borders or padding, you are
going to have problems.

Well, I'll pass that note along to the designer. I think she was
thinking that we would use PHP on the server to restrict how much text
gets into those boxes, and we could restrict it enough to cover most
situations regarding different browsers, fonts, and sizes. But yes, if
an older reader hits "Expand text size" 4 times, the design will be
blown out. By the way, the divs have no padding. Saves us one
headache.

I see what you are trying to do, but you are not doing it right. You
are also creating memory leaks. See the FAQ page on closures.

If I go to Google and search for "Javascript FAQ", Google suggests at
least 4 sites with that name. I would assume you mean the FAQ at
Jibbering, but when I go here:

www.jibbering.com/faq

And hit control-F and then type the word "closure", FireFox tells me
that it is not on the page.

Which FAQ did you mean? Which one covers closures?

How about something like this:

referenceToALinkWhichHasTheClassOfMore.onclick =
function() {
var idOfDivToBeAffected =
this.getAttribute("rel");
var refToDiv =
document.getElementById(idOfDivToBeAffected);

alert(idOfDivToBeAffected);

Thanks much. That looks fantastic. I'll give it a try.

And when the loop ends, set referenceToALinkWhichHasTheClassOfMore
(and the array) to null. Alternatively, move the onclick handler
function outside the load function as you don't need to create
closures.

I'm not sure I understand this last part. If the onclick handler is
not set onload, then when is it set?

It is set onload. But the function it is set to does not have to be
defined inside the onload handler.

 

[David Mark]

Just the key points; I think we have already discussed it at length here:

- Relies on inherently error-prone proprietary properties that are only
supported for backwards compatibility with DOM Level 0 (NN3/IE3) where a
well-supported and (mostly) standards compliant alternative supported
since DOM Level 0 and specified in DOM Level 2 Events is already
available.

There is no reason why you can't use addEventListener/attachEvent
unobtrusively.

- Usually adds the event listener code to every fitting element regardless
whether or not that element is ever subject to the event, or whether the

That would be stupid.

event bubbles. That also contributes to its general error-proneness and
inefficience.

Sometimes it makes sense to attach one listener and use event
bubbling. Sometimes it does not. Either way, you can use unobtrusive
techniques that keep script out of the document markup, or you can mix
your handlers up in the content. The former method allows behavior to
be added to (or removed from) content without touching the markup. If
your markup is peppered with inline event handlers and you have more
than a few documents to maintain, you can imagine what it takes to
make the same changes.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
oglegroups.com>, Sun, 14 Oct 2007 11:58:01, Jake Barnes

Which FAQ did you mean? Which one covers closures?

(1) Read FAQ 2.3

(2) <FAQENTRY> AISB, IIRC, the FAQ should include a list of the FAQ
Notes. The top level of the TOC in FAQ_NOTES.html will suffice.

(3) See <http://www.jibbering.com/faq/faq_notes/closures.html>