Forum: Ruby on Rails Last piece of the pie! javascript no longer works after page.replace_html

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
708000cf4928013787823c10427136fc?d=identicon&s=25 ressister (Guest)
on 2008-10-10 17:12
(Received via mailing list)
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
81b61875e41eaa58887543635d556fca?d=identicon&s=25 Frederick Cheung (Guest)
on 2008-10-10 17:19
(Received via mailing list)
On Oct 10, 4:12 pm, ressister <ressis...@gmail.com> wrote:
> to initially render the page.  The entries in the list are draggable,
>
> 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
708000cf4928013787823c10427136fc?d=identicon&s=25 ressister (Guest)
on 2008-10-10 17:35
(Received via mailing list)
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...@gmail.com>
81b61875e41eaa58887543635d556fca?d=identicon&s=25 Frederick Cheung (Guest)
on 2008-10-10 18:26
(Received via mailing list)
On Oct 10, 4:34 pm, ressister <ressis...@gmail.com> 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
708000cf4928013787823c10427136fc?d=identicon&s=25 ressister (Guest)
on 2008-10-10 19:06
(Received via mailing list)
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...@gmail.com>
5eb57ea1f36182bdd64e5601a73262e6?d=identicon&s=25 Paul Nelligan (nellboy)
on 2009-02-21 18:40
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
This topic is locked and can not be replied to.