My question looks very simple, but strangely nothing that I've tried works.
I just want to load some partials with ajax. I've divided a template into several requests so that the page is loaded one part at a time. Specifically, I would like the #footnotes
element to be loaded as an ajax request.
The parent template services/index.html.haml
looks like this:
.services
- @services.each do |service|
.service= service.name
#footnotes
Once the #footnotes
element loads, I'd like to launch an ajax call that would load services/_footnotes.html.haml
into it.
Here's services/_footnotes.html.haml
:
- @footnotes.each do |footnote|
.footnote= footnote
In ServicesController
there's an action that hopefully should render my services/_footnotes.html.haml
:
def footnotes
stop_id = params[:stop_id]
service_ids = params[:service_ids].split(/,/)
@footnotes = ServicesHelper.generate_footnotes(service_ids, stop_id)
respond_to do |format|
format.html
format.json { render json: @footnotes }
end
end
I've tried some javascript solutions from various answers that I've read. One of the javascript solutions I've tried and failed with was:
$("#services").ready(function () {
$(".service").each(function(index, element) {
var stop_id = $("#stop_id").data("stopid");
var service_ids = $(element).data("serviceids");
$("#footnotes", element).getJson("/stops/" + stop_id + "/services/" + service_ids + "/footnotes");
});
});
This particular solution generates the error Object [object Object] has no method 'getJson'
.
It seems that I'm failing to grasp how this really works. What am I doing wrong? What's missing?
It is
$.getJSON
and NOT getJson
So,
$.getJSON("your-json-url-here", function(data) {
//Do stuff on data!
});
See here: jquery getJSON