Reuters tutorial: step 8

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Support the back button

We want to allow the user to explore the Reuters business news by place of origin. In a first stage, we will allow the user to use the facet data for filtering. In a second stage, we will allow the user to see the facet data on a map using the Google Chart API.

First, update the Solr parameters for faceting in reuters.js:

var params = {
  ...
  'facet.field': [ 'topics', 'organisations', 'exchanges', 'countryCodes' ],
  ...
  'f.countryCodes.facet.limit': -1,
  ...
};

The facet.limit parameter for countryCodes is set to a negative value so that Solr returns all facet values.

Create a new widget, CountryCodeWidget.js, inheriting from AbstractFacetWidget, as for the tagcloud widget:

(function ($) {
AjaxSolr.CountryCodeWidget = AjaxSolr.AbstractFacetWidget.extend({
});
})(jQuery);

Add the JavaScript files (we also need some additional theme functions provided by AJAX Solr):

<script type="text/javascript" src="../../lib/helpers/ajaxsolr.support.js"></script>
<script type="text/javascript" src="../../lib/helpers/ajaxsolr.theme.js"></script>
<script type="text/javascript" src="widgets/CountryCodeWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CountryCodeWidget({
  id: 'countries',
  target: '#countries',
  field: 'countryCodes'
}));

We will need the following utility function to implement the widget, so add it to reuters.js:

$.fn.showIf = function (condition) {
  if (condition) {
    return this.show();
  }
  else {
    return this.hide();
  }
}

Now, we’re ready to implement afterRequest:

afterRequest: function () {
  $(this.target).empty();

  var options = { '': '--select--' };
  for (var facet in this.manager.response.facet_counts.facet_fields[this.field]) {
    if (facet.length == 2) { // only display country codes
      options[facet] = facet + ' (' + this.manager.response.facet_counts.facet_fields[this.field][facet] + ')';
    }
  }
  $(this.target).append(AjaxSolr.theme('select_tag', 'country', AjaxSolr.theme('options_for_select', options)));

  var self = this;
  $(this.target).find('#country').change(function () {
    var value = $(this).val();
    if (value !== '') {
      if (self.add(value)) {
        self.manager.doRequest(0);
      }
    }
  });
}

The first block of code after emptying the target compiles a list of options for a select tag and appends a select tag, with an id of #country, with those options to the target. See the ajaxsolr.theme.js file under the helpers directory for documentation on the select_tag and options_for_select theme functions. The rest of the block should be familiar.

In the second block of code, unlike the tagcloud widget, we cannot use the handy clickHandler API method in the jQuery.change function, because select and a tags behave differently. We introduce the AbstractFacetWidget add API method. add returns true if the filter query was added (a filter query will not be added if it has already been added). If it returns true, the widget sends a request the Solr.