Geolocation: Updating the Form

[Jim Hoskins] In the previous two Master Classes, we used Backbone.js 0:00 and jQuery Mobile to create a note-taking application 0:04 that we can use on our mobile devices. 0:07 You know what would be a really neat feature to add to this? 0:09 The ability to take notes [snaps fingers] 0:12 on location! 0:14 [?music?] 0:16 So the next step in our application is we're going to want to add Geolocation capabilities 0:28 to our notes. 0:34 Basically, what we want to be able to do is anytime we create a note 0:35 is to be able to tag it with the current latitude and longitude 0:38 of our device or of our computer. 0:42 So right now, we're going to be working off of what we completed 0:45 in the last two Master Classes. 0:48 So basically, we have this application, we can create new notes, 0:50 and basically, all we can do is input a title and a body 0:57 and save it, and we'll be able to look at our notes through our interface right here, 1:01 so we can see the title and body of the note. 1:06 So what we want to be able to do is attach the metadata 1:10 with a latitude and longitude and be able to display not only the coordinates 1:13 on this page but even a map with a pinpoint on it so you can see 1:17 exactly where that note was taken. 1:21 So the first major thing we want to change is the form for creating a new note. 1:26 Basically, what I want to be able to do 1:30 is decide whether or not we're going to tag a note 1:32 with a specific location. 1:35 In some cases, I may not want my note to be associated with a location, so in this form, 1:37 I'd like to be able to say yes or no. 1:42 So what I'd like to be able to do is use the jQuery UI switch. 1:45 jQuery Mobile Framework http://jquerymobile.com/demos/1.0a4.1/a 1:49 Now, we can take a look at these different components by going down to Form elements 1:51 in the documentation for jQuery Mobile. 1:55 And if we take a look at the Flip toggle switch, we can see this gives us 1:57 a nice iPhone-esque style switch where we can switch it on and off 2:01 for saying that we do or do not want to use Geolocation. 2:05 Now, the syntax for this is very similar to our other form fields. 2:11 We're going to create a field container and a label 2:14 and the actual element that will describe our switch here 2:17 is going to be a select element with two options. 2:21 Let's go ahead and see if we can add this to our New Note form. 2:24 Now, I'm going to go over to our code 2:30 and since we're starting off with the actual form HTML, 2:33 I'm going to open up index.html and let's find the section of code 2:36 where we defined our form, 2:42 and that is right here. 2:46 So here we can see our normal jQuery Mobile page 2:49 and its header and its content and the form is defined right in here. 2:53 We have our field container for our title 2:59 and for our body, so beneath it, we want to go ahead and add the field 3:02 for our Geolocation. 3:07 So I'm going to start off with a div 3:14 and I'm going to give it a data-role="fieldcontain" 3:18 and let's close off our /div. 3:24 Then we want to give it our <label> 3:28 and we're going to call this field "locate" 3:33 and we'll give the label value Tag With Location</label>. 3:38 And now for the actual select value, we'll do a <select> tag here, 3:47 give an id="locate" so it matches up with our label. 3:52 We're going to give it a name="locate" so we can grab its data in the code. 3:59 And then, the important part is to give it the data-role of slider, 4:04 and this will tell jQuery Mobile that we want this select field to be rendered as a slider. 4:08 We'll give it data-role="slider">. 4:13 </select> 4:19 So now we just have to give it the yes and no values for our actual slider, 4:23 so we'll give it two option tags: 4:28 one with the value of "no" which I want to be the default, 4:30 value="no">No</option> 4:35 and one with the value="yes">Yes</option>. 4:40 And that will complete our slider. 4:52 So let's go ahead and go back to our code and see if it works. 4:55 I'm going to start debugging in Chrome because it's going to be a little bit faster 4:58 and easier for us to iterate, but every once in a while, we'll go back to the iPhone simulator 5:02 and test it out to see if it looks good in a mobile device. 5:06 So I'm switching over to Chrome, and I'll switch back to localhost here and refresh, 5:10 and I'm going to pull up our JavaScript console just to make sure 5:14 that no errors are occurring. 5:18 And when I pull up the New Note, 5:20 we have our Title field, our Body field, and our Tag With Location, 5:26 which we can flip on and off. 5:31 So let's take a look at it in our actual device simulator here, 5:34 and if I pull up the New Note, we get Title, Body, and Tag With Location, 5:39 which we can flip on and off and it defaults to Off, or No. 5:43 So if we actually save this, 5:49 even if we turn on Yes, it's not going to actually save any data. 5:58 What we need to do now is go in to our code and detect whether or not 6:02 the slider was set to Yes. 6:06 In that case, we'll go ahead and add our Geolocation data to our note. 6:08

You need to sign up for Treehouse in order to set up Workspace

Sign up