Version of Rails: 3.2.1
Version of Ruby: 1.9.3p125
Browser Used: Chrome 18.0.1025.162
Developers Operating System: Mac OS/X Lion
Server's Operating System: CentOS 5
I am attempting to utilize :remote in my link_to call in order to request HTML content via AJAX and then populate a specific section of the page with the retrieved content.
It seems that Rails is not correctly setting up the link. The browser interprets the link as a regular link tag and does not execute any of the Rails UJS click event handlers.
A link with a data-confirm connected to it works, which suggests that UJS is covering some essential wireups.
I am adding other click event listeners to the same link to show/hide a section of the page where the returned HTML from the AJAX call would be displayed.
If this issue has been discussed elsewhere, I apologize. I have been searching for several days but have not found a solution addressing this precise problem. Although there are related articles, they all presume that the AJAX call is being initiated, and there may be a Rails render flow or routing issue. In my case, there doesn't seem to be any setup happening at all.
The following is some code:
The link in the View:
<%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>
Ruby on Rails-generated output:
<a href="/tasks/7/notes" class="section-link task-notes-link" data-remote="true" data-section="task-notes" title="View recent notes"><img alt="Attachment" src="/assets/icons/24x24/attachment.png"></a>
Controller code for /task/:task_id/notes:
def index
store_return_to
@project = nil
@tasks = nil
if (params.has_key?(:project_id))
@project = Project::find(params[:project_id])
sort = [
{ :field => 'status', :direction => 'asc'},
{ :field => 'priority', :direction => 'asc' }
]
filter = { :status => Task::STATUS_ACTIVE.to_s }
@tasks = Task::filter_sort(:project => @project, :sort => sort, :filter => filter, :per_page => 0)
else
@task_sort = params.has_key?(:task_sort) ? params[:task_sort] : { :field => 'priority', :direction => 'asc'}
@task_filter = params.has_key?(:task_filter) ? params[:task_filter] : { :status => Task::STATUS_ACTIVE.to_s }
@task_search = params.has_key?(:task_search) ? params[:task_search] : ""
@tasks = Task::filter_sort(:search => params[:task_search], :sort => @task_sort, :filter => @task_filter, :page => params[:tasks_page], :per_page => 15)
end
respond_to do |format|
format.html # index.html.erb
format.js
format.json { render json: @tasks }
end
end
Lastly, the code in the index.js.erb file:
<% if (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99b8d9e9ebf6f3fcfaedb7f7f0f5">[email protected]</a>?) %>
$('#project-<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="023f4272706d686761762c6b66">[email protected]</a>%>-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% else %>
$('#project-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% end %>