SOLR with JSONP with JQUERY

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

  • October 11, 2011 at 11:37 pm
    Permalink

    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

  • November 28, 2011 at 12:31 am
    Permalink

    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.

  • December 4, 2011 at 10:10 am
    Permalink

    It does not work.. In all browsers I get “jQueryBLAHBLABLAH() was not called.”.
    Thanks for trying, though..

    • December 4, 2011 at 11:34 am
      Permalink

      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.

      • January 23, 2012 at 12:10 pm
        Permalink

        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…

  • May 23, 2012 at 3:52 pm
    Permalink

    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;
    }

  • August 10, 2012 at 6:46 pm
    Permalink

    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…)

    • April 8, 2014 at 6:32 am
      Permalink

      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.

  • September 6, 2012 at 3:47 pm
    Permalink

    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.

  • April 8, 2014 at 5:31 am
    Permalink

    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

  • Pingback: SOLR with JSONP with JQUERY | skipperkongen |

Leave a Reply