i18n for outfits/new.js

app/views/outfits/new.html.haml

@@ -87,11 +87,18 @@
         - @newest_items.each do |item|
           = link_to image_tag(item.thumbnail_url), item
 
-- localized_cache :action_suffix => 'pet_query_notice' do
+- localized_cache :action_suffix => 'templates' do
   %script#pet-query-notice-template{:type => 'text/x-jquery-tmpl'}
     .success
       %img.inline-image{:src => '${pet_image_url}'}
       = t '.pet_query.notice_html', :pet_name => '${pet_name}'
+  
+  %script#preview-pet-type-not-found-template{:type => 'text/x-jquery-tmpl'}
+    = t '.preview.pet_type_not_found', :color_name => '${color_name}',
+        :species_name => '${species_name}'
+  
+  %script#preview-pet-not-found-template{:type => 'text/x-jquery-tmpl'}
+    = t '.preview.pet_not_found'
 
 - content_for :javascripts do
   = include_javascript_libraries :jquery, :jquery_tmpl

config/locales/en-meep.yml

@@ -590,6 +590,10 @@ en-meep:
     
     new:
       tagline: Meeps made meepy!
+      preview:
+        pet_type_not_found:
+          We haven't meeped a %{color_name} %{species_name}. Meep?
+        pet_not_found: Pet not meeped.
       load_pet:
         legend: Enter your pet's meep
         submit: Meep my outfit!

config/locales/en.yml

@@ -609,6 +609,10 @@ en:
     
     new:
       tagline: Neopets wearables made easy!
+      preview:
+        pet_type_not_found:
+          We haven't seen a %{color_name} %{species_name}. Have you?
+        pet_not_found: Pet not found.
       load_pet:
         legend: Enter your pet's name
         submit: Plan my outfit!

public/javascripts/outfits/new.js

@@ -19,9 +19,13 @@ var Preview = {
     preview_el.addClass('loading');
     response_el.text('Loading...');
   },
-  notFound: function (str) {
+  failed: function () {
     preview_el.addClass('hidden');
-    response_el.text(str);
+  },
+  notFound: function (key, options) {
+    Preview.failed();
+    response_el.empty();
+    $('#preview-' + key + '-template').tmpl(options).appendTo(response_el);
   },
   updateWithName: function () {
     var name = name_el.val(), job;
@@ -107,19 +111,19 @@ $(function () {
   }).error(function () {
     if(Preview.Job.current.loading) {
       Preview.Job.loading = false;
-      Preview.notFound('Pet not found.');
+      Preview.notFound('pet-not-found');
     }
   });
   
   var selectFields = $('#species, #color');
   selectFields.change(function () {
-    var type = {}, name = [];
+    var type = {}, nameComponents = {};
     selectFields.each(function () {
-      var el = $(this), selectedEl = el.children(':selected');
+      var el = $(this), selectedEl = el.children(':selected'), key = el.attr('id');
-      type[el.attr('id')] = selectedEl.val();
+      type[key] = selectedEl.val();
-      name.push(selectedEl.text());
+      nameComponents[key] = selectedEl.text();
     });
-    name = name.join(' ');
+    name = nameComponents.color + ' ' + nameComponents.species;
     Preview.displayLoading();
     $.ajax({
       url: '/species/' + type.species + '/color/' + type.color + '/pet_type.json',
@@ -134,11 +138,11 @@ $(function () {
           job.name = name;
           job.setAsCurrent();
         } else {
-          Preview.notFound("We haven't seen a " + name + ". Have you?");
+          Preview.notFound('pet-type-not-found', {
+            color_name: nameComponents.color,
+            species_name: nameComponents.species
+          });
         }
-      },
-      error: function () {
-        Preview.notFound("Error fetching preview. Try again?");
       }
     });
   });