Creating AJAX links

Ronald Chan edited this page Mar 13, 2012 · 2 revisions

Assuming you have already have a link:

<%= link_to "New Post", new_post_path %>

Simply change the link_to helper to use the ajax_link_to helper, and say which section the new content should load into.

<%= ajax_link_to "New Post", posts_post_path, :section_id => "page" %>

Alternatively, you can use:

<%= link_to "New Post", posts_post_path, ajax_options :section_id => "page" %>

This might be useful if you are using not currently using the link_to helper. The ajax_options helper takes html_options, and modifies them so that the link is recognised by AJAX Pagination when it is clicked.

Both methods work with other request methods. For example, to delete a record, you might have had:

<%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %>

Now, you can use:

<%= ajax_link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete, :section_id => "global" %>

This also works with PUT and POST requests.

If you have a number of links to ajaxify, such as in a menu, you can instead simply wrap them with the ajax_links helper method. For example:

<%= ajax_links :section_id => "section_name" do %>
  <%= link_to "Overview", project_overview_path(@project) %>
  <%= link_to "Details", project_details_path(@project) %>
  <%= link_to "Timeline", project_timeline_path(@project) %>
<% end %>

However this is only a convenience feature, and only works with plain GET request links. In addition, the links cannot already have data-remote, data-confirm, data-method, data-disable-with attributes attached (ideally, they should not have any data- attributes attached). This is because AJAX Pagination actually adds some of these attributes internally. If they already exist, it becomes hard to decide how they should change. If you need these features, you should use the ajax_link_to helper method.