[MUSIC]
Okay, so in this lecture, we're ready to move on.
And our next task is to load this entire content.
This main content of the front page to load this whole content dynamically.
Now first of all, why do we want to do that?
The reason we want to do it is because we're trying to move towards what's called
an SPA, or SPA and stands for single page application.
So a single page web application.
And besides for being a pretty popular web coding technique nowadays,
since SPAs heavy rely on Ajax,
this whole content right here is going to be inserted dynamically.
But the rest of the content is going to stay.
So we're going to basically update the least amount of the page possible
to make it functional.
And that's very advantageous because obviously it's going to be faster and
also is not going to refresh the page for the user.
It's going to be a much, much nicer user experience.
So let's go ahead and go to our code editor.
And right now, we're located in Lecture60 in the after folder and
we're looking at index.html.
Well, for that purpose in order to make the entire content, the main content
the dynamic, we actually need to wipe it out and this is exactly what we did.
We don't have any more in the index.html the main content.
There's only just a placeholder for the main content with id main-content.
Now, where did all of that stuff go?
Well, we have a new folder here called snippets.
And if we open it up, there is a file called homesnippet.html.
So if we open that up,
the entire contents of our homepage are really contained right here.
So you can see there's our jumbo tron, home tiles and so on.
We did change a couple of links,
cause you notice the menu item here is no longer just a link,
it's actually a link to basically nowhere with an onclick event handler.
And we'll talk about that a little bit later, but
we just kind of prepped it for the next step.
because obviously we're going to have to display our menu category page and
then individual single category page and we're still going to have to do this,
using this spot technique or using Ajax.
That is, we'll need to take that content and dynamically insert it
into the index dot html right here at the place holder in the content.
But for this lecture all we need to do is figure out how to insert
the previous mint page content inside the main content placeholder.
Let's go to our script.gs, where I have prewritten some code, and
let's go over that.
So first of all, you could see this code up top.
This is what we just wrote in a previous lecture.
This is just to make the collapsible button
collapse the menu when it loses focus.
Okay, so what we're going to do is first of all we're going to set up
an immediately invoked functional expression.
As you can see here we're starting with prints global and going all the way down
here we're executing this function passing it to window object.
So our global right here Is really just the window object.
And we're setting up the namespace dc, just probably for David Chu's.
That's how I named it.
And as you could see,
we're exposing this thing right before the end of this call function.
We're saying global, which is really window.
.$dc, that's that where we want to expose this as and dc our internal theme space.
So whatever we attach to the dc as a property
is going to get exposed to the global object in order for
us to use it in some other page or some other script.
Okay, so let's take a look as to what we're doing here.
First of all we're setting up our home HTML.
That's nothing more than just the URL as to where the snippet is going to sit.
And then we're going to have a convenience method here so we don't have to write this
from scratch every time because we're going to have to do this several times.
Is if you give me a selector and you give me the HTML, I will go ahead and take,
select that selector.
Take that argument, take that element I should say, grab that element, the target
element, and set its inner HTML, to whatever the HTML string that you send me.
So this is just a convenience method to say, insertHtml, pass it a selector, and
the HTML string, and it will insert it into the target element.