Rails AJAX partial not rendering properly - ruby-on-rails

Question

I have:
<p id="click">Click here</p>
In contorller:
#details=Family.find_by(famid: params[:famid])
respond_to do |format|
format.html
format.json {render :json => #details}
end
and:
$('#click').on('click',function(){
$.ajax({
type: "GET",
data: 'famid='+id,
dataType: "json",
url: "/map",
success: function(data){
document.getElementById('myModal').innerHTML = data.famid
}
});
}
<div id="myModal"></div>
This works fine. The myModal div tag is populated by the correct famid value. But I just want to post the data to the controller via ajax and query the database and use the #details variable instead. So I tried:
$('#click').on('click',function(){
$.ajax({
type: "POST",
data: 'famid='+id,
dataType: "json", //do I need this? should it be html?
url: "/map"
});
}
Now I want to use the #details variable like:
<div id="#myModal"> <%= #details.famid %> </div>
How do I do that?
UPDATE: Ok I did the following things and everything works fine (thanks to #Rich & #NitinJ) except the partial. It's not rendered properly.
map.js.erb
$("#myModal").html("<%= escape_javascript(render(#details))%>");
_details.html.erb
<h3><%= #details.famid %></h3>
map.html.erb
<div id="myModal">
<%= render #details %>
</div>
Update:
Now the partial is rendered correctly in the browser console. I can see the #myModal div being populated correctly. But it's showing only in the browser console and not on map.html.erb page. What is wrong here?

Answer 1

Ajax
$('#click').on('click',function(){
$.ajax({
type: "POST",
data: {famid: id}, //you need to serialize your data
dataType: "json", //do I need this? should it be html?
url: "/map"
});
}
AJAX is quite simple - it sends a request on your behalf. The $.ajax function is from JQuery, so to get it right, you just need to pass the right arguments to it
Routes
#config/routes.rb
post "map", to: "your_controller#map"
Because you're sending a POST request (rather than GET), you'll need a route to handle the request. And since you're sending to /map, you need to ensure you're going to catch that request & send to the right controller
Controller
#app/controllers/your_controller.rb
def map
#details = Family.find_by(famid: params[:famid])
respond_to do |format|
format.html
format.json {render :json => #details}
end
end
Response
Because you're dealing with JSON, I believe you'll be best handling the response in the view directly, like this:
$('#click').on('click',function(){
$.ajax({
type: "POST",
data: {famid: id}, //you need to serialize your data
dataType: "json", //do I need this? should it be html?
url: "/map",
success: function(data) {
details = jQuery.parseJSON(data)
$('#modal_body').html(details.famid);
}
});
}
To my knowledge, JSON is meant to pass data succinctly (with as few moving parts as possible), and consequently, we always handle the JSON response from the Ajax request; rather than a separate file
You can use the jQuery.parseJSON function to handle this, creating an object you can then append to the page
Update
I believe your problem is you're using JSON
You can't load a rails .js file with JSON - you have to load .json.erb, or process in the front-end view. You may wish to change your request to standard JS:
#JS
$('#click').on('click',function(){
$.ajax({
type: "POST",
data: {famid: id},
url: "/map"
});
}
#Controller
def map
#details = Family.find_by(famid: params[:famid])
respond_to do |format|
format.js
format.html
end
end
#app/views/controller/map.js.erb
$("#myModal").html("<%=j render(#details) %>");

Answer 2

You have to create a js.erb template than render this template. Now you can access this variable in your *.js.erb template
alert("<%=#details.famid%>")
you can also update your text of p tag by
$("modal-body").text("<%=#details.famid%>")