thr3ads.net - Rails - Last piece of the pie! javascript no longer works after page.replace

If this information is useful, please help other people find it:
Share via:

ressister

2008-Oct-10 15:12 UTC

Last piece of the pie! javascript no longer works after page.replace_html

Hi there,

I have one last remaining problem to solve before I''m code complete on
an application I''ve been working on for a few months, and I need your
help.

I have a page that contains a list of entries and a form at the top
that uses form_remote_tag to allow users to add new entries via AJAX.
When the user submits the form, the list of entries is updated from
the controller using render :update and the same partial that was used
to initially render the page.  The entries in the list are draggable,
at least they are BEFORE the entry list is updated as a result of AJAX
call.

After the AJAX call is complete, the list entries are no longer
draggable.  I am using jQuery and Prototype, jQuery for the drag and
drop.  The javascript drag and drop code is in my application.js
file.  If i move the javascript in-line into the partial that
generates the list of entries, after a form submit, the entries are
still draggable, but that has its own set of problems and i don''t want
to do that.

Why would the drag and drop no longer work after the AJAX call when
I''m using the same partial that was used to render the page when all
the drag and drop javascript is in the application.js?

I tried as an alternate solution using :update as part of the
form_remote_tag in the view but that didn''t work either.

Any help solving this last problem would be greatly appreciated.

Regards,
-A



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

Frederick Cheung

2008-Oct-10 15:19 UTC

head link

Re: Last piece of the pie! javascript no longer works after page.replace_html

On Oct 10, 4:12 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi there,
>
> I have one last remaining problem to solve before I''m code
complete on
> an application I''ve been working on for a few months, and I need
your
> help.
>
> I have a page that contains a list of entries and a form at the top
> that uses form_remote_tag to allow users to add new entries via AJAX.
> When the user submits the form, the list of entries is updated from
> the controller using render :update and the same partial that was used
> to initially render the page.  The entries in the list are draggable,
> at least they are BEFORE the entry list is updated as a result of AJAX
> call.
>
> After the AJAX call is complete, the list entries are no longer
> draggable.  I am using jQuery and Prototype, jQuery for the drag and
> drop.  The javascript drag and drop code is in my application.js
> file.  If i move the javascript in-line into the partial that
> generates the list of entries, after a form submit, the entries are
> still draggable, but that has its own set of problems and i don''t
want
> to do that.
>
> Why would the drag and drop no longer work after the AJAX call when
> I''m using the same partial that was used to render the page when
all
> the drag and drop javascript is in the application.js?
>
Presumably when you load the page the first time round, some sort of
initialisation occurs that marks the elements as draggable (ie
installs various event handlers and what not).
When you replace the list, you would need to do that initialisation on
the new dom elements.

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

ressister

2008-Oct-10 15:34 UTC

head link

Re: Last piece of the pie! javascript no longer works after page.replace_html

Good point.  Right now, the jQuery drag and drop javascript code is
not inside a function in application.js.  I''m not all that experienced
with Javascript.  Would i need to wrap the drag and drop code inside a
function that''s called when the partial is displayed to re-initialize
the event handlers etc?  Can you give me an example of how to do
that?  I''m happy to post my drag-and-drop javascript code if that will
help.

Thanks Fred,
-A

On Oct 10, 11:19 am, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> On Oct 10, 4:12 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > Hi there,
>
> > I have one last remaining problem to solve before I''m code
complete on
> > an application I''ve been working on for a few months, and I
need your
> > help.
>
> > I have a page that contains a list of entries and a form at the top
> > that uses form_remote_tag to allow users to add new entries via AJAX.
> > When the user submits the form, the list of entries is updated from
> > the controller using render :update and the same partial that was used
> > to initially render the page.  The entries in the list are draggable,
> > at least they are BEFORE the entry list is updated as a result of AJAX
> > call.
>
> > After the AJAX call is complete, the list entries are no longer
> > draggable.  I am using jQuery and Prototype, jQuery for the drag and
> > drop.  The javascript drag and drop code is in my application.js
> > file.  If i move the javascript in-line into the partial that
> > generates the list of entries, after a form submit, the entries are
> > still draggable, but that has its own set of problems and i
don''t want
> > to do that.
>
> > Why would the drag and drop no longer work after the AJAX call when
> > I''m using the same partial that was used to render the page
when all
> > the drag and drop javascript is in the application.js?
>
> Presumably when you load the page the first time round, some sort of
> initialisation occurs that marks the elements as draggable (ie
> installs various event handlers and what not).
> When you replace the list, you would need to do that initialisation on
> the new dom elements.
>
> Fred--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Frederick Cheung

2008-Oct-10 16:25 UTC

head link

Re: Last piece of the pie! javascript no longer works after page.replace_html

On Oct 10, 4:34 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Good point.  Right now, the jQuery drag and drop javascript code is
> not inside a function in application.js.  I''m not all that
experienced
> with Javascript.  Would i need to wrap the drag and drop code inside a
> function that''s called when the partial is displayed to
re-initialize
> the event handlers etc?  
Something like that. Exactly what goes where is likely to depend on
what your drag and drop code looks like.> Can you give me an example of how to do
> that?  I''m happy to post my drag-and-drop javascript code if that
will
> help.
>form_remote_tag etc... take a bunch of options, in particular :success
is a javascript fragment that is evaluated when the ajax call has
succeeded. In this case it should probably do whatever initialization
you need to make things work

Fred> Thanks Fred,
> -A
>
> On Oct 10, 11:19 am, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> wrote:
>
> > On Oct 10, 4:12 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Hi there,
>
> > > I have one last remaining problem to solve before I''m
code complete on
> > > an application I''ve been working on for a few months,
and I need your
> > > help.
>
> > > I have a page that contains a list of entries and a form at the
top
> > > that uses form_remote_tag to allow users to add new entries via
AJAX.
> > > When the user submits the form, the list of entries is updated
from
> > > the controller using render :update and the same partial that was
used
> > > to initially render the page.  The entries in the list are
draggable,
> > > at least they are BEFORE the entry list is updated as a result of
AJAX
> > > call.
>
> > > After the AJAX call is complete, the list entries are no longer
> > > draggable.  I am using jQuery and Prototype, jQuery for the drag
and
> > > drop.  The javascript drag and drop code is in my application.js
> > > file.  If i move the javascript in-line into the partial that
> > > generates the list of entries, after a form submit, the entries
are
> > > still draggable, but that has its own set of problems and i
don''t want
> > > to do that.
>
> > > Why would the drag and drop no longer work after the AJAX call
when
> > > I''m using the same partial that was used to render the
page when all
> > > the drag and drop javascript is in the application.js?
>
> > Presumably when you load the page the first time round, some sort of
> > initialisation occurs that marks the elements as draggable (ie
> > installs various event handlers and what not).
> > When you replace the list, you would need to do that initialisation on
> > the new dom elements.
>
> > Fred--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

ressister

2008-Oct-10 17:06 UTC

head link

Re: Last piece of the pie! javascript no longer works after page.replace_html

Thanks Fred, here''s what I got...

My application.js file looks like this (below is the drag and drop
code)...

	jQuery(document).ready(function(){
		jQuery(".block").draggable({
		helper: ''clone'',
		revert: true});
	jQuery(".drop").droppable({
		accept: ".block",
		tolerance: "pointer",
		activeClass: ''droppable-active'',
		hoverClass: ''droppable-hover'',
		drop: function(ev, ui) {
			var entryID =
jQuery(ui.draggable).attr("id").replace(''entry_'','''');
			var dropCategoryID
jQuery(this).attr("id").replace(''category_'','''');
			var origCategoryID = jQuery(''#current_category_'' +
entryID).attr("class");
			var categoryColor =
jQuery(this).attr("style").replace(''background:
'','''');
			var dropCatCount = jQuery(''#category_'' + dropCategoryID +
''
span:first'').html()
			var origCatCount = jQuery(''#category_'' + origCategoryID +
''
span:first'').html()
			if (dropCategoryID != origCategoryID) {
				if (origCategoryID == ''none'') {
					dropCatCount++
					jQuery(''#category_'' + dropCategoryID + ''
span:first'').html(dropCatCount)
				}
				else {
					dropCatCount++
					origCatCount--
					jQuery(''#category_'' + dropCategoryID + ''
span:first'').html(dropCatCount)
					jQuery(''#category_'' + origCategoryID + ''
span:first'').html(origCatCount)
					jQuery(''#current_category_'' +
entryID).removeClass(origCategoryID).addClass(dropCategoryID)
					/* you need to update the origCategoryID */
				}
			}
			/* this deals with FireFox */
			var testHex = /[\#]/.test(categoryColor)
			if (testHex == false) {
				categoryColor = RGBToHex(categoryColor);
			}
			jQuery(''#entry_cat_'' +
entryID).css("background-color",
categoryColor);
			jQuery.ajaxSetup({
			  data: { authenticity_token : AUTH_TOKEN }
			})
			jQuery.ajax({
			  type: "POST",
			  url: ("entries/entry_categorize?entry=" + entryID +
"&category="
+ dropCategoryID),
			  dataType: "script"
			})
		}
		});
	});

In my view, my form_remote_tag code looks like this...

	<% form_remote_tag(:url => {:id => current_user.id},
								:html => {:name => ''new_entry_form''},
								:update => ''user_entries'',
								:complete => "reset(''new_entry_form'')"
								) do %>

I tried wrapping the drag and drop code that i pasted above which
lives in application.js inside a function named initiateDragDrop, but
as I said, my javascript isn''t strong, so I''m not sure that I
did it
correctly.  I then added ":success => "initiateDragDrop()" to
my
form_remote_tag expecting that the drag and drop would work after I
posted the form, but it didn''t.

What am i doing wrong?

Thanks,
-A

On Oct 10, 12:25 pm, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> On Oct 10, 4:34 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Good point.  Right now, the jQuery drag and drop javascript code is
> > not inside a function in application.js.  I''m not all that
experienced
> > with Javascript.  Would i need to wrap the drag and drop code inside a
> > function that''s called when the partial is displayed to
re-initialize
> > the event handlers etc?  
>
> Something like that. Exactly what goes where is likely to depend on
> what your drag and drop code looks like.> Can you give me an example of
how to do
> > that?  I''m happy to post my drag-and-drop javascript code if
that will
> > help.
>
> form_remote_tag etc... take a bunch of options, in particular :success
> is a javascript fragment that is evaluated when the ajax call has
> succeeded. In this case it should probably do whatever initialization
> you need to make things work
>
> Fred
>
> > Thanks Fred,
> > -A
>
> > On Oct 10, 11:19 am, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> > wrote:
>
> > > On Oct 10, 4:12 pm, ressister
<ressis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > Hi there,
>
> > > > I have one last remaining problem to solve before
I''m code complete on
> > > > an application I''ve been working on for a few
months, and I need your
> > > > help.
>
> > > > I have a page that contains a list of entries and a form at
the top
> > > > that uses form_remote_tag to allow users to add new entries
via AJAX.
> > > > When the user submits the form, the list of entries is
updated from
> > > > the controller using render :update and the same partial
that was used
> > > > to initially render the page.  The entries in the list are
draggable,
> > > > at least they are BEFORE the entry list is updated as a
result of AJAX
> > > > call.
>
> > > > After the AJAX call is complete, the list entries are no
longer
> > > > draggable.  I am using jQuery and Prototype, jQuery for the
drag and
> > > > drop.  The javascript drag and drop code is in my
application.js
> > > > file.  If i move the javascript in-line into the partial
that
> > > > generates the list of entries, after a form submit, the
entries are
> > > > still draggable, but that has its own set of problems and i
don''t want
> > > > to do that.
>
> > > > Why would the drag and drop no longer work after the AJAX
call when
> > > > I''m using the same partial that was used to render
the page when all
> > > > the drag and drop javascript is in the application.js?
>
> > > Presumably when you load the page the first time round, some sort
of
> > > initialisation occurs that marks the elements as draggable (ie
> > > installs various event handlers and what not).
> > > When you replace the list, you would need to do that
initialisation on
> > > the new dom elements.
>
> > > Fred--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Paul Nelligan

2009-Feb-21 17:40 UTC

head link

Re: Last piece of the pie! javascript no longer works after page.replace_html

Hi all

I have the exact same problem here... I have a javascript lightwindow 
video player which will not work when called inside a partial, and will 
work otherwise...

any more insight into how to reinitialize the javascript having loaded 
the partial would be useful...

I will continue to investigate nonetheless

cheers
-- 
Posted via http://www.ruby-forum.com/.

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

Rails - Oct 2008 - Last piece of the pie! javascript no longer works after page.replace_html

Last piece of the pie! javascript no longer works after page.replace_html

Re: Last piece of the pie! javascript no longer works after page.replace_html

Re: Last piece of the pie! javascript no longer works after page.replace_html

Re: Last piece of the pie! javascript no longer works after page.replace_html

Re: Last piece of the pie! javascript no longer works after page.replace_html

Re: Last piece of the pie! javascript no longer works after page.replace_html