Start a free Courses trial
to watch this video
In this video we add a new 'Tag with Location' toggle switch to our form in order to control whether or not notes are tagged with location data.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up