View Problems - Unwanted Elements

Every time we load a page to create or edit the pet, we see what looks like 0:00 a ruby debug string representing a pet near the top of the page. 0:04 We don't want users to see that, so we need to remove it. 0:08 But where is that page element coming from? 0:11 Elements of a rails view can come from any of several places. 0:14 Most HTML views are rendered using multiple files. 0:17 First there's a layout that includes elements that are shared among all your 0:20 site's pages. 0:24 Nested within the layout there's usually a template with the HTML for 0:25 an individual page like the owner index page or the pet edit page. 0:29 Finally, there are often one or more partials nested within the template. 0:33 These are used to share html code that would otherwise be repeated in more than 0:37 one template. 0:41 So how do we know which layout, template, and 0:42 partials were used to render the current page? 0:44 The rails log will tell us. 0:47 If we load the pet's new page, for example, and 0:48 then go to the terminal, we will see something like this in the rails log. 0:52 It says that it rendered the pet/new.html.erb 0:58 template within the application layout. 1:02 So let's start looking for the source of our debug string in the app views, 1:06 layouts, application.html.erb file. 1:12 We see at the top, this is an HTML document, here's the heading, 1:16 here's the body, the yield statement here, 1:22 just yields to a particular template to render the actual page content. 1:25 I don't really see anything that could render that pet debug string. 1:31 Next let's check the views pets edit dot HTML dot your BE file. 1:35 We see heading up here at the top, we see a request to render a form. 1:40 We see links to show a particular pet and go back to the list of all pets. 1:44 Again, I really don't see anything that would render a debug string here. 1:50 Let's check our terminal one more time. 1:54 The log also says that it rendered the pets/_form.html.erb file. 1:56 Remember this underscore at the start of the filename indicates that it's 2:02 a partial layout. 2:05 Let's take a look in that file. 2:07 Now what's this at the very top of the file. 2:10 We've got ERBM bed tag with the current pet object we're working on. 2:12 That's not supposed to be here, let's try removing it. 2:16 Save our work and refresh your page. 2:19 That took care of it. 2:24 The debug string is gone from both the new pet and edit pet forms. 2:26 This is supposed to be the vet app, yet for 2:31 every page we load we see sample app in the browser title bar. 2:33 The page title gets set by the title HTML element, but where's that coming from? 2:38 Well if we reload the current page, we'll see this in the log. 2:43 Let's load pets/edit.html.erb in our browser and 2:47 see if we can find the title tag. 2:52 There doesn't seem to be one there. 3:02 So let's go back to the terminal and see what else is in the log. 3:05 What's that layouts/application mentioned here? 3:08 If we go look at app views layouts application.html.arb, 3:11 we'll find the HTML template that all other templates for 3:17 our app get rendered within, and it contains the title tag. 3:20 If we update it to say Vet App, save our work and reload our page, 3:24 we'll see that the title gets updated to Vet App in every page on our site. 3:34 There's a copyright notice down here at the bottom of the page that seems 3:40 a little outdated. 3:43 Let me show you a trick that can save you a little time as long as you use 3:44 it carefully. 3:48 Most editors have a feature called find in files, find in project, or 3:49 something similar. 3:53 It will bring up a dialog that will let you search for 3:54 a string not just in the current file, but in every file on the project. 3:56 So we can copy the string shown in our browser, either the whole string or 4:01 just part of it. 4:06 And then choose Find, Find in Files from the menu. 4:08 The menu names will depend on your editor, but 4:11 that's where it is here in sublime text. 4:13 Now we just paste that string here in the find box and hit enter to search. 4:16 Your editor will scan for that string in every file of the project and 4:21 show you a list of all the matches. 4:24 In this case there's only one, and it's in the app, views, layouts, 4:26 application layout file again. 4:30 So we click on the match, which opens the file for editing and 4:32 change the text to something more suitable like copyright 2016 Treehouse. 4:38 If we save and reload our browser, we'll see the messages updated. 4:45 So if there's some static text on your page that you need to update, 4:51 you can often use your editor's find in files feature to locate it and 4:54 save yourself a few steps. 4:58