SOLR with JSONP with JQUERY

16 Comments / Programming / By

Update: The previous version of this howto was a bit unclear or even erroneous, and some people had problems getting it to work. I have now rewritten it and testet it with SOLR 3.5.0 and jQuery 1.7.1.

Making SOLR return results suitable for consumption using JSONP is very easy!

Calling SOLR in JSONP style

Enter the following into your browser to see an example of how this works (change values for 'yoursolrserver.com' and 'yoursearchgoeshere'):

  • http://yoursolrserver.com/solr/select/?q=yoursearchgoeshere&wt=json&json.wrf=callback

Looking at the structure of the JSON will give you an idea about how to process it in the following code.

The important two parameters in the URL are wt=json and json.wrf=callback. Of course callback can be anything (it's just the name of the callback to call), so json.wrf=foo works as well. jQuery will autogenerate a name for you, so you don't need to worry about it.

To perform the above call with jQuery in a JSONP style, use the following code snippet, and process the data result in the success function.

$.ajax({
  'url': 'http://yoursolrserver.com/solr/select',
  'data': {'wt':'json', 'q':'your search goes here'},
  'success': function(data) { /* process e.g. data.response.docs... */ },
  'dataType': 'jsonp',
  'jsonp': 'json.wrf'
});

16 thoughts on “SOLR with JSONP with JQUERY”

  1. Glenn

    Thank you for posting this – very helpful!

    Once I worked through it, seems like the ‘success’ param can be deleted since with JSONP there are no ajax events called. I deleted it, but since it is in the solr url, it is called anyway.

    Thanks again!
    Glenn

  2. jay

    Unfortunately, this didn’t work for me. Data is getting returned with wt=json and json.wrf=callback parameters in solr query string, however it is not getting parsed in my callback function.

    1. kostas

      I have now changed the example because there was an error in it, and tested it with SOLR 3.5.0 and jQuery 1.7.1 (the latest version at this time). If you want you can try again.

      1. amee

        Hi, Its not working in my case too, I tried
        $.getJSON(“http://mysolrURL/methodname?Location=tx&wt=json&json.wrf=Testfn”, function (result) {
        debugger
        alert(“hello” + result.response.docs[0].name);
        });

        function Testfn() {
        debugger
        alert(‘testfn’);
        }
        I always get “result=null”, plz help me…

  4. Rajesh Jain

    Hi,

    The GET worked for me. I can select from solr using Cross Domain. Here is my sample code .

    $(‘button’).click(function(){
    query=$(“#query”).val();
    qstr = ‘q=’ + escape(query);

    // Assign handlers immediately after making the request,
    // and remember the jqxhr object for this request
    var params = getstandardargs().concat(qstr);
    var urlData = params.join(‘&’);
    url = url+urlData;
    alert(url);
    $.ajaxSetup({ crossDomain: true, scriptCharset: “utf-8” , contentType: “jsonp; charset=utf-8”});
    $.ajax({
    url : url,
    type: “GET”,
    dataType: “jsonp”,
    jsonp : “callback”,
    jsonpCallback: “loadData”,
    success: function(data) {alert(“Success”);},
    error: function(data) { alert(“Error”); },

    });

    });
    });

    function loadData(data) {
    alert(“Load Data”);
    $.each(data.response.docs,function(i,doc){
    $(“#results”).append(‘Title:’+doc.name+’ == Price:’+doc.price+”);
    });
    }

    function getstandardargs() {
    var params = [
    ‘wt=json’
    , ‘indent=on’
    , ‘hl=true’
    , ‘hl.fl=name,features’
    , ‘json.wrf=loadData’
    ];

    return params;
    }

  5. N

    Thanks for the example, only minor error in your example, (i.e. missing comma) on this line
    ‘success’: function(data) { /* process e.g. data.response.docs… */ } [ , ]

    other wise it worked out of the box, but I would also add an alert into your example, so that it does something… out of the box…

    ‘success’: function(data) { alert(JSON.stringify(data, null, ” “)); /* process e.g. data.response.docs… */ },

    (I Didn’t try… but you might mention that it will not work if the html is served from your:filesystem/ the html has to be served from a web server…)

    1. kostas

      Thanks N,

      I’ve added the missing comma. Good suggestion also about adding a piece of code that “does something” to the example, e.g., an alert-box. I’ll do that when I get around to it.

  6. Justin

    Worked wonderfully for me, besides that missing comma, as mentioned by N above. Great to finally see this running after hours of scratching my head and trying various $.ajax and $.getJSON methods. Thanks a bunch.

  11. Laxman Dutt

    Awesome!! Thanks Rajesh Jain!
    I was facing cross domain issues while trying to access SOLR data using Jquery. This piece of code has solved my issue.

    Thanks Man!
    Laxman

  13. Pingback: SOLR with JSONP with JQUERY | skipperkongen |

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.