Use Bootstrap Modal as UI Alert Popup Dialog In Rails

I found a cool new gem to easily let you somewhat customize the alert dialog boxes in your rails app.  I started out using the jQuery UI dialog and attempting to customize it myself, but ran into a bit of complications.  I found the data-confirm-modal gem to be a great solution.

As the documentation says, add the gem to your gemfile and run bundle.  Then don’t forget to add it to your application.js file:

//= require data-confirm-modal

Basically it just makes all alert popup dialogs become Bootstrap modals in your rails app, such as when you delete stuff or anytime you want a confirm dialog.

Props to ifad for a simple and useful gem!

Screen Shot 2014-09-28 at 4.42.19 PM

Put a Link in a Rails Notice

Sometimes you may want to put a link in your rails flash notice.  In my case I wanted to link to another site.

Here’s how.

In my controller:

notice: 'Click to go to <a href="www.yoursite.com">website.</a>'.html_safe

Notice the .html_safe function called on the string.

Credit here and here.

Change or Set Form Input Value with jQuery, CoffeeScript

So this is pretty basic, but it took me 10 minutes of Googling to figure it out.  If you need to specifically assign a value to a form input, here is how to do it via coffeescript:

$(".submit").on "click", ->
  email = $('input[name="user[email]"]').val();
  $('.hiddenEmail').val(email);

The key is the .val() method. To get the value of an element, you call the .val() method without passing in any parameters.

email = $('input[name="user[email]"]').val();

To set the value of an element, you pass in the value you want into the .val() method.

$('.hiddenEmail').val(email);

Some credit here.

Fixing Nested http Params Are HTML Escaped with Slashes

This may not be super common, but it was hard to debug for me. I had an error when I was posting form parameters using the .post_form method from one rails app to another, where a nested params hash was getting html escaped and ending up with tons of slashes or backslashes appearing in the params hash, like this:

Parameters: {"utf8"=>"✓", "authenticity_token"=>"anLqF1UcQULf35xHJZW5Ya9rjMAgkse7h1R=", "user"=>"{\"name\"=>\"nqne\", \"last_name\"=>\"nwen\", \"email\"=>\"laughing@gmail.com\", \"password\"=>\"foobartest\", \"password_confirmation\"=>\"foobartest\"}"}

Now obviously when I was trying to receive these parameters in my other rails app, it was not reading them correctly. Apparently this happens because the .post_form method turns nested hashes into escaped strings for some reason. This is the code that was giving me this error:

require "net/http"
uri = URI('http://www.myotherrailsapp.com')
x = Net::HTTP.post_form(uri, params)

As you can see, when I post a nested params hash via .post_form, it escapes them as html strings. The way I solved this was to switch to using the .post method. So replacing the third line above with:

http = Net::HTTP.new(uri.host)
response = http.post(uri.path, params.to_query)	

Note also that I call the .to_query method on the params hash. See this Stack Overflow question for an example of that. Essentially it converts a hash into a string.  Bingo, this solved it!

Another workaround that worked but is not ideal is to not use the rails form helper to create your form params.  So for example, the form I was submitting was created with standard rails form helpers:

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>
  <%= f.label :name, "First Name" %> <%= f.text_field :name, autofocus: true %>
  <%= f.label :last_name %> <%= f.text_field :last_name %>
  <%= f.label :email %> <%= f.email_field :email %>
  <%= f.label :password %> <%= f.password_field :password, autocomplete: "off" %>
  <%= f.label :password_confirmation %> <%= f.password_field :password_confirmation, autocomplete: "off" %>
  <%= f.submit "Sign up" %>
<% end %>

And that creates a nested params hash that the .post_form method escapes. But if instead I just use direct html to create the params, as in the email field below:

  Sign up with your email <input name="email" type="email" autofocus="true" />

Then it doesn’t get escaped by the .post_form method. I prefer the first method, as it allows you to keep the rails form helpers in place.

(another related SO question)

Hope this was helpful!

How to Remove the “X” on jQuery UI dialog

I’ve just recently started learning how to use the jQuery UI framework.  Seems very useful, and although I haven’t personally tested yet, supposedly has good cross browser support.

I use the jQuery UI dialog box on my site. I’ll write another post about how to customize them completely, but in this case I just wanted to remove the close “X” in the upper right corner that comes in the dialog box by default.  It’s super simple; you just need to add a CSS rule to make it’s display: none;

.ui-dialog-titlebar-close {
  display: none;
}

This removes the closing “x” from all dialog boxes. If you want to just remove it from a single one, then add your own custom class to the rule above, for example:

.ui-dialog-titlebar-close .no-x {
  display: none;
}

And then just add this class to whichever dialog box you want to get rid of the “x”.

$( "#dialog" ).dialog({
  dialogClass: "no-x",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Some credit also here

Alert Confirm Dialog in CoffeeScript

I was trying to figure out how to create a confirmation alert dialog in coffeescript. Turns out like almost everything in coffeescript, its super easy.

$(".mybutton").on "click", ->
  if confirm "Ask a question?"
    # if answer yes
  else
    # if answer no

credit here

How to Center Bootstrap Columns

Sometimes you want to center the columns when using Bootstrap.  I was using only like 3 columns of varying sizes, but I wanted to get them centered. So here’s how I did it, with all credit going to minimit and this article.

Add the .row-centered class to your rows and the .col-centered class to the columns in your html.

And here’s the css for those classes:

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}