Rails spinoffs - Mar 2008 - Moving a Div to another Div

I hope someone can help me with this.
I have two divs:
<div id="result" style="width: 20%; height: 100%; float:
left;"></div>
<div id="album" style="width: 78%; height: 100%; float:
right;"></div>
This make two nice columns.
I have a form that the user submits to fetch matches from a database
and update the "result" div using Ajax. That one works perfect.
Now, I want to click an item on the "result" div and move it to the
"album" div.
For that I used the following function:
function moveItem(id,source,destination) {
	$(destination).appendChild($(id));
}
It works, but it places the copied element OUTSIDE the "album" div.
I tried the next two, with the same result, that is, the copied
element is placed outside the "album" div:
function moveItem(id,source,destination) {
	$(destination).insert($(id));
}
function moveItem(id,source,destination) {
	$(destination).update($(id))
}
Am I doing something wrong?
Any ideas?
Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I don''t see anything that is wrong with that code as is. The first
snippet should work, although you should remove node with "id" from
the DOM tree first.

On Mar 18, 3:27 pm, Transistor
<transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I hope someone can help me with this.
> I have two divs:
> <div id="result" style="width: 20%; height: 100%; float:
left;"></div>
> <div id="album" style="width: 78%; height: 100%; float:
right;"></div>
> This make two nice columns.
> I have a form that the user submits to fetch matches from a database
> and update the "result" div using Ajax. That one works perfect.
> Now, I want to click an item on the "result" div and move it to
the
> "album" div.
> For that I used the following function:
> function moveItem(id,source,destination) {
>         $(destination).appendChild($(id));}
>
> It works, but it places the copied element OUTSIDE the "album"
div.
> I tried the next two, with the same result, that is, the copied
> element is placed outside the "album" div:
> function moveItem(id,source,destination) {
>         $(destination).insert($(id));}
>
> function moveItem(id,source,destination) {
>         $(destination).update($(id))}
>
> Am I doing something wrong?
> Any ideas?
> Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Tue, Mar 18, 2008 at 6:27 PM, Transistor
<transistor.dem-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I hope someone can help me with this.
> I have two divs:
> <div id="result" style="width: 20%; height: 100%; float:
left;"></div>
> <div id="album" style="width: 78%; height: 100%; float:
right;"></div>
> This make two nice columns.
> I have a form that the user submits to fetch matches from a database
> and update the "result" div using Ajax. That one works perfect.
> Now, I want to click an item on the "result" div and move it to
the
> "album" div.
> For that I used the following function:
> function moveItem(id,source,destination) {
>        $(destination).appendChild($(id));
> }
> It works, but it places the copied element OUTSIDE the "album"
div.
> I tried the next two, with the same result, that is, the copied
> element is placed outside the "album" div:
> function moveItem(id,source,destination) {
>        $(destination).insert($(id));
> }
> function moveItem(id,source,destination) {
>        $(destination).update($(id))
> }
> Am I doing something wrong?

first thing i notice is all your functions have a source formal parameter
that is never used w/in the functions.

> Any ideas?
>
i dont know what happened w/ appendChild() or update(), but i can tell you
that w/ insert() if youre using 1.6+, you should define a position as the
default is to append to the new element to the target element, per the api,
which will likely have the effect of not putting it inside the target div

from: http://www.prototypejs.org/api/element#method-insert
Inserts content before, after, at the top of, or at the bottom of element,
as specified by the position property of the second argument. If the second
argument is the content itself, insert will append it to element.

so what you might do is something like this

function moveItem(src, dst) {
  dst.insert({''Bottom'':src});
}

(i believe that syntax is accurate, but i didnt try it just now so there may
be a mistake)

-nathan

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---