title: Ajax success handler - data is undefined
body: <p>Here is how I'm making an ajax request</p>
  
  <pre><code>  #action
    def get_item
      if request.get?
        binding.pry  #it always stop here, so it's working
        item = Item.where(...)
        unless item
          item = Item.new
          # .....
        end
        respond_to do |format| 
          format.json { render(json: item) } 
        end
      elsif request.post?
         # ......
      end
    end
  
    #view
       $.ajax({
            type: "GET",
            url: "/contr/get_item",
                  data: {key1: "value1"},
                  //datatype: "json",
                  success: function(data){
                    console.log("ajax success, data -&gt; " + data[0]);
                      }
               });
  </code></pre>
  
  <p>Although the code within <code>get_item</code> is executed, the <code>data</code> value at the page is always <code>undefined</code>. </p>
  
  <p>What did I miss?</p>
  
  <p>p.s. Note that the request  <strong>is being sent</strong> back from server in json. I can see it in Chrome by "debug tool" by clicking F12 and going to Network tab.</p>