link_to_remote_with


  # Behave like +link_to_remote+, but shows a spinner while the request is processing.
#   link_to_remote_with_spinner 'Hi', :url => hi_path
# You can specify the spinner and the container to hide
#   link_to_remote_with_spinner 'Hi', :url => hi_path, :container_id => 'container', :spinner => 'spinner'
def link_to_remote_with_spinner(title, options)
  element_id = options.delete(:id) || ('link_to_' + title.underscore.tr(' ', '_'))
  container_id = options.delete(:container_id) || element_id
  
  returning '' do |out|
    unless spinner = options.delete(:spinner)
      spinner = "#{element_id}_spinner"
      out << image_tag('spinner.gif', :id => spinner, :style => 'display:none')
    end
    options[:complete] = "$('#{spinner}').hide(); " + (options[:complete] || "$('#{container_id}').show()")
    
    out << link_to_remote(title, { :loading => "$('#{container_id}').hide(); $('#{spinner}').show()" }.merge(options),
                                 { :id => element_id })
  end
end
  We use this utility internally. I had a use case today where I don't want to $('#{container_id}').hide(); rather I'd like to grey it out and stop it from receiving events. Is there a more generic way to do all this?
  2007-09-20T14:17:41+00:00
  13
  Ruby
  link_to_remote_with_spinner
  4
  link_to_remote_with_spinner
  
  2007-09-24T20:36:21+00:00
  3
  
    
      def link_to_remote_with_spinner(title, options)
  element_id = options.delete(:id) || ('link_to_' + title.underscore.tr(' ', '_'))
  container_id = options.delete(:container_id) || element_id
  
  returning '' do |out|
    unless spinner = options.delete(:spinner)
      spinner = "#{element_id}_spinner"
      out << image_tag('spinner.gif', :id => spinner, :style => 'display:none')
    end
    options[:complete] = "$('#{spinner}').hide(); " + (options[:complete] || "$('#{container_id}').show()")
    options[:loading] = "$('#{spinner}').show(); " + (options[:loading] || "$('#{container_id}').hide()")
    
    out << link_to_remote(title, options, { :id => element_id })
  end
end

# Now if you specify complete and loading you can do wathever you want:
link_to_remote_with_spinner 'Grey out text', :url => ouch_path, :id => 'my_link',
                            :loading => toggle = "$('my_link').toggleClassName('disabled')",
                            :complete => toggle
                            
link_to_remote_with_spinner 'Dont click!', :url => ouch_path,
                            :loading => "$('notice').update('I told you not to click')",
                            :complete => "$('notice').update('Ok now! Look what you did, stupid!')"

      13
      With the above code you could already specify the onComplete callback overriding the container hiding thing, I just added the same thing for the loading callback and now you got more freedom then a jobless freelancer on crack.
      2007-09-21T07:42:00+00:00
      32
      Ruby
      0
      0
      On link_to_remote_with_spinner
      1
      macournoyer
      http://macournoyer.com
    
    
      <%= link_to_remote ... %> <%= indicator %>
      13
      Use my plugin at http://agilewebdevelopment.com/plugins/remote_helpers

See the readme for info on more advanced usage... or email me.
      2007-09-27T23:51:47+00:00
      60
      Ruby
      0
      0
      On link_to_remote_with_spinner
      
      Andrew Kaspick
      www.redlinesoftware.com
    
    
      <%= link_to_remote 'Text', :url => your_url %> <%= indicator %>
      13
      Using my plugin remote_helpers from http://agilewebdevelopment.com/plugins/remote_helpers, all of the spinner functionality is taken care of.  It also works with any method that makes a remote function call.

See the plugin README in the plugin for more detailed usage.

The code below is the most basic usage.  The 'indicator' method contains the spinner image and that's all there is to it... the spinner automatically gets displayed and hidden.
      2007-09-28T01:33:11+00:00
      77
      Ruby
      4
      2
      On link_to_remote_with_spinner
      31
      Andrew Kaspick
      http://www.redlinesoftware.com
    
    
      # include the eventselectors.js library in your layout
# put this at the very bottom:

Ajax.Responders.register({
  onComplete: function() { Element.hide('loading'); EventSelectors.assign(Rules);},
  onLoading: function() { Element.show('loading');}
})
      13
      Anymore, I always use EventSelectors.js to handle all toggling of the "loading" image. I usually keep the loading image in a nice place in the layout (often absolutely positioned) and show activity that way.

References:

1) <a href="http://rpheath.com/posts/2007/03/17/add_a_loading_image_for_all_ajax_requests">loading image for all ajax requests</a>
2) <a href="http://rpheath.com/posts/2007/06/01/rails-plugin-for-handling-ajax-spinners">Rails plugin to show loading image</a>
      2007-10-08T23:04:19+00:00
      335
      Ruby
      0
      0
      On link_to_remote_with_spinner
      
      Ryan
      http://rpheath.com