How do I do all this with unobtrusive Javascript and Rails you ask? Good question. Let me show you. Don’t forget to install the plugin (or use the gem).

Let’s start out by adding the drop down menu to our view. In my case I have it in a partial for the address part of a form. You’ll have to modify this slightly to pick up the values of the form if the partial handles edits as well. This one is just for a new method as it uses a default country of US and its states. Note the div ID here of addressStates; we will be using this later in the javascript.

Since we are rendering a partial, we should add that partial as well. Create the file app/views/addresses/_states.html.erb and add the code below. You’ll notice that if no set of states exist in the country selected, I render a text_field instead. This is obviously optional and could potentially lead to issues if the list of states for a particular country is updated and the values in your DB don’t match.

Now, let’s update our application.js file. Because of the way the form is laid out, my element ID works out to be address_country. Make sure you use the correct element ID otherwise the action will not fire. (Thanks to Joel for helping with the javascript).

You’ll notice that when we populate the div, we wrap it in javascript <script> tags. This is because the response we get is an AJAX response. In order for the browser to render it properly, we need to wrap it in script tags.

Before the above Javascript will work, we have to setup a route specifically to handle this request. So add the following code to your config/routes.rb. I chose to put this in the addresses controller (since it’s a functional part of an address, it just seemed logical), but feel free to put it wherever you see fit. Just make sure you then add the method to the proper controller.

Now we need to add the method to our controller. As I said, I chose the addresses controller in my project because its logical. So I opened up the app/controllers/addresses_controller.rb and added the following code.

And there you have it. A straightforward way to keep your list of countries and states updated and consistent. Hope this works for you as well as it does for me.

Related posts:

1. Checking Roles in Views Using RoleRequirement
2. One Time Modal Windows With Rails and Fancybox
3. Model Specific Formatted Search Results Using Thinking Sphinx

Let’s take a look at what needs to go into the models to support this. If you have a model that uses a slug generated via to_param, then your code will look like the top model, If you are using the normal numeric id convention, then it will look like the bottom model. The reason for the specifically named methods get_title and get_description will become apparent when you start displaying bookmarks. The thought process is that you can use a consistent set of calls for displaying the bookmark information and put the code to grab that information in the model where it belongs rather than loading up the helper methods. What should also be noted is that the title and description fields are not always consistent across models. Therefore the method naming conventions returns the proper column with consistent method names.

Slug based model:

Numeric ID based model:

Now that we have the code in our models, controllers, and the database is setup, let’s put it into our views so we can actually take advantage of our bookmark system. Let’s dive right in to adding the code. Inside our show view, we just add the lines below. We check to see if the user is logged in. If they are, check their bookmark status of this page and show the appropriate image.

The are a few helper methods that are required here to support this functionality. The bookmarks_helper.rb looks as follows. Notice the use of the send method in the link_to_bookmark method. That enables us to abstract the link_to to be for any model_path that you have in the Bookmarktypes.

You’ll recognize some of this code from the model and the controller. I know this isn’t necessarily DRY, but I am by no means a Rails expert. But I do know this code works.

The last item to tie this whole thing together is allowing the user to view their bookmarks. We already have the code for the show page in our controller. Keeping that in mind, let’s take a look at using that and our helper methods to give a decent presentation of our bookmarks.

And there you have it. Your users can now bookmark pages and view their list of bookmarks in a profile type setting. There might be other ways to do this, but this way has worked for me thus far. Good luck.

Related posts:

1. Adding AJAX Bookmarks to Your Rails Application (Part 1 of 2)
2. Model Specific Formatted Search Results Using Thinking Sphinx
3. Shortcut Notation in Rails Callbacks

The way this works is that you add a bookmark icon (which is initially disabled) to a show <model_name> page. When the user clicks on the bookmark icon, an AJAX query will be made in the background and update the users bookmark lists. I am approaching this from an abstract methodology. Meaning that I have “forced” these methods to work with models executed in various fashions (as I give examples of below). The AJAX call is going to be simply work as a toggle. It will actually call a toggle method in the bookmarks controller and change the current value and replace the image. The user can then view the pages they have bookmarked in their profile.

I have decided to break this into a multi-part blog entry because it ends up being quite long. Not necessarily in how long it takes, just the amount of space it takes to show all the code. I have done my best to only show relevant code and maintain brevity. Note: I will not cover how to allow for unobtrusive AJAX calls. That is beyond the scope of this set of posts.

I chose the following images to represent this. The empty blue star signifies that a bookmark is disabled. The filled in blue star represents the fact that the page is bookmarked by the current user. You can go to Google images or anywhere else to find enabled/disabled images. I just chose these particular images because they matched my site.

Star Bookmark Enabled

Star Bookmark Disabled

The first thing you need to do is to create the migrations for bookmarks and bookmarktypes. Make sure the bookmarktypes exist for every model that you want to allow to be bookmarked and are the singularized lowercase version of the model name (e.g. Users -> user, Businesses -> business).

Here we are adding the bookmark and bookmarktype model.

Once the models and migrations are complete, then we can go ahead and add the controller code. Create a bookmarks controller. This will contain the toggle method that will be doing the majority of the legwork. You’ll notice that the toggle method below uses a url param. This works in the following way:

1. When the AJAX link is clicked on the model show view page, it will send an AJAX request to bookmarks controller that looks like this:
   • http://website/bookmarks/toggle?url=/businesses/mybusiness&_=1258315454002
   • http://localhost/bookmarks/toggle?url=/user/1234&_=1258315600823

   The _ param is simply the authenticity token put into a GET string.

2. The URL parameter will be broken down into an array:
   • [0]: empty   OR   empty
   • [1]: businesses   OR   user
   • [2]: mybusiness   OR   1234
3. We get the modeltype (which will soon act just like a class like you would call Business.find or User.find). We do this by capitalizing it and constantizing it. We capitalize it so it looks like the model class name otherwise we generate a nomethod error. Constantizing the model name turns it into something that is usable as a class: Bookmarktype.find_by_model(uri_array[1].singularize).model.capitalize.constantize
4. This is where it gets interesting and you get to deal with multiple types of URLs in a model: modeltype.find_id_by_site_url(request_uri). The find_id_by_site_url method is a method that requires definition in each model because it can be different in each model. We will cover this later.
5. Then we check to see if the bookmark exists by calling the find method we wrote in our Bookmark model. We use the result to determine whether the bookmark should be added or removed in the actual toggle process.
6. The bookmark status is toggled in the database, either added or deleted. The delete_all method is used because there is no way in Rails (that I could find) to delete a row with no primary key.
7. Finally, the Javascript is rendered so nothing happens to the original calling page.

And finally, here is the actual bookmarks controller. We will go through the usage of the show method later.

Lastly on the AJAX side of this, we need to put response view together. This is a very simple line of code in the toggle.js.erb:

And for the unobtrusive aspect of Javascript and in the interest of keeping Javascript all in the same place, add that function to your application.js:

Click here for part 2 of this series.

Related posts:

1. Adding AJAX Bookmarks to Your Rails Application (Part 2 of 2)
2. One Time Modal Windows With Rails and Fancybox
3. Shortcut Notation in Rails Callbacks

First thing you’ll need to do is download FancyBox and copy the stylesheets, images, and Javascript files to their proper/desired location in your Rails app. Style the window according to your likings.

Whether it is right or wrong, I did this entirely in the view, without even pulling the Javascript out into the application.js (or even another Javascript file for that matter). My reason was that I only want the modal window showing up on this page. If you want your modal window to show up somewhere else (or on every page), then put the code in your layout. But remember that this call will be executed every time the page loads. I put mine in a profile page which doesn’t get accessed that often so the conditional is not checked quite as frequently.

My application uses Facebook Connect and grabs the users Facebook Proxy email address (FB app developers will know what this is). So I check if that’s the email I have for the user. If yes, then I pop up a modal window on page load only once to get their regular email address and possibly a password so they can login to their account without Facebook Connect if they want. When the modal window is shown, a variable is set in the cookie (note that this cookie is shared with authlogic for sessions) to ensure that the modal window isn’t shown again.

The explanation of the code is below with comments in the code.

The code that goes in the view is as follows:

Now you have a modal window that is only shown once.

Related posts:

1. Country-State Select Using Carmen and jQuery
2. Adding AJAX Bookmarks to Your Rails Application (Part 1 of 2)
3. Adding AJAX Bookmarks to Your Rails Application (Part 2 of 2)