Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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