WordPress and jQuery’s UI [ 216 ] Project: Adding a dialog box to a download button with icons Dialog boxes are great ways to alert and direct people's attention to really important information, making sure they understand the next steps that they need to take, as well as conrming an action. Our client is very happy with the tabbed information on the home page and the condensed accordion side bar. They just need one more enhancement. The rst tab on the home page offers a PDF download of a white paper that contains information about their methodology, products, and their various uses. As you can see by the next screenshot, the client wants users to understand they're downloading copyrighted information and that the document can not be freely distributed. As you can see in the following screenshot, they've placed some disclaimer language right before the download link to the PDF le: Chapter 6 [ 217 ] In general, that's all their legal department claims they need, but they'd like it to be a little more clear. We can enhance this download process further by making the download link more prominent using the button widget, and turning the previous Disclaimer text into a dialog box. The user will then have to select I Agree on the dialog box to get the PDF download to continue and the client can rest assured that the majority of the people downloading their white paper through a JavaScript-enabled browser are denitely aware of the disclaimer. First, let's set up that Disclaimer text to go inside our dialog box. We'll target the paragraph and apply the dialog widget as follows: //select p that contains the disclaimer text jQuery("#post-98 p:contains(Disclaimer:)") .wrapAll("<div id='disclaimer'></div>"); //create the disclaimer dialog widget jQuery("#disclaimer").dialog(); If you reload your page, you'll see that the Disclaimer text now appears in a dialog box as follows: The dialog box's default is to align the text "center". This is great for one line of text, but our paragraph looked a little strange so we've added a style to our .wrapAll HTML as follows: wrapAll("<div id='disclaimer' style='text-align:justify'></ div>"); WordPress and jQuery’s UI [ 218 ] Next, we really don't want the dialog box to appear immediately, so we'll set its option of autoOpen to false. We also want conrmation buttons to appear, as well as a title in the dailog's top bar. The dialog widget can also accommodate buttons, so we'll add them in, along with their functionality as follows: //create the disclaimer dialog widget jQuery("#disclaimer").dialog({ //set the dialog to close autoOpen: false, //set the title title: 'Download Agreement', // set up two buttons buttons: { //activates the URL placed in the a href "I Agree": function() { //get the URL of the PDF var pdfFile = jQuery("#post-98 a").attr('href'); //direct the browser to that URL window.location.href = pdfFile; }, //close the dialog box "Close" : function() { jQuery(this).dialog("close"); } }, }); The above works great—or at least we think it does. Now that the dialog's autoOpen option is set to false, we can't tell! We'll need the Download PDF link to kick-off the dialog box and while we're at it, we'll need to make sure that the link's href doesn't kick-off the PDF download. If you've been paying attention, you're probably ready to use the .removeAttr() function to remove the href attribute from the link and render it powerless. That's a good idea; however, in the previous code snippet, we reference the href attribute of the link. That reference doesn't kick-off until after the box has appeared, which would be after we removed it from the object, which means our window.location.href JavaScript won't have a clue where to go. Chapter 6 [ 219 ] Our best bet is to use another great function called preventDefault(), which will leave all the attributes of the link intact, but prevent it from acting like a clicked link. Let's add in this new link functionality: jQuery("#post-98 a") //set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open"); //ensures that the link to the href is disabled event.preventDefault(); }); Last, before we refresh our page and take a peek, let's go ahead and make the PDF download link look a little more "clickable". Because we're using jQuery version 1.4.2 from the Google CDN, and the 1.8 version of the jQuery UI plugin, we can do this by selecting the link and adding button widget to it. If you're not using version 1.8 of the UI plugin, this step is optional. You can simply use CSS styles or the .css() function to style the link to your liking. We'll simply chain the .button() widget function on to our existing link selection, after the .click() function as follows: jQuery("#post-98 a") //set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open"); //ensures that the link to the href is disabled event.preventDefault(); }) //add the button widget .button(); WordPress and jQuery’s UI [ 220 ] You can refresh your page and check out the new button, as shown in the next screenshot: As great as the button-ized link looks, it doesn't take much to go one step further and add a few icons so it's clear what clicking on the button will get people, and encourage them to take action. The jQuery UI plugin themes come with a host of framework icons. If you included the image directory relative to your jQuery UI stylesheet, you have access to them. The button widget allows for icons to be placed in a "primary" and "secondary" position. The primary position is to the left of the button, and the secondary is to the right, after any button text. Let's add the "circle-arrow-s" icon and the "document" icon to our button as follows: jQuery("#post-98 a") //set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open"); //ensures that the link to the href is disabled event.preventDefault(); Chapter 6 [ 221 ] }) //add the button widget .button({ //add the icons icons: {primary:'ui-icon-circle-arrow-s', secondary:'ui-icon-document'} }); Here's our "iconic" button and dialog box once people hit the button: Want to nd out what icons are available for widgets? Check out the theme roller: http://jqueryui.com/themeroller/. At the bottom of the page you'll see all the framework icons. Rolling over them will display their title tag info which contains the name you want to place in your jQuery statements to reference them. WordPress and jQuery’s UI [ 222 ] The last thing to test with this enhancement, is that clicking on I Agree kicks-off the download, which as you can see by the following screenshot, works! This is actually an impressive amount of interactivity to add to a site, and yet at the same time, it degrades and works just ne the way it was without JavaScript. It's a really great use of jQuery and the jQuery UI plugin. Summary That's our look at the jQuery UI plugin and just a few of the ways it can really benet a WordPress site. There are dozens, possibly hundreds of them and more, it just depends on your site or project and its needs. Remember, jQuery runs on the client-side, in the browser, and WordPress serves up the nished HTML pages to the browser. This means that you have the power to not only enhance WordPress content, but also most WordPress plugins, such as cforms II, and most sidebar widgets should be easy to enhance with jQuery and the jQuery UI plugin. Chapter 6 [ 223 ] In this chapter, we had a look at: The UI plugin and various ways to include it and get started with it in WordPress Understanding how applying UI elements to our WordPress site makes it more intuitive, easier to understand, and encourages users to take action Common ways to implement popular UI features with common WordPress features Let's now move on to the next chapter and see about using jQuery to help us create AJAX interactions. • • • AJAX with jQuery and WordPress AJAX is an acronym that Jesse James Garrett, a user-experience expert who founded www.AdaptivePath.com, coined back in 2005. It quickly morphed into a buzzword who's descriptiveness (and verby-ness) as we'll see, goes way beyond its actual acronym denition. We'll take a quick look at what AJAX really is and how easy it is to implement, not to mention cook up a few more cool solutions for our "hypothetical" clients. In this chapter, we're going to take a look at: The basics of using jQuery's AJAX .load() function and the more robust .ajax() function Working with JSON and hooking into other site's APIs Creating a custom AJAX enhanced home page and comment form Rening that functionality using animation and events Let's get started by taking a look at what jQuery does for AJAX. What AJAX is and isn't: A quick primer To start, if you're new to AJAX, I'll just point out that AJAX is actually not a technology or language! The acronym stands for Asynchronous JavaScript and XML. It's the technique of using JavaScript and XML to send and receive data between a web browser and a web server. The most obvious (and cool) use of this technique means you can dynamically update a piece of content on your web page with a call to the server, without forcing the entire page to reload. • • • • . button widget .button({ //add the icons icons: {primary:'ui-icon-circle-arrow-s', secondary:'ui-icon-document'} }); Here's our "iconic" button and. button text. Let's add the "circle-arrow-s" icon and the "document" icon to our button as follows: jQuery( "#post-98 a") //set up a click function on the. widget .button(); WordPress and jQuery s UI [ 2 20 ] You can refresh your page and check out the new button, as shown in the next screenshot: As great as the button-ized link looks, it doesn't