Creating Dynamic "onload" Events
However, you often run into the case were you need to run some addition commands based upon the page that's being inserted. Most often this happens when I'm developing a page that has a form on it. There are a lot of ways to tackle this problem, but the tip I'm going to share with you is the one that I've found over the years to be the best solution. For a lack of a better term, I'll call this the "Auto-init()" method.
The first thing you need to do is to set up the base template. In the base template in this example, will be just the bare minimum html template, with the addition of an onload event declaration and a function to invoke during the onload event.
The next thing we want to do is to modify the _init() function to check for the existence of any specially predefined functions, which can be declared anywhere within your page, which will be executed during the onload event. In my template I build in checks for an "init" function and an "onInit" function.
To check to see if a function exists in a page, you use the typeof operator and check to see if the value equals "function". If the variable is equal to anything else, like "undefined", we'll simply skip trying to execute the function. Here's what the line looks like to test for a function called "init":
Here's what the modified "_init" function should look like after adding or checks to the "init" and "onInit" functions:
At this point, your template should still behave the way it did originally—since we haven't declared either of our special functions. Let's add our functions within our <body> tags to see what happens. Add the following to the code to your template:
If you save and execute your template now, you'll notice you get all three alert dialog boxes. Your template should look like this:
Feel free to play around with the syntax and come up with your own standard. I've found that between declaring an "init()" and "onInit()" function it gives me all the flexibility I need. I've yet to run into a situation where I needed more speciality functions, but if you need to, you could even chain this type of functionality. (For example, you could have your init() function check for an onInitBefore() function and so on.)
I've used this technique for about 5 years now, and found it's the quickest most intuitive method when developing pages. There's no mucking around w/trying to pass server-side variables to my templates to figure out what to run--you just declare the function in your template and move on.
Unlimited init-type functions
If you have a really complex site, where you might have the need to declare any number of init-type functions—like in a fusebox environment—you could use an array to store your init functions. For example:
Now to declare a new function to run, you'd just do this:
This method would allow you to create an unlimited number of events to run during the onload event, without having to do any server-side manipulation of the source code.
If you have any questions about this article, please feel free to contact the author at firstname.lastname@example.org.
|Copyright © 2017, PengoWorks.com. All Rights Reserved.|