CODEWITHSUNDEEP
javascriptjqueryrubyajaxsinatra
Aaron Moodie
Aaron Moodie

Reputation: 1965

Jquery Ajax request to Sinatra app

I've been at this for a while, but am missing something. I've just set up a simple Sinatra app returning JSON:

get '/json' do
  content_type :json
  $data.to_json
end

This is working fine, and then the javascript I'm using to do a cross domain request is 

$.getJSON("http://domain.com/json?callback=?", function(data) {
   console.log(data);
});

Unfortunately with this I just keep getting the error in the console Uncaught SyntaxError: Unexpected token : and although I've tried a just using the $.ajax method instead, I still get the same result.

Is this an error on my server or client side code? any help appreciated.

Upvotes: 1

Views: 1389

Answers (2)

smenon
smenon

Reputation: 129

Here working example with different port

Ruby with Sinatra 

require 'rubygems'
require 'sinatra'
require "sinatra/jsonp"

get '/note/all/' do
  data = ["hello","hi","hallo"]
  JSONP data      # JSONP is an alias for jsonp method
End

HTML hosted on apache

<head id="Head1" runat="server">
    <title> English </title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // to update alternative address
        $('#Updateprofile').click(function () {
        var key = "nickname"
            var details = $('#nickname').val();
        $.ajax({
            type: 'GET',
            url: 'http://localhost:4567/note/all/',
            crossDomain: true,
            data: '',
            dataType: 'jsonp',
            success: function(responseData, textStatus, jqXHR) {
            $('#controlstatus').html(+responseData);
            },
            error: function (responseData, textStatus, errorThrown) {
            alert('POST failed.'+textStatus);
            }
        });
        });
    });
</script>
</head>
<body>
    <form id="mstform" method="post" runat="server">
<input id="nickname" type="text" style="border: thin solid #C0C0C0; background-color: #EFEFEF;
        width: 300px;" />
   <br />
    <br />
    <img alt="update" id="Updateprofile" src="images/save.png" title="Clicking this button will update your profile" />
   <br />
    <br />
<div id="controlstatus"> details should be here
</div>
    </form>
</body>

Upvotes: 1

user1480400
user1480400

Reputation:

You mentioned you are making a cross domain request. For JSONP, you need to wrap your json response to mimic a function call. There is a Sinatra helper which makes it easy.

Upvotes: 2

Related Questions