Archive | October 2014

Time Zone issues on Heroku

I’ve run into this problem before and want to document the simple way that I finally fixed it.

I have Van model with a column called ‘departure_time’ in a Rails app this is a DateTime object. When a user/admin edits a van, they have a series of dropdowns to select the datetime using the datetime_select helper in Rails. Everything seems to be fine until I push to heroku, and then whenever I create a new van, or edit one, time time that I choose gets changed by 6 hours. I spend hour trying to figure this out on another app, and finally came across this simple solution:

Time.zone.local

I was using the bootstrap3-datetimepicker gem, which formats the datetime differently than what needs to go in the database, so I had to do some logic to parse that string into an acceptable datetime object, and then create a DateTime object with Time.new or Time.local.

Well, all I need to do to fixe the error is use Time.zone.local instead of Time.local. It now works locally and on Heroku.

Advertisements

Algorhythms LLC

I’ve recently started an LLC for my freelance Web Development business. Check it out at www.algorhythms.co

If you know anyone that needs a website or web app, send them my way!

Google Maps in Tabs

I was working on embedding 2 google maps on 2 tabs on a page, and came across a common problem. I want to document my solution, as many of the solutions I came across did not work for me.

I had a page with a tab for a US map, and a tab with an international map.

The problem was that When I clicked on the second tab (the international map), most of the map was grayed out, like this:
Screen Shot 2014-10-08 at 3.04.11 PM

I’d seen this problem on a few stackoverflow pages and blogs, with many suggested solutions. After trying several of them to no success, I made with work with simple solution.

Here is my original code (that didnt’ work):
The html with Bootstrap tabs:

And here is the Javascript using a JQuery google map plugin to do some cool clustering effects on the maps (details edited out and comments inserted):

The problem is that when you click on a new tab, the map object resizes for some reason, and does not resize correctly. The idea to fix this is to resize the map again when the tab is clicked, using JavaScript or some other event listener or something. Well, that didn’t work for me. What did work was to load the entire international map only when I clicked the tab, rather than using JQuery’s $(document).ready.

all I had to change was line 13 in the Javascript above from
jQuery(document).ready(function(e)
to
var loadInternationalMap = function() {

And then call that function when the tab was clicked (line 3 from the html above):

<a href="#international" role="tab" id="international-tab" onclick="loadInternationalMap();">International</a>

And viola, when I clicked on the international tab, the map loaded correctly.

I’m sure that this problem can be solved in many different ways depending on your particular situation, but the idea to to load (or resize, or re-initialize) the map once the tab is clicked, not just when the page is loaded.