By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,854 Members | 2,004 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,854 IT Pros & Developers. It's quick & easy.

'this' and <A HREF="...">

P: n/a
In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.focusField()'. The 'this' operator does not refer to
the anchor here (as I expected), but to the window object!

Is there a simple way to get a reference to the anchor in that
context?

I thought up the following 'tricky' solution, which works, but it's
not a very elegant solution:

//General function to implement auto-increments on an object.
function genAutoInc(obj)
{
if (obj.autoIncSeed == null) {
obj.autoIncSeed = 0;
}
obj.autoIncSeed++;
return obj.autoIncSeed;
}

//This version assigns a unique ID to the anchor and uses that to
refer to it in the HREF.
function createFieldAnchor2(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.id = 'dynamicId'+genAutoInc(field.ownerDocument);
anchor.href='javascript:document.getElementById("' +anchor.id
+'").focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Peter Laman schreef:
In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.focusField()'. The 'this' operator does not refer to
the anchor here (as I expected), but to the window object!

Is there a simple way to get a reference to the anchor in that
context?

I thought up the following 'tricky' solution, which works, but it's
not a very elegant solution:

//General function to implement auto-increments on an object.
function genAutoInc(obj)
{
if (obj.autoIncSeed == null) {
obj.autoIncSeed = 0;
}
obj.autoIncSeed++;
return obj.autoIncSeed;
}

//This version assigns a unique ID to the anchor and uses that to
refer to it in the HREF.
function createFieldAnchor2(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.id = 'dynamicId'+genAutoInc(field.ownerDocument);
anchor.href='javascript:document.getElementById("' +anchor.id
+'").focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}
Hi,

I think you can avoid this whole mess by NOT using the javascript
pseudocode in your hyperlinks.
I think that is the reason your 'this' is the windowsobject.
Try this:
1) remove the anchortags completely
2) replace them by a span tag. (If you miss your hyperlinkcursor, use
the cursor CSS solution, eg style="cursor:crosshair")
3) Give the span an onClick eventhandler.
4) add onClick() to the span and call some function with the right
parameters, eg onClick="focusMe('field1');"

function focusMe(fieldName){
document.forms["yourformnamehere"][fieldName].focus();
}

Could that help?

Regards,
Erwin Moller
Jun 27 '08 #2

P: n/a
Peter Laman wrote:
In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.focusField()'.
http://jibbering.com/faq/#FAQ4_24
The 'this' operator
`this' is _not_ an operator.
does not refer to the anchor here (as I expected), but to the window object!
this, literally, is unsurprising. However, it does not necessarily refer to
the object referred to by the host-defined `window' property of the Global
Object, but rather to the Global Object itself.
Is there a simple way to get a reference to the anchor in that
context?
Yes, there is:

<a href="alternative" onclick="... this ... ">...</a>

However, your needs go further and your code points out a confusion between
host objects and native objects on your part. Trying to augment DOM host
objects with a property as you do is a really bad idea because of what the
ECMAScript Specification says about that and what implementations exhibit.

You really want to use a wrapper method instead:

function focusField(a)
{
// call another wrapper method for ensuring compatibility;
// see also http://PointedEars.de/scripts/dhtml.js
var f = dhtml.getElemById(a.id + "_field");
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}

Since you are using a method to create your special anchor already, it would
be prudent to make the focusField() method a property of a wrapper object:

function FieldAnchor(field, linkText)
{
// the local variable keeps the value private;
// if you don't want that, use this.anchor and the like;
var anchor = dhtml.createElement("a");

this.field = field;

var me = this;

// call wrapper method for ensuring compatibility
_addEventListener(anchor, "click",
function() {
me.focusField();
});

// feature-test this before, and avoid this;
// append a text node or several other node objects instead
anchor.innerHTML = linkText;

// Allows "protected" read access to the "private" variable.
// (must be defined here and not as a prototype method)
this.getNode = function() {
return anchor;
};
}

FieldAnchor.prototype = {
constructor: FieldAnchor,
focusField: function() {
var f = this.field;
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}
};

// example; add more feature tests here
var a = new FieldAnchor(dhtml.getElemById("foo"), "bar");
document.body.appendChild(a.getNode());
HTH

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.