Rails AJAX partial not rendering properly

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%>")