# Last piece of the pie! javascript no longer works after page.replace\_html

**URL:** <https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630>\
**Category:** Rails\
**Created:** [October 10, 2008, 5:12pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630 "2008-10-10T17:12:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [October 10, 2008, 5:12pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/1 "2008-10-10T17:12:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [October 10, 2008, 5:19pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/2 "2008-10-10T17:19:54Z")

</div>

On Oct 10, 4:12 pm, ressister [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) 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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [October 10, 2008, 5:35pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/3 "2008-10-10T17:35:09Z")

</div>

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 C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [October 10, 2008, 6:26pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/4 "2008-10-10T18:26:15Z")

</div>

On Oct 10, 4:34 pm, ressister [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) 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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [February 21, 2009, 6:40pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/5 "2009-02-21T18:40:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [October 10, 2008, 7:06pm UTC](https://www.ruby-forum.com/t/last-piece-of-the-pie-javascript-no-longer-works-after-page-replace-html/150630/6 "2008-10-10T19:06:45Z")

</div>

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 C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)