Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Rush
James Rush
Courses Plus Student 256 Points

Trying to pass a Javascript variable to PHP without a form?

Hello, I am trying to pass a users timezone fetched with the javascript below to PHP.

The only way I know how to do this is with a form, which I am using at the login. However, since the users can stay logged in for three months, I am trying to have it update a PHP variable on each new page to use in updating the MySQL database whenever the user goes from one page to another.

  var counter = 1;
  var interval = setInterval(function () {
      document.getElementById("timezone").value = jstz.determine().name();
  });

This does seem to be possible but I have no idea how to do this as my javascript skills are very limited. I think it might, in a shorter way, be possible to send the javascript variable straight to the database, if anyone can help, I use a PDO statement to connect to the database.

I am using this script to get the timezone https://bitbucket.org/pellepim/jstimezonedetect/src/6c427658686c664da52c6a87cd62ec910baab276/dist/jstz.js?at=default&fileviewer=file-view-default

Thank you for any help.

5 Answers

Kevin Korte
Kevin Korte
28,149 Points

The first thing that came to mind might be an ajax script that ran when the window or document was loaded. But I also wonder how many times will your users be using the service in a different time zone? Would it be sufficient to have them set or confirm their time zone when they create an account and then give the ability to manually update their time zone in their settings if they wanted to?

I'm just wondering if the overhead to do an ajax call and update your database on every single page update and refresh is just going to be too expensive to do for something that probably doesn't change much, and I think is reasonable to leave it to the user to update as needed.

James Rush
James Rush
Courses Plus Student 256 Points

Hello Kevin, I am trying to avoid that mainly because of how annoying it can be changing the timezone for a site that uses times on every page. There is also a cross-user scheduling part so making sure users are in their assumed timezone by default it would be very helpful and also helpful with saying GOOOOD morning to users. I am trying to make the timezones function much like how Facebook updates a users timezone when they change their system time, go to and then reload a post page.

Kevin Korte
Kevin Korte
28,149 Points

Ohh, Is the time stamp being stored in UTC on the server?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

One more idea that came to mind this morning when I was thinking about your problem - what about having your php server return return the the time zone it has in the database for the user.

Then use a little bit of simple javascript to fetch that value, and compare it to what the timezone script you linked above returns.

If the timezone the script returns matches the one the database returns, nothing happens.

If they are different (ie. a user switched time zones), then use an ajax call to update the database with the new timezone. On the next page reload, the times could be right again.

You could do this check on every page load on the client side, but you're only making your server/database do a write operation when it's necessary, instead of every time.

James Rush
James Rush
Courses Plus Student 256 Points

Thank you Kevin. I couldn't get your previous helper function code to work, however, with moments.js and your last idea I figured everything out.

If you are wondering how I made it work, I have it checking if the stored timezone and the current timezone in offset format are equal in JS. If not, it adds the current timezone, in text format as I converted it to offset before, to a new cookie or an existing cookie with the same name.

So when the user goes to the next page, if they have the specific cookie, it gets the cookie's value, which is the new timezone, and updates the database with it using PHP. Lastly, it updates the cookie to expire in one day and sets the new cookie value to a default, which the PHP update script is set to ignore.

It took a while but it's all working. I am also stuck a little trying to figure something else out if anything comes to mind. https://teamtreehouse.com/community/any-idea-how-the-twitter-follow-button-works-on-external-sites

Again thanks.

Kevin Korte
Kevin Korte
28,149 Points

Hey awesome! Love it when a plan comes together. I'll look at the other one when I better can. :)

James Rush
PLUS
James Rush
Courses Plus Student 256 Points
James Rush
James Rush
Courses Plus Student 256 Points

It is being stored in PDT by default as that is the timezone the server is set too also. It is then converted in PHP to each users timezone but if you know a more efficient way to do this please let me know. I am stepping on new ground for myself with a lot of what I am doing at the moment, especially with javascript, so I am sure the way I am doing it isn't very efficient. I was thinking of setting it as UTC but the only difference I could see was in converting the timezone using the offset "-8" instead of converting it using the PHP timezones like America/Los_Angeles.

Kevin Korte
Kevin Korte
28,149 Points

Okay, here is what I'd think I'd do. There are a few ways to approach this, so I'm not saying this is the best way to do it, but this is the way I'd handle it.

I'd save all timestamps as UTC in the database. That way you have one consistent format to work with - you'll also have the most amount of tools available to go from a timezone to UTC and back again. I think that'll be easier then going from timezone to timezone.

Also, if your server every switches timezones, or you add more servers, the servers time is independent of the timestamp, which should help avoid confusion.

Then depending on your front end, I'd write some sort of helper function in Javascript that would take the UTC timestamp from the server and convert it into the clients timezone. Browsers should be able to reasonably guess what time zone the user is in, so let the browser do the work, instead of the server which won't have a great idea (unless you're also sending along an IP address to decode into a guesstimated time zone, but I won't go this approach).

Then, I might use something like moment.js. I love moment.js and use it in almost every single project, it's very powerful. Truth be told, it might be a little heavy for this scope of work, but it's so simple, and so reliable I'd probably still use it anyway.

Moment.js also has another package, moment-timezone which is an add-on and could be used to guess the users time zone. For instance you can use moment.tz.guess(); and it'll return the timezone the browser thinks's it is in, and then use that data to convert the UTC timestamp to the timezone and, then you can use moment.js to format the time into whatever string you want, and then return it back to the browser.

Sounds like a lot of work, but the browser should make quick work of it.

Here are the two libraries I referenced:

James Rush
PLUS
James Rush
Courses Plus Student 256 Points
James Rush
James Rush
Courses Plus Student 256 Points

Thank you Kevin. Just one thing, on the frontend the timestamp is currently served using PHP, in fact, its about 90% PHP since that is what I am knowledgeable in not Javascript. So, I was wondering what a time converting helper function in Javascript would look like and how it would get the timestamp, from PHP? Or if it can retrieve its self?

Kevin Korte
Kevin Korte
28,149 Points

Sure, what format are you saving now? Unix or ISO, or something else?

James Rush
PLUS
James Rush
Courses Plus Student 256 Points
James Rush
James Rush
Courses Plus Student 256 Points

Not entirely sure on the format, I think it's Unix. It is set to %Y-%m-%d %H:%i:%s in the database variables.

Kevin Korte
Kevin Korte
28,149 Points

Okay, are you using new DateTime() in PHP? I'll be honest, it's been a few years since I've worked with PHP, but that shouldn't matter too much.

A unix timestamp is the seconds passed since Jan 1, 1970 0:00am, which when I was typing this was 1508348615.

An ISO timestamp might look like 2017-10-18T14:52:37Z

In any regards, if you have a date object, your php server should be able to pass the timestamp as is to the client.

From there, with both moment and moment-timezone you should be able to do something like

function get_relative_time(timestamp) {
  //sets tz equal to something like America/Chicago
  var tz = moment.tz.guess();
  var date = moment(timestamp, tz);
  // Returns a formated timezone sensitive date similar to "Sunday, February 14th 2010, 3:25:50 pm"
  return date.format("dddd, MMMM Do YYYY, h:mm:ss a");
}

Again, that's all untested, that but that should accept a UTC date object from your PHP code, turn it into a moment wrapper, modify that moment wrapper to the guessed user timezone, format it however you want, and return it back to the client to be displayed in the browser.