Adding Functionality with jQuery and PHP Using Expression Web 4
- By Chris Leeds
After completing this chapter, you will be able to:
Use jQuery in Expression Web
Use the Expression Web PHP tools
Using jQuery in Expression Web
Because jQuery is a framework library it’s possible for developers to create “plug-ins” for the framework, which add specialized functionality that extends jQuery for specific needs. Many plug-ins have already been written; you can find a list of them at http://plugins.jquery.com/. After installing a plug-in, you can use its features on your pages with little to no coding.
Link a page to a jQuery library, write a simple function, and use a jQuery plug-in
Scroll the Code pane of Chapter8.html to the <head> section and set your cursor just before the closing <!-- #EndEditable --> in the “doctitle” editable region and then press Enter on your keyboard to break to a new line.
The first thing you need to do when using jQuery is link to the library itself; that’s what you will do in the next few steps.
With your cursor on a new line in the editable region within the page’s <head> section, begin to type <script… and the Expression Web Intellisense will appear. Each time the Intellisense pop-up displays the code fragment you want, press Enter on your keyboard. When complete, you will have a line that looks like this:
In this example, you are linking to the jQuery file that resides physically in the SampleSite’s folder structure—specifically, the site’s /files folder. Using a local copy of the jQuery library as in this example is just one option for linking to the library; many designers link to the jQuery library via an external URL. Both Google and Microsoft host this library, and anyone can link to it freely. The following example script tags would link a page to the Google or Microsoft hosted jQuery library:
The next step in this jQuery example is to write actual script into the page. Press Enter on your keyboard to create a new line beneath the script tag that you inserted. Enter the following code:
If you don’t want to type that entire block of code, you can continue this exercise by copying and pasting from within the comment tags in the file /files/external_blank.js, or simply link to the file in the same way that you did the jQuery library:
Click Save, and then click Preview on the Common toolbar to open your page in a browser. Scroll down to the jQuery Resources list.
Close the browser window and return to Expression Web. Click one of the jQuery Resource links in the Design pane and notice the Code pane. There is no target=“_blank” attribute in any of the links in the list, which is how you would normally make hyperlinks open in a new window.
In the next exercise, you will link to a jQuery plug-in, which is a pre-written set of functions designed and tested to work with the jQuery Library. You’ll use this particular plug-in to validate the input fields of the form you created in Chapter 7, “Adding Client-Side Functionality.”
Link to a jQuery plug-in and use it to validate user input
Set your cursor in the <head> section of the page where you’ve been working and press Enter on your keyboard to insert a new line after your most recent script block.
Using the Expression Web Intellisense pop-up as you did previously, enter the following script tag, which links to the jQuery plug-in:
To use this plug-in, you must link to it just as you linked to the jQuery library. This plug-in is called Validate My Form. You can find a link to it beneath the Resources heading in the Chapter8.html file.
In the Code pane, press Enter on your keyboard to start a new line beneath your link to the form validation plug-in and then enter the following script tag and style sheet link:
Scroll the Design pane of your page to the Resources heading in the jQuery segment. Set your cursor in the Design pane at the end of the heading text and press Enter on your keyboard to create a new paragraph.
In the Folder List panel, expand the site’s /files folder and then double-click Chapter7Form.txt to open it in your workspace. Set your cursor in the code of that file and press Ctrl+A to select all of the text, and then Ctrl+C to copy it all to your Clipboard. Close Chapter7Form.txt and return to Chapter8.html.
Set your cursor inside of the new paragraph tag in the Design pane and then click the <p> tab on the Quick Tag Selector to select the entire tag. Right-click the highlighted code in the Code pane, and in the Context menu, click Paste. Then click Save on the Common toolbar.
The HTML form from Chapter 7 is now pasted into the page where your paragraph tag was, and the page is saved.
Set your cursor inside the Form tag in the Code pane and add the ID attribute id=“form1” to the tag.
By adding the ID to the form tag, you have given the plug-in the ability to manipulate the form and apply the validation functionality. This plug-in not only identifies the form by its ID, but enables validation simply by applying a class to the form field in question.
Click the Name form field in the Design pane to select it, and then in the Code pane, add class=“required” to the tag.
Click the Email form field in the Design pane and then add class=“required email” to the tag in the Code pane.
Click the Phone form field in the Design pane and add class=“required numeric” to the tag in the Code pane.
Click Save and then click Preview on the Common toolbar to view your page in a browser. In the browser view, scroll down to your form and enter some input values to test the validation. Click the Submit button and watch the form validation in action.
In the image above, I entered nothing into the Name field, entered an invalid email address into the Email field, and typed some text into the Phone field. In each case, this input failed to pass the validation function that the jQuery plug-in provides.
Close the browser window and return to Expression Web.
Select the Phone input field in the Design pane.
With the form field still selected, notice the Tag Properties panel on the lower left of your workspace. Using the Tag Properties panel, remove the class (required numeric) from the form field’s Tag Properties.
In the Design pane, select the message text box of your form and, using the Tag Properties panel, enter required in the Class field.
The idea is to require users to enter something in the message field, but not the phone field.
Click Save, and then click Preview on the Common toolbar to check your page in a browser again. This time, test the validation by leaving the phone field blank. Submit the form. You should see a screen similar to the following one.
Close the browser window and return to Expression Web.