I have a Rails app running in Heroku, and a html file using Jquery Mobile.
The Rails app returns JSON data (using RABL), that my mobile app is suppose to pick up and show.
This is what I'm doing, I'm feeding the contents of the response to a listview. Pretty simple. If I use Chrome, the console shows the error Origin null is not allowed by Access-Control-Allow-Origin. IF I try on Firefox, there's no error on the console, but the data is not shown either, not even the alert triggers.
function getBuses(){
$('#content').append("<ul id='bus_list' data-role='listview' data-inset='true'</ul>")
$('#content').trigger("create");
//Se llama a la API para retornar todos los buses
$.getJSON('http://someapp.herokuapp.com/buses.json', function(data)
{
$.each(data, function(key, value)
{
alert(key + ":" + value);
$('#bus_list').append('<li id="'+bus.id+'">'+bus.numero_de_linea+'<li/>');
});
});
$('#bus_list').listview("refresh");
}
This is what the server responds:
[{"id":7,"numero_de_linea":"604"}]
I've reading on Access-Control-Allow-Origin for a while now, but I'm not sure what I have to do, should I change something in my server? I'm trying this html file on my browser, but it's not working on my phone either.
I have set $.support.cors
and $.mobile.allowCrossDomainPages = true;
to true when mobileinit
runs.
Any information on what to do next, would be greatly appreciated.
EDIT: If you are working with RABL, remember to set the variable enable_json_callback to true in the initializer. You have to enable this thing from both sides.
In Rails 4 the command after_filter
has been changed to after_action
so the finished code in the top of the controller should be:
after_action :set_access_control_headers
def set_access_control_headers
headers['Access-Control-Allow-Origin'] = "*"
headers['Access-Control-Request-Method'] = %w{GET POST OPTIONS}.join(",")
end