Salsa Blog

Success Through Javascript: Working Around a Salsa Bug

by Allen Leonard

Hello, and welcome back to another installment of "Success through Javascript." Today, we're going to explore a workaround for a bug in Salsa, demonstrate how to fix it, and then make a tweak to the original bug to make the results even better.

The bug in Salsa comes to us courtesy of CPAWS (Canadian Parks and Wilderness Society) . CPAWS very kindly advised us that Salsa doesn't have the correct abbreviation for the province of Newfoundland. The official abbreviation is "NL" (for Newfoundland and Labrador) and not "NF" as it appears in Salsa.

This is a great example of how we can use Javascript to let the user see the correct value while Salsa is working on a bug. This is also a great example of making a single change that can have an effect anywhere that you are collecting a state or province.

Challenge: Change the abbreviation for Newfoundland

The challenge today, then, is to change the abbreviation for Newfoundland anywhere that it appears. "Newfoundland" is found in the list of states and provinces, so it can appear in any signup, donation, action or event page.

Also, for just a bit of fun, we'll also show the supporter "Newfoundland and Labrador" instead of just "Newfoundland". Y'know, just because we can, and because the screenshots will be more interesting if we do.

Where to put the Javascript

The best place to put this particular fix is in your main template. Doing that means that any Salsa page that uses the template will have this fix in place. Naturally, if you site uses more than one template, then this fix should go into the others, too.

Before

As you can see from the screenshot, the user sees "Newfoundland" in the list of states:

Procedure

Let's start with some caveats, if you don't mind:

  1. If you are testing this, and don't want to modify your default template, then copy it to a new template. If you have questions about doing that, please then please email us and we'll be glad to show you how.
  2. If you are on the DLCC node, then this procedure is not for you. Sorry. Please email us and we'll see what we can do to help out.

Okay! let's get started!

  1. Click on the "Website Management" tab, choose "templates" from the menu, and edit the template that you want this fix to be in.
  2. Go to the bottom of the template. Insert this script right before the </body> tag.
    &lt;script language="JavaScript" src="/salsa/include/loadjquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $("option[value='NF']").attr('value', 'NL');
    $("option[value='NL']").html("Newfoundland and Labrador");
    &lt;/script&gt;
    		
  1. When you are done, your code should look like this:
  1. Save your work. You are done!

After

When you open your signup (donation, event, action, etc.) form, click on the "State" button, and you'll see that "Newfoundland" has been replaced with "Newfoundland and Labrador":

To confirm that the abbreviation has changed, simply add a new supporter and choose "Newfoundland and Labrador" as the state. I did that, and here's what the supporter profile looked like when I got done:

There's "NL" right where we expect it. (My apologies to the Canadians in the audience. I used a U.S. zipcode and not an official postal code.)

Summary

We've learned that Javascript can be used to make workaround fixes to a page when Salsa is in the process of fixing a bug. We've learned a way to change the abbreviation for a state in the "State" field, and we can also change the text that the user sees.

Thanks for reading this blog. If you have any questions, or what more details, then send me some email , and I'll be glad to help out. Until next time, y'all have an excellent week!

Topics: Salsa