Retrieve results from SOLR using jquery calls

Question

I am working to get response from SOLR using jquery. When I use the below code I got the error saying Typeerror:data is null

When looked at the code in firebug, data in on_data function is null. I think I am missing something in the Solr URL.The URL I am using is http://xxxx.xxx.xxxx.xxx/xxx_xxx/core0/selectcore0/select/?q=%3A&version=2.2&start=0&rows=10&indent=on&wt=json. Can you please take a look at my code, and also suggest me the URL style in the code

<html>
<head>
    <title>Solr Search</title>
</head>
<body>
    <h3>Solr Search</h3>

    Query: <input id="query" /> 
    <button id="search">Search</button>
    <hr/>
    <div id="results">
    </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    function on_data(data) {
        $('#results').empty();

        var docs = data.response.docs;
        $.each(docs, function(i, item) {
            $('#results').prepend($('<div>' + item.name + '</div>'));
        });

        var total = 'Found ' + docs.length + ' results';
        $('#results').prepend('<div>' + total + '</div>');
    }

    function on_search() {
        var query = $('#query').val();
        if (query.length == 0) {
            return;
        }

        var url='http://xxxx.xxx.xxxx.xxx/xxx_xxx/core0/selectcore0/select/?q='+query+'&version=2.2&start=0&rows=50&indent=on&wt=json';
        $.getJSON(url, on_data);
    }

    function on_ready() {
        $('#search').click(on_search);
        /* Hook enter to search */
        $('body').keypress(function(e) {
            if (e.keyCode == '13') {
                on_search();
            }
        });
    }

    $(document).ready(on_ready);
</script>

Aujasvi Chitkara Aujasvi Chitkara · Accepted Answer · 2013-05-29T18:17:07

Here is the working version of your code, and list of changes: 1) added wrf: adds a wrapper-function around the JSON response, useful in AJAX with dynamic script tags for specifying a JavaScript callback function 2) added callback: need to use JSONP instead of an ordinary JSON request, due to JavaScript’s cross-domain security restrictions.

<html>
<head>
    <title>Solr Search</title>
</head>
<body>
    <h3>Solr Search</h3>

    Query: <input id="query" /> 
    <button id="search">Search</button>
    <hr/>
    <div id="results">
    </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    function on_data(data) {
        $('#results').empty();
        var docs = data.response.docs;
        $.each(docs, function(i, item) {
            $('#results').prepend($('<div>' + item.name + '</div>'));
        });

        var total = 'Found ' + docs.length + ' results';
        $('#results').prepend('<div>' + total + '</div>');
    }

    function on_search() {
        var query = $('#query').val();
        if (query.length == 0) {
            return;
        }

        var url='http://xxxx.xxx.xxxx.xxx/xxx_xxx/core0/selectcore0/select/?q='+query+'&version=2.2&start=0&rows=50&indent=on&wt=json&callback=?&json.wrf=on_data';
        $.getJSON(url);
    }

    function on_ready() {
        $('#search').click(on_search);
        /* Hook enter to search */
        $('body').keypress(function(e) {
            if (e.keyCode == '13') {
                on_search();
            }
        });
    }

    $(document).ready(on_ready);
</script>

Retrieve results from SOLR using jquery calls

3 Answers