View Problems - Unwanted Elements5:00 with Jay McGavren
There's something being displayed on your page, and you don't want it there, but you don't know where it's coming from. Here's how to find the source.
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
You need to sign up for Treehouse in order to download course files.Sign up