Automatically Wiring Up XHTML Element Events On Page Load With jQuery
Many Web developers find themselves in an environment where the design of a Web page is handled by a graphic designer or junior programmer, either as part of their team or from a subcontractor or the client himself.
Unfortunately, traditional HTML / XHTML requires most element events handlers — onmouseover, onclick, onfocus, etc. — to be coded as attributes of the tag, like this:
<img id="myimage" src="pic1.jpg" alt="My Image" onmouseover="this.src='pic2.jpg'" onmouseout="this.src='pic1.jpg'" />
That’s not a problem if you’re the end point of the code; that is, if the graphic designer hands you a final page that won’t be modified again. But in the real world, pages and their associated code need to be moved back and forth constantly, with changes aplenty. That can have a real impact on your work, especially if the designer changes or removes your event handlers from page elements.
That’s the idea behind MVC (model, view, controller). We break the chain of custody for a Web request into three parts: A controller accepts a request from the user and determines which model should be used to handle the request.
The selected model, in turn, does something with the request sent to it by the controller; for example, one model might serve up some static content; another model returns search query results; another model returns data based on an environment variable, such as the geolocation of the user’s IP address (that is, gives a page in Russian to a user from Russia, by default); and so on.
Finally, the view — the end output the user sees — is applied by the controller to the model’s results.
While this is a worthwhile development approach, it may be a bit of overkill for a site that doesn’t have too much dynamic content, or that simply needs an image rollover effect, a countdown clock, etc. We still want to protect our coding from alteration by the designer, but we don’t want to employ a $10 solution to a 10-cent problem.
Enter, once again, jQuery, which can automatically bind (that is, “wire up”) event handlers for us once the page loads.
Continue reading: Automatically Wiring Up XHTML Element Events On Page Load With jQuery »
Parent – Child Select Lists Revisited: Multiple Parent – Child Select Lists Via PHP, MySQL And jQuery
A while ago, I promised to answer Brian’s request for a demonstration of how to make multiple parent / child select lists — in other words, starting from one drop down / select list, having two or more child lists, each of which, in turn, may act as a parent to another list.
Multiple parent-child select lists are considerably more complicated to program than a single parent-child relationship. Not only do we have additional data relationships to consider (that is, how we’re going to tie child list values to the selected parent values), we now need to plan for what to do if a “middle” relationship is changed (more on this shortly).
Fortunately, we have a starting point in my original parent-child select list post. We don’t need to reinvent the wheel, therefore, so much as we need to upgrade from a horse cart to a Lamborghini.
Overview Of The Approach
As was the case when we had a single child drop-down list, we must begin with relational data for each select list. Apologies to those who consider that obvious, but for n00bs, what I mean is, if you want to select a value from List A and have List B populated with new values, then the values you intend to have in List B must somehow be keyed (linked) to the selection made in List A.
This multiple parent-child select list approach will work for as many parent-nee-child lists you want. If you want to populate 10 or 100 or 1,000 lists, you won’t need to change a single line of JavaScript; however, your PHP “helper” page will need some modification to accommodate all the queries you’ll need, and the more lists you have, the more code you’ll have to put into your HTML (more on this shortly).
The Simplest Ways To Do Image Rollover Effects: JavaScript And CSS-Only
A common question on Yahoo! Answers is how to do image rollover effects simply.
There are two ways to do so: With JavaScript, and via CSS alone. Of the two, I prefer the JavaScript method, as it doesn’t require marking up your code too much; but the CSS method is fine, too, and takes away the worry of dealing with users who have disabled JavaScript in their browsers.
This topic also allows me to address the best way to “preload” images for use via JavaScript / CSS; previous articles I’ve written have used less efficient methods, and I’d like to go on record with the proper way to preload.
Last things first, then. The proper way to “preload” images is to use a standard XHTML img tag, using a CSS class to “hide” the image(s) being preloaded via display: none. These images should then appear directly before the closing body tag, to speed page loading by loading the “preloaded” images last.
img.hide {
display: none;
}
<img src="home-over.png" alt="" class="hide" />
<img src="about-over.png" alt="" class="hide" />
<img src="services-over.png" alt="" class="hide" />
<img src="contact-over.png" alt="" class="hide" />
</body>
Using CSS to hide images should work for all current Web browsers, including versions 5+ of Internet Explorer.
Continue reading: The Simplest Ways To Do Image Rollover Effects: JavaScript And CSS-Only »
Retaining Values In A Form Following PHP Postback And Clearing Form Values After Successful PHP Form Processing
Asked recently on Yahoo! Answers:
Re-post data to PHP form when invalid?
I was just wondering, if I have PHP validation on a field of a large form, say for example the e-mail isn’t an e-mail (I know how to check that) and it sets header location to ?error=1 it does all that fine, but the form is loaded as completely blank again. How can I re-post information via PHP without them clicking anything? Thanks!
The quick answer is, if you use header() to redirect a user to the same page, all the form variables for that page are destroyed.
As such, rather than using a querystring variable to echo out an error message, it makes more sense to build an error message string, and echo that on the same page, while retaining the form values.
if(isset($_POST['submit'])) {
$ok = true;
$message = "<p>There are problems with this form. Please correct the following errors:</p><ul>";
if(trim($_POST['name']) == "") {
$message .= "<li>You did not enter your name.</li>";
$ok = false;
}
if(trim($_POST['email']) == "") {
$message .= "<li>You did not enter your e-mail address.</li>";
$ok = false;
}
if(trim($_POST['city']) == "") {
$message .= "<li>You did not enter your city.</li>";
$ok = false;
}
if(!$ok) {
$message .= "</ul>";
}
else {
$message = "";
//your processing code goes here
}
echo $message;
}
That said, let’s investigate how one echoes form values back to the page on unsuccessful form validation, and clears the form if it was valid.
Ludicrous But Intriguing: A JavaScript Login System That Hides Content And Prevents Login Flooding
Asked recently on Yahoo! Answers:
Password control in javascript?
i have to design a program to allow access to a website to people who have the correct pin/ The pin is a 4-digit number (1000-4000).The program should have 2 options. 1. Enter the Pinand if is correct(between 1000 and 4000) the website will be accessed. 2. set the maximum no of attempts to enter correct pin. (by default i chose 3).
This is what i have so far.
{snip: code}
Finally, someone with a homework problem who has actually put in legitimate effort of his own. To celebrate this event — the first time anyone in P & D asking for homework help has ever actually tried to do his own homework, I suspect — I’ll take the questioner’s original code, apply some tweaks, and we’ll have his program ready in a jiffy. And I’m willing to do that because the question is 80 percent of the way there; the remaining 20 percent is just a lack of experience, and since gaining experience is the point behind the assignment, I’m happy to lend mine.
An aside on JavaScript login systems: A JavaScript login system is as stupid as a screen door on a submarine. This is clearly a learning exercise. Don’t use this code for actual security, because it doesn’t provide any.
Executive summary: We’re going to use a regular expression to test the PIN number. The user gets three cracks at entering a PIN that matches out pattern. If the user enters a good PIN, we show the page content; if the user doesn’t, he gets a message to that effect.
