I'm currently working on a feature that involves loading new data onto a page once a user selects an item from a list. Prior to the selection, I'd like to display the details of the first item on the list.
Here's what I have in my html.erb file:
<div id="detailsPA">
<%= render @app.snaps, :toolkit_view => false %>
<div id="test">
<%= render :partial =>'snaps/snap_details', :locals=> {:snap => @app.snaps[0]} %>
</div>
</div>
The @app.snaps array contains multiple items with various data. Each element in this array is referred to as a snap.
The first 'render @app.snaps' displays the array as links. The second one shows the data of a selected item.
Below is the code for the list of links:
<%=link_to snap.name,{controller: 'snaps', action: 'snap_details', id: snap.id, remote: true}, {method: :get, class: 'snapButton'}%>
In order for the second render to function properly, it needs to know which item (or snap) was chosen.
Once a link is clicked, its data should replace the existing data. This is how my controller is set up:
def snap_details
@snap = Snap.find(params["id"])
render :json=>{:key=> @snap.id}
The corresponding js file looks like this:
$(document).ready(function(){
$('.snapButton').on('ajax:success', function(event, data, status, xhr){
$('#test').empty();
$('#test').html("<%=escape_javascript render(:partial =>'snaps/snap_details', :locals=> {:snap => @snap})%>");
});
});
Despite these efforts, clicking on a link doesn't result in the updated data being displayed. As a novice in Ruby on Rails and Javascript, I believe I'm getting closer to achieving my desired outcome but there's a crucial piece missing.