Why am I a getting ActionView::Template::Error (incompatible character encodings: ASCII-8BIT and UTF-8)

Question

I am getting the following error.

ActionView::Template::Error (incompatible character encodings: ASCII-8BIT 
<td><%= simple_format(row.notes) %></td> 

Here is my ERB file. The customer can type anything in the notes (ö, `, ", ', etc...)

If I delete this line <td><%= simple_format(row.notes) %></td> then it says the incompatible error is the line above <td><%= row.notify_email %>

If I then delete the <td><%= row.notify_email %></td> line it says the error is in the following lines (ending tr).

95:          
96:       </tr> 

--

<% # encoding: utf-8 %>
<% content_for :head do -%>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="/jquery-ui-1.10.3.custom.min.css" />
  <script>
    $(document).ready(function() {
      $("#datepicker").datepicker();
      $("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
    });

    function editEvent(id){
      $('#eventDetailModal').modal('show');
      var request = $.ajax({
        url: "/ems/scheduled_call_details",
        type: "GET",
        data: {id : id},
        dataType: "json"
      });

      request.done(function(data) {
        $('#eventId').val(data._id);
        $('#pickup_address').val(data.pickup_address);
        $('#dropoff_address').val(data.dropoff_address);
        $('#phone').val(data.notify_phone);
        $('#email').val(data.notify_email);
        $('#notes').val(data.notes);
        $('#datepicker').val(data.edit_date);
        $('#send_hour').val(data.edit_hours);
        $('#send_minute').val(data.edit_minutes);
        $('input[name=ampm][value="' + data.edit_ampm + '"]').prop('checked', true);
        $('input[name=type][value="' + data.amb_type + '"]').prop('checked', true);
      });

      request.fail(function(jqXHR, textStatus) {
        console.log( "Request failed: " + textStatus );
        alert("The request failed. Please close the dialog window and try again.")
      });
    }
  </script>
<% end -%>

<% if flash[:error] -%>
<div class="alert alert-error">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Edit Failed!</strong> <%= flash[:error] %>
</div>
<% end -%>
<% if flash[:notice] -%>
<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> <%= flash[:notice] %>
</div>
<% end -%>
<table class="table">
  <thead>
    <tr>
      <th>*</th>
      <th>Requester</th>
      <th>Date</th>
      <th>Pickup</th>
      <th>Dropoff</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <% cur_month = nil %>
    <% @data.each do |row| %>
      <% if cur_month.nil? %>
      <% cur_month = row.send_time.strftime("%B") %>
      <tr>
        <td colspan="8" style="text-align: center"><span class="lead"><strong><%= cur_month %></strong></span></td>
      </tr>
      <% elsif cur_month != row.send_time.strftime("%B") %>
      <% cur_month = row.send_time.strftime("%B") %>
      <tr>
        <td colspan="8" style="text-align: center"><span class="lead"><strong><%= cur_month %></strong></span></td>
      </tr>
      <% end %>
      <% if row.send_time.utc < Time.now.utc -%>
      <tr style="background-color:#F5F5F5">
      <% elsif row.removed -%>
      <tr style="background-color:#EE8E8E">
      <% else -%>
      <tr>
      <% end -%>
        <td><%= link_to '<i class="icon-remove"></i>'.html_safe, url_for(:controller => "ems", :action => "delete_scheduled_call", :id =>  row.id.to_s), data: {confirm: "Are you sure you want to delete this scheduled call?"} %>&nbsp;&nbsp;&nbsp;<a href="javascript:editEvent('<%= row.id.to_s %>')"><i class="icon-pencil"></i></a></td>
        <td><%= User.find(row.user_id).email %></td>
        <td><a href="#" title="Send Alert: <%= format_date_calendar_time(row.warning_time, current_user) %>
Place Call: <%= format_date_calendar_time(row.actual_send_time, current_user) %>"><%= format_date_calendar_time(row.send_time, current_user) %></a></td>
        <td><%= row.pickup_address %></td>
        <td><%= row.dropoff_address %></td>
        <td><%= row.notify_phone %></td>
        <td><%= row.notify_email %></td>
        <td><%= simple_format(row.notes) %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<div id="eventDetailModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="eventDetail" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Edit Event Details</h3>
  </div>
  <div class="modal-body">
    <%= form_tag({:controller => :ems, :action => :edit_scheduled_call}, {:method => "post"}) do %>
      <input type="hidden" name="id" value="" id="eventId">
      <label><strong>Pickup Address</strong></label>
      <input type="text" name="pickup_address" id="pickup_address">

      <label><strong>Dropoff Address</strong></label>
      <input type="text" name="dropoff_address" id="dropoff_address">

      <label><strong>Vehicle Type</strong></label>
      <% VehicleType.valid_types.each do |x| %>
        <input type="radio" name="type" value="<%= x %>"><%= x %></br>
      <% end -%>

      <label><br/><strong>Phone</strong></label>
      <input type="text" name="phone" id="phone">

      <label><strong>Email</strong></label>
      <input type="text" name="email" id="email">

      <label><strong>Notes</strong></label>
      <textarea rows="3" name="notes" id="notes"></textarea>

      <label class="control-label" for="send_date"><strong>Date</strong></label>
      <div class="controls">
        <input type="text" name="send_date" id="datepicker">
      </div>
      <label class="control-label" for="send_time"><strong>Time</strong></label>
      <div class="controls">
        <select name="send_hour" class="input-mini" id="send_hour">
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>:<select name="send_minute" class="input-mini" id="send_minute">
          <option value="00">00</option>
          <option value="05">05</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="25">25</option>
          <option value="30">30</option>
          <option value="35">35</option>
          <option value="40">40</option>
          <option value="45">45</option>
          <option value="50">50</option>
          <option value="55">55</option>
        </select> <input type="radio" name="ampm" value="AM" checked="checked">AM <input type="radio" name="ampm" value="PM">PM
      </div>

      <button type="submit" class="btn">Submit</button>
    <% end %>
  </div>
</div>

I have all this already (see below) and the file is created 18 months ago in Sublime and has remained unchanged. Everything was working fine for 18 months. A customer typed something into the notes page and then this error happened. The DB is encrypted so I cannot see who typed what and what was typed.

Make sure config.encoding = "utf-8" is in the application.rb file. Make sure you are using the 'mysql2' gem. Put # encoding: utf-8 at the top of file containing UTF-8 characters. Above the ::Application.initialize! line in the environment.rb file, add following two lines:

Encoding.default_external = Encoding::UTF_8 Encoding.default_internal = Encoding::UTF_8