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 <[EMAIL PROTECTED]>
wrote:
> On Oct 10, 4:34 pm, ressister <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]>
> > wrote:
>
> > > On Oct 10, 4:12 pm, ressister <[EMAIL PROTECTED]> 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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
