Tip:
Highlight text to annotate it
X
Let's begin by setting up our Module folder and making sure that we're including a JavaScript
file.
Go ahead and go to your Build a Module Resource Directory, and copy of the Interact Folder.
This is a folder called 'Interact', and then go to your Drupal directory and paste it into
your Site's 'All Modules Custom' folder.
Let's go ahead and take a look at the files here. We have several JavaScript files, one
here, one here, one here, and then we have our basic Module files; our dot Module file,
our dot Info file, and then we have a dot CSS file.
In our first examples, we're going to use a method of including a JavaScript file that
uses the dot inform file so go ahead and open up your Interact dot Info file. Here we have
the basic information that we would have in our dot info file, and then on the bottom
we have a Scripts item, and you can tell it's an Array, because we have the brackets, and
we're adding Interact dot JS. What this will do is add this Script to every page on our
Drupal Site; so if we want to include our Script conditionally based on being on certain
pages, we would have to use a different method, and we'll cover that later. But for now, this
is good enough for us to begin using JavaScript examples.
I'm going to jump back to the Directory here. If we open up the dot Module file, we'll see
that it's completely blank; there's nothing in it just yet. We don't' need anything in
it just yet. I'm going to jump back to the Directory, and let's go ahead and open up
our Interact dot JS file.
Right now it's blank, but let's go ahead and add some Code to it. Jump back to your Directory,
and go ahead and open up the Steps folder, and then open up the first Step, which is
for Interact dot JS, which is called 'simple jQuery selector'. Go ahead and copy this Code,
and Paste it into your Interact dot JS file and Save it.
Okay. So once we've installed our Module, it will include this file, Interact dot JS
and it will execute this Code on every page load, and what we're going to do is grab some
text from the Heading tag, and we'll use an Alert Statement in order to display a JavaScript
alert on the page. So this is just playing JavaScript here, but this line includes some
jQuery.
We're establishing a variable called 'text' and we're giving it a Value 'of', and then
we're using an object called 'jQuery' and we're passing it one parameter which is 'h1'.
Now this is the jQuery object that is the beginning of virtually any statement that
you make, inside of Code, inside of JavaScript files in Drupal. This is because jQuery is
so useful that we typically grab any Code that we need to adjust using the jQuery method.
Then we're using a method called 'text' and notice the word connecting text with this
first statement, by a dot. Now what dot does is it takes that whatever has been returned
by this first part and it runs this next part on it. So jQuery passing 'h1' it returns something,
then text runs on it.
When we're working with jQuery, almost every time a jQuery object is returned from a jQuery
call, this allows us to String multiple Statements together that are acting with a jQuery object
simply by using the dot syntax. So we can add another dot and another Statement here;
another dot, another Statement. It just so happens that the Text method returns a simple
String instead of a jQuery object, so we wouldn't be able to add on additional Commands to the
end of this. But this is the first time that we're using a Selector and that's what's right
here, it's a very simple Selector, it's just selecting a tag. What this will do is look
for any 'h1' tags on the page, and return it as an object and if there's multiple 'h1'
tags, it will return all of these in the same object. For our page, we only have one 'h1'
tag, so this will return a single object.
This Text method grabs the text that's inside of this HTML that's return from this tag.
In this case, there's only some text, inside of this HTML; so this Text will be fairly
straight forward. If this 'h1' included HTML as well, all that HTML will get stripped out
and Text will simply return Text that's inside of that HTML. Then we're running the Alert
on this Text, so we should be able to see the Text that's being pulled from this 'h1'
tag.
Now, there's a problem with this Code. By default, JavaScript files will be included
in the Header of the HTML file; which means when this JavaScript runs, none of the page
Content has actually been loaded yet. So when we go to try to grab the Content that's in
the 'h1' tag, we're not going to find anything there because that Content does not yet exist.
So we can solve this by a number methods and we're going to cover that in the next example.
Let's go ahead and make sure that this is saved, and then let's Install our example
and see what happens when our Code runs.
I'm on the Module's page, which is at Admin slash Modules, and I'm going to scroll down
to 'Build a Module' section, and we're going to enable the 'Interact' Module.
I'm going to scroll down and click 'Save Configuration'.
Okay. So we see our Alert here. I'm going to go ahead and click 'Ok',, and it was blank.
That means that the Content that we were looking for in the Heading tag didn't exist. So let's
go ahead and use another jQuery utility in order to make sure that our Code runs only
after all of the Code has been loaded on the page.