diff --git a/app/views/outfits/new.html.haml b/app/views/outfits/new.html.haml
index c5c0f229..e5b59621 100644
--- a/app/views/outfits/new.html.haml
+++ b/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
diff --git a/config/locales/en-meep.yml b/config/locales/en-meep.yml
index f4070d2c..3012c48e 100644
--- a/config/locales/en-meep.yml
+++ b/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!
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 61d9aca5..cf34f8e4 100644
--- a/config/locales/en.yml
+++ b/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!
diff --git a/public/javascripts/outfits/new.js b/public/javascripts/outfits/new.js
index 5889262d..4a1f29fb 100644
--- a/public/javascripts/outfits/new.js
+++ b/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');
- type[el.attr('id')] = selectedEl.val();
- name.push(selectedEl.text());
+ var el = $(this), selectedEl = el.children(':selected'), key = el.attr('id');
+ type[key] = selectedEl.val();
+ 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?");
}
});
});