Sortable_element with RJS does not working

Question

I have a list of images where user can arrange their orders.

When user uploaded an image, I want the list to still be sortable.

I am using a similar upload that was described here: http://kpumuk.info/ruby-on-rails/in-place-file-upload-with-ruby-on-rails/

Please help.

Here are the code for upload in view file:

  <% form_for [:admin, @new_image], :html => { :target => 'upload_frame', :multipart => true } do |f| %>
    <%= hidden_field_tag :update, 'product_images'%>
    <%= f.hidden_field :image_owner_id %>
    <%= f.hidden_field :image_owner_type %>
    <%= f.file_field :image_file %><br />
    or get image from this URL: <%= f.text_field :image_file_url %>
    <%= f.hidden_field :image_file_temp %><br />
    <%= f.submit "Upload Image" %>
  <% end %>

And in controller view:

  def create
    @image = Image.new(params[:image])
    logger.debug "params are #{params.inspect}"
    if @image.save
      logger.debug "initiating javascript now"
      responds_to_parent do
        render :update do |page|
          logger.debug "javascript test #{sortable_element("product_images", :url => sort_admin_images_path, :handle => "handle", :constraint => false)}"
          page << "show_notification('Image Uploaded');"
          page.replace_html params[:update], :partial => '/admin/shared/editor/images', :locals => {:object => @image.image_owner, :updated_image => @image}
          page << sortable_element("product_images", :url => sort_admin_images_path, :handle => "handle", :constraint => false)
        end
      end
      #render :partial => '/admin/shared/editor/images', :locals => {:object => @image.image_owner, :updated_image => @image}
    else
      responds_to_parent do
        render :update do |page|
          page << "show_notification('Image Upload Error');"
        end
      end
    end
  end

Or, to rephrase the question:

Running this:

  page.replace_html params[:update], :partial => '/admin/shared/editor/images', :locals => {:object => @image.image_owner, :updated_image => @image}
  page << sortable_element("product_images", :url => sort_admin_images_path, :handle => "handle", :constraint => false)

Will NOT adding sortable list feature.

Please help,

Thank you

Answer 1

I think the problem may well be that the sortable is created when the page first loads. I have run into this issue a couple of times. Adding a new element to the list means you have to call the sortable function again to have the new element included in the sorting.

I am not across prototype/scriptaculous, but there may be a way to have the sortable element listen for events that add elements to the list. jQuery has a set of rebinding events that will respond to new elements added to the DOM, might be something simialr in the other libs.

Answer 2

Found it!

Instead of:

  page.replace_html params[:update], :partial => '/admin/shared/editor/images', :locals => {:object => @image.image_owner, :updated_image => @image}

Use

  page.replace params[:update], :partial => '/admin/shared/editor/images', :locals => {:object => @image.image_owner, :updated_image => @image}