coneNode - how do you make it work for this?

[BrightNail]

I have the following div elements.

<div id="parentDiv">
<ul id="ulDiv">
<li class="items">
<span class="shade1">
<span class="shade2">
<a class="shade3" href=""></a>
</span>
</span>
</li>
</ul>
</div>

I need to reiterate thru some data and basically append a LI items onto the ulDiv --

So, rather than creating a bunch of elements, I thought to cloneNode 'spotlightentry'
and thru each iteration of data just plug data into the cloned item and then APPEND it to ulDiv.

I am sorta stuck. I have this, but things aren't working out.
(items is the data I am reiterating thru).

var display = $('ulDiv').select('.items').cloneNode(true);
display.select('.items')setStyle({
backgroundImage: "url("' + items.image + '")";
});
display.select('.shade1').innerHTML = items.title;
display.select('.shade2').href = items.link;
display.select('.shade2').update= items.linkname;

$('lulDiv').insert({bottom: display});

I also think I am suppose to remove/delete the initial element i am cloning, but not sure how to do that.

Any advice?

[BrightNail]

bump - any thoughts?

[venegal]

What framework are you using there? Prototype? I can't really help you with that. If you want, I can move this thread into the frameworks forum for you, though — maybe you'll get more help there.

Anyway, I don't really see any need for that clone business, if all you want to do is append some elements. Also, I don't see you iterating through the items anywhere.

[oVTech]

some links might help:
http://stackoverflow.com/questions/9...ascript-jquery

http://stackoverflow.com/questions/1...s-using-jquery

http://stackoverflow.com/questions/2...nts-outer-html

http://api.jquery.com/clone/

[venegal]

Originally Posted by oVTech

some links might help:
http://stackoverflow.com/questions/9...ascript-jquery

http://stackoverflow.com/questions/1...s-using-jquery

http://stackoverflow.com/questions/2...nts-outer-html

http://api.jquery.com/clone/

This doesn't look at all like jQuery.

[oVTech]

Well, you caught me! I didn't even look at the code. As soon as I saw $(' '), I assumed it was jQuery since most people that post questions here with frameworks are using jquery - at least it seems like it.

OH! And it looks a lot like jquery considering the syntax, the select func and of course that setStyle could be his own function and that he messed up with the cloneNode function and ....etc....

[BrightNail]

hey,

Using prototype.

I am using the clone, because I need it to be robust and "professional". I initially did it as just creating the elements and appending them to the div, but it is not "corporate" enough...lol.

[venegal]

I see, you aim to be "enterprisey", and cloning stuff without a real need to certainly does the trick. Is that also why you use Prototype instead of jQuery? Well, whatever floats your boat, as long as you get it working. Don't hold your breath for much help with that, though, as we generally aim to simplify, not to convolute.

[BrightNail]

I am confused.

1. We use prototype here at work

2. Creating "new Element" seems to have "more" overhead than the more robust way of cloning a div structure and just slotting in items.

Also, I want to know how to do this because the new Element way is within my knowledge base. I don't know how to make clone work, so then I got to 'wanting' to do it, because to me - seems more enterprising. I don't think that is a bad thing.

please assist :-)

[venegal]

I thought you meant those quoted "professional" and "corporate" as a joke. Also, "enterprisey" is generally understood as meaning overly complex and convoluted, so that's not a good thing to go for.

So, since you want help — I don't know much about Prototype, but it's enough to make your code completely fall apart, line by line:

var display = $('ulDiv').select('.items').cloneNode(true);

I don't see this working at all. select() returns an array, which doesn't have a cloneNode method. Let's pretend this somehow works, though, to see what the rest of your code does:

display.select('.items')setStyle({

Syntax error, you're missing the dot before setStyle.
Also, select still returns an array, which doesn't have a setStyle method.
Also, select searches the descendants of display, but display itself (and not one if its descendants) has class 'items', so it will return an empty array.

backgroundImage: "url("' + items.image + '")";
});

Syntax error, completely wrong usage of quotes.

display.select('.shade1').innerHTML = items.title;
display.select('.shade2').href = items.link;
display.select('.shade2').update= items.linkname;

Same thing as above, none of this works, because select returns an array.
Also, shade2 isn't a link but a span, so setting its href property is useless.
Also, shade2 is nested inside shade1, so once you set shade1's innerHTML property, shade2 will be gone anyway and select will return an empty array.

$('lulDiv').insert({bottom: display});

'lulDiv' is probably just a typo, but still.



So, there you go. Those were more issues than lines of code.


Also, I have no idea what 'spotlightentry' is supposed to be, since it's not in your code. (Generally, cloning like this is ok, btw; it sounded like you were trying to do something else on first read-through, because of that missing piece of information.) And you still haven't shown the actual loop.

All in all I'd say you shouldn't aim to be "professional" or "corporate" or any of those meaningless words, you should just take some time to learn the tools you are working with.


Anyway, I've moved this to the frameworks forum. Maybe someone feels like cleaning up your code there.