Testing Elasticsearch In Your Rails 4 Application

What is Elasticsearch?

Elasticsearch is an open-source real-time search and analytics engine that runs on top of Lucene, a Java-based indexing and search library.

If you haven’t setup elasticsearch with your Rails application, you can read about how to do it in these articles:

Steps to setup your RSpec tests

Step 1: Configure spec_helper.rb with a truncation strategy

Below is a copy of my spec_helper.rb setup. The important part is the
config.around :each, elasticsearch: true block

Step 2: Here’s a snapshot of my database_cleaner.rb

Below is a copy of my database_cleaner.rb setup.

Step 3: Use a tag to denote your elasticsearch tests

Below is a gist copy of a post_specs.rb file. Note that I’m calling the “posts” action of the API controller (Posts) which then runs a search against the Post model using ElasticSearch.

Note the use of the elasticsearch and commit tags. I’m also calling
sleep to allow a delay so the test index has time to get built. I
don’t like this solution, but for the moment it’s working and I’ll
update this post if I find a better way.

How to Implement jQuery Colorbox

What is jQuery Colorbox?

jQuery Colorbox is a lightbox plugin that supports “photos, grouping, slideshow, ajax, inline, and iframed content.” In a nutshell, you can create nice looking popup boxes to display pictures and text.

What did I do with it?

In my particular use case, I had an HTML/CSS webpage (with some Javascript thrown in) that needed a popup that met the following conditions:

  1. If a user visited the webpage and didn’t click a checkbox in the colorbox that said “Don’t show again”, then the colorbox would keep appearing everytime they visited.

  2. If a user visited the webpage clicked the checkbox that said “Don’t show again”, then the colorbox would no longer appear ever again (actually, I set an expiration date of 10 years, but more on this later).

  3. The popup also had to be a certain color.

The following steps tell you how to implement the colorbox.

Step 1 – Add some custom styling

To change the colorbox styling, I modified the colorbox.css file from the example1 folder of the colorbox plugin. Essentially, I removed the background images and used background colors instead.

01
02
    #cboxTopLeft{width:5px; height:5px; background: #990000 no-repeat -101px 0;}
03
    #cboxTopRight{width:5px; height:5px; background: #990000 no-repeat -130px 0;}
04
    #cboxBottomLeft{width:5px; height:5px; background: #990000 no-repeat -101px -29px;}
05
    #cboxBottomRight{width:5px; height:5px; background: #990000 no-repeat -130px -29px;}
06
    #cboxMiddleLeft{width:5px; background: #990000 left top repeat-y;}
07
    #cboxMiddleRight{width:5px; background: #990000 right top repeat-y;}
08
    #cboxTopCenter{height:5px; background: #990000 0 0 repeat-x;}
09
    #cboxBottomCenter{height:5px; background: #990000 0 -29px repeat-x;}
10

Step 2 – Add the inline div

1
2
  <div id="overlay_display" style="display: none;">
3
    <div style="font-style: italic; color: #666; padding: 10px 10px 10px 10px;">
4
      <p style="font-size: 120%;">Check "who you are" and "your responsibilities" to view a more complete list.</p>
5
      <br/><br/>
6
      <p><input type="checkbox" name="display_permission" id="display_permission" value="true">Don't show anymore.</p>
7
    </div>
8
  </div>
9

Step 3 – Add the jQuery code

There are 3 different things going on:

  1. The function check_cookie() checks to see if a cookie of a certain name has been set. If it has, then it returns true, otherwise it returns false.

  2. The $(‘#display_permission’).change() function checkts to see if the checkbox in the colorbox has been checked. If it has, then it sets a cookie by the name of no_overlay_display to expire 10 years from now.

  3. Finally, $(“ul#roles li”).click(), checks to see if it’s a user’s first browser session and a cookie has not been set. If both those conditions are true, then it will open a colorbox for several seconds before closing it, allowing the user to check a checkbox if they don’t want to see the colorbox again (or 10 years, since that’s what the expiration time is set to in the cookie). You’ll also notice I fade the colorbox in with the jQuery fadeIn() method and fade it out with the fadeOut() method.

01
02
function check_cookie(cname) {
03
  var dc = document.cookie;
04
  var exists = false;
05
  var exists_index = dc.indexOf(cname);
06
  if (exists_index >=0) {
07
    exists = true;
08
  }
09
  return exists;
10
}
11
 
12
$('#display_permission').change(function(e){
13
    var checkit = this.checked;
14
    if (checkit) {
15
      var now = new Date();
16
      var time = now.getTime();
17
      var expireTime = time + 315569259747; //expire 10 years from now
18
      now.setTime(expireTime);
19
      document.cookie = 'cookie=no_overlay_display;expires='+now.toGMTString()+';path=/';
20
      setTimeout($.colorbox.remove, 500); //wait 1/2 sec before destroying colorbox
21
    }
22
  });
23
 
24
var max_sessions = 0;
25
$("ul#roles li").click(function(e) 
26
{
27
  if (!check_cookie("no_overlay_display")&amp;&amp;max_sessions<1) {
28
    max_sessions++;
29
    $.colorbox({ 
30
        left: "30%",
31
        width: "200px",
32
        height: "150px",
33
        inline: true, 
34
        href:"#overlay_display",
35
        overlayClose: true,
36
        transition: "none",
37
        onLoad: function ()
38
        {
39
            $('#overlay_display').fadeIn();
40
            setTimeout($.colorbox.close, 7000);
41
        },
42
        onClosed: function ()
43
        {
44
            $('#overlay_display').fadeOut();
45
        }
46
    });
47
  } //end if
48
});
49

Step 4 – Don’t forget to link to the stylesheet and javascript files in your main webpage

1
2
<link href="stylesheets/colorbox.css" rel="stylesheet">
3
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
4
<script src="javascripts/main.js"></script>
5

How to Add jQuery UI Datepicker To Your Rails 4 Application With Formtastic and Cocoon

What is Formtastic, Cocoon, and jQuery UI Datepicker?Formtastic is a gem that lets you add forms more easily to your Rails application. Cocoon allows you to add dynamic nested forms to your Rails application using jQuery. jQuery-ui Datepicker

Continue Reading …

How To Move an Existing Github Repository to Bitbucket

Moving an Existing Github Repository to BitbucketHere is the link to the procedure on coderwall…

Continue Reading …

How To Save Nested Attribute Checkboxes With Formtastic and Cocoon and Avoid the TypeError

Avoiding the TypeError: can’t cast Array to stringRecently, I was inserting nested attribute checkboxes using Formtastic and Cocoon and was cruising along with all my other nested forms partials until I got a dreaded TypeError: can’t cast Array

Continue Reading …

How To Setup jQuery Autcomplete With Elasticsearch In Your Rails Application

What is jQuery autocomplete? The jQuery autocomplete plugin enables your users to receive suggestions while they type keywords in an input field. How do you use it with elasticsearch? If you haven’t setup elasticsearch with your Rails application,

Continue Reading …

How to Setup Elasticsearch in your Rails App in Production

Step 1 - Install elasticsearch in your Rails Application in ProductionIf you haven’t setup elasticsearch in your Rails application in development, this article tells you how to do so in LinuxStep 2 - Create the search indices on your Heroku

Continue Reading …

How To Setup Elasticsearch In Your Rails Application In Development

Step 1 - Install elasticsearchIf you haven’t installed elasticsearch on your local development machine, this article tells you how to do so in LinuxStep 2 - Add the right ruby gems for the Ruby elasticsearch client in your Gemfile and bundle

Continue Reading …

How To Install Elasticsearch On Linux for Rails Development

What is elasticsearch?Elasticsearch is an open-source real-time search and analytics engine that runs on top of Lucene, a Java-based indexing and search library.How to install it on Linux Mint 16 and Ubuntu 14.04Step 1 - Download

Continue Reading …

How To Squash Your Last 2 Git Commits

Why Squash Commits? If you’ve been working with Git for a while you might start to wonder why you can’t combine that last trivial “hello world” type commit with your previously more meaningful commit.Fortunately, you don’t have to wonder as Git

Continue Reading …