Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

setAttribute, FireFox and Objects 1

Status
Not open for further replies.
BoulderBum

BoulderBum

Programmer
Joined
Jul 11, 2002
Messages
2,179
Location
US
I have a setup like this:

Code: 
function MyObject()
{
   this.Property = 'blah';
}

var myDiv = document.getElementById('myDiv');
myDiv.setAttribute( 'myAttribute', new MyObject() );

var objInstance = myDiv.getAttribute( 'myAttribute' );

alert( objInstance.Property );

It works with IE, but FireFox apparently loads the attribute as a string instead of an object so all that gets stored is: "[Object object]" or something like that.

Is this just the way it works, or am I missing something?

Also, is there a way to serialize an object into JSON syntax so I can store it for FireFox, then load it up with eval or something?
 
Sort by date Sort by votes
Is this just the way it works
Click to expand...

Yes. Attributes are pretty much strings. There are a few exceptions (the style attribute, for example, which browsers break out), but you'll have to convert your object to a string if you want to store it as an HTML attribute like that cross-browser.

If you want to assign it as an attribute without using setAttribute, you might get away with it, although you'd need to test this:

Code: 
myDiv.myAttribute = new MyObject();

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Yeah, that works with IE, but not FireFox apparently.

I figured I might be able to serialize the object into JSON somehow (I know you can deserialize JSON) but I haven't found an easy way to do it.

Do you know if something like that is possible? Otherwise I suppose I can associate the element with some array, but that might get messy.
 
Upvote 0 Downvote
That's essentially what I'm trying to do with JSON, but the problem is that the object is fairly complex in the actual usage and I'm trying to avoid writing my own custom serialization and deserialization algorithms.
 
Upvote 0 Downvote
You could take a look at one of the JavaScript frameworks out there to see if they have one you can copy. I'd suggest DWR initially.

If you can't find one, then writing your own should be fairly simply, I'd have thought ("for x in obj"...)

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Actually I didn't know you could loop through property names until you mentioned it. Star for that.

In the actual example it wouldn't be quite so simple because some of the properties are themselves complex objects, but that gets me going anyway.

I may just end up opting for storing an array index via setAttribute and the actual object in an array.
 
Upvote 0 Downvote
For the objects-within-objects scenario, you could just use recursion. Here's one I've just written:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--

		// define basic object structure for a person, containing 2 strings and a date object
		function personDetails(personName, personEmail, personDOB) {
			this.name = personName;
			this.email = personEmail;
			this.DOB = personDOB;
		}

		// define object that will hold
		var peopleDetails = { person:[], someOtherStuffMightGoHere: 123 };

		// initialise data
		peopleDetails.person[0] = new personDetails('Fred Bloggs', 'fred@bloggs.com', new Date('01/01/1964'));
		peopleDetails.person[1] = new personDetails('Mike Raphone', 'mike@raphone.com', new Date('02/06/1968'));
		peopleDetails.person[2] = new personDetails('Ray Zin', 'ray@zin.com', new Date('09/03/1972'));

		var numPeople = peopleDetails.length;
		for (var loop=0; loop<numPeople; loop++) {
		}

		// add a more powerful method than "toString" to an object
		Object.prototype.toStringEnhanced = objToString;

		function objToString() {
			var s = '';

			for (properties in this) {
				var currentProperty = this[properties];
				var propertyType = (typeof(currentProperty)).toLowerCase();


				if (propertyType == 'function') {
					// s += ' A function: ' + currentProperty + '\n';	// skip detail for methods. replace this line with "s += currentProperty;" to remove restriction
					continue;
				}

				if (currentProperty.constructor == new Date().constructor) {
					// for date objects, use default "toString()" method
					s += properties + ': A date: ';
					s += currentProperty;
					s += '\n';
				} else if (currentProperty.constructor == [].constructor) {
					// for array objects, use different description
					s += properties + ': An array:\n\n';
					s += currentProperty.toStringEnhanced();
					s += '\n';
				} else if (propertyType == 'object') {
					s += properties + ': ';
					s += currentProperty.toStringEnhanced();
					s += '\n';
				} else {
					s += properties + ': ';
					s += currentProperty;
					s += '\n';
				}
			}

			return(s);
		}

		// show object detail with regular "toString()" method
		alert(peopleDetails);

		// show object detail with enhanced "toString()" method
		alert(peopleDetails.toStringEnhanced());

	//-->
	</script>
</head>

<body>
</body>
</html>

It's not perfect or comprehensive, but it should give you a good idea of how to use recursion, and how to do different things depending on the property / method type.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
913
rogerte
rogerte
AbidingDude
  • Locked
  • Question Question
replaceChild() and Keeping Relationships
Replies
1
Views
1K
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question Question
Field with numbers and characters get nan
Replies
1
Views
503
ggriffit
ggriffit
leifoet
  • Locked
  • Question Question
How to combine JS and ASP ?
Replies
5
Views
664
feherke
feherke
EEM6498
  • Locked
  • Question Question
Combine First_Name and Last_Name into Name - Javascript
Replies
1
Views
810
Praveen425188
Praveen425188

Part and Inventory Search

Sponsor

Back
Top