gpDojoPortfolio: A Dojo Portfolio Widget

Ajax, Dojo, dojo-widgets

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery 1.4, YUI: JSON ParseError – Quotes Required

Ajax, JQuery, YUI

Someone just sent me a message asking me to update my imBannerRotater plugin because they were receiving a parseerrormessage with JQuery 1.4.

I tested the plugin with JQuery 1.4 and I too received the parseerror message. I knew immediately that the problem was with the Json record that was returned via an ajax request. Looking at the json record, I noticed that quotes were placed around the value, but not the name/key, so I added the quotes:

?View Code JAVASCRIPT
// originally
{name: "joneil.jpg", url: "http://www.imdb.com/character/ch0005968/"}
 
// changed to
{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/"}

I tested and no longer received the parseerror message.

The reason I knew that the error was due to the json record is because I ran into a similar problem with YUI last week. I received a parse error with a json record because I used single quotes rather than double quotes. I thought it was odd (and I was a bit displeased).

Knowing about the problem with YUI and single quotes, I tested json object above using single quotes:

?View Code JAVASCRIPT
{'name': 'joneil.jpg', 'url': 'http://www.imdb.com/character/ch0005968/'}

I again received the parseerror message. So you must use double quotes. I went back and read the Json specs. It mentioned placing double quotes around the value, but did not mention anything about placing quotes (double or otherwise) around the the name/key. But YUI and JQuery 1.4 both require it so it must be required.

Checkout My New Site - T-shirts For Geeks

CakePHP and JQuery

Ajax, CakePHP, JQuery

Although Prototype is the default Javascript Framework for CakePHP, using JQuery (or any other Ajax Framework) with Cake could not be easier. Perhaps the most difficult aspect of integrating JQuery with Cake was trying to find documentation on some of those little things that are necessary to return a result set without an error (see my post, CakePHP and Ajax: Missing View).

Note: I purposely wrote this post as if I were speaking to someone who has never used CakePHP. So some parts of this post may be common knowledge to the more experienced Bakers.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imBookFlip. Page Turning without Flash

Ajax, plugins

I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. I found a Javascript class and decided to use it as the basis for a JQuery plugin. The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Manager can be used with the plugin.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI Dependency Configurator

Ajax, YUI

The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.

Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.

So instead of:

<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> 
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> 
<link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css">
 
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="lib/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="lib/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="lib/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="lib/yui/selector/selector-min.js"></script>

You can use the YUI Dependency Configurator to create::

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>

Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.

You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.

Checkout My New Site - T-shirts For Geeks

JQuery UI Part 2: UI Dialog

Ajax, JQuery

In Part 1 of using the JQuery UI, I discussed how to customize and download all the compenents. In Part 2, I will discuss the using the UI widgets, specifically the UI dialog. Before you can use the UI dialog, you must first download the necessary files. Read Part 1 to learn more about downloading the file. I’m using a minified version of the JQuery UI widgets, to include a custom Theme. Remember from Part 1, that the customized build includes ui.core.js and other relevant files:

<link rel="stylesheet" type="text/css" href="js/jquery/jquery-ui/css/jquery-ui-1.7.2.css"><script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>

Initializing the UI dialog is simple. First create a container to hold the dialog:

<div id="container" title="My Title">

Then add code in the header section of your web page:

?View Code JAVASCRIPT
$(document).ready(function() {
       $('#container').dialog();
});

I can also add options to the dialog:

?View Code JAVASCRIPT
$('#container').dialog(
       autoOpen: false,
       modal: true,
       width: 600,
       buttons: {
             "OK": function() {
                 //do something;
                 $(this).dialog("close");
              },
             "Cancel": function() {
                 $(this).dialog("close");
             }
       },
       show: 'drop',
       bgiframe: true
);

autoOpen: When set to true (the default), the dialog will appear when it is initialized. When set to false, the dialog will appear when dialog(‘open’) is called.

modal: If set to true, the all items below the dialog will be disabled. Modal dialogs create an overlay below the dialog but above other page elements.

buttons: Use the buttons option to add buttons to the dialog and create events for each.

show: There are many effects that can be applied to the dialog. In the example above, the ‘drop’ effect has been added. This will caused the dialog to drop into place on open. To view other effects, go to the UI Demo page.

bgiframe: When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

Click here to view more options for the UI dialog.

As you can see, the UI Dialog is quite easy to use.

Note: Make sure that you initialize dialog button outside the button’s click event. In other words, don’t do this:

?View Code JAVASCRIPT
$('#button').click(function() {
      $('#container').dialog();
})

While this will display the dialog, it will not display again after it has been closed. So do this instead:

?View Code JAVASCRIPT
$('#container').dialog({autoOpen: false});
$('#button').click(function() {
      $('#container').dialog(open);
})

Enjoy.

Checkout My New Site - T-shirts For Geeks

Using The JQuery UI – Part 1

Ajax, JQuery

Although I have used some of the JQuery UI widgets in the past, I really began to explore the JQuery UI in a recent project. One of the reasons that I like using the UI widgets is that I can standardize on a set of components (plugins) that have a consistent look and feel as well as a consistent coding standard.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI Dialog Buttons Scope

Ajax, YUI

When calling a function to handle the click event for the YUI Dialog buttons, the scope of the function is always the dialog instance itself. This is not a problem in most situations, but when creating a custom YUI widgets, use the object literal option to handle the event rather than just calling a function. Otherwise, you will run into scope issues.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using JQuery with CodeIgniter

Ajax, Codeigniter, JQuery, plugins

Using JQuery with CodeIgniter is simple. In fact, using most Ajax frameworks with CodeIgniter is easy. I created a simple JQuery plugin that displays randomly selected images (imBannerRotater).

First I use CodeIgniter’s ‘base_url’ function to link the necessary Javascript files in a main view of my application:

<script type="text/javascript" src="js/jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.imBannerRotater-0.5.js"></script>

Next, I define a Javascript variable to be used with by the plugin:

<script type="text/javascript">
//<![CDATA[
base_url = '<?= base_url();?>';
//]]>
</script>

I then use this variable in my JQuery Plugin:

?View Code JASVASCRIPT
$(document).ready(function(){
     $(".randPic").imBannerRotater({
	data_url: base_url + 'assets/sidebar/sidebar.php',
	base_path: base_url + 'assets/sidebar/'
     });
});

That’s about it. While this is a simple example, using CodeIgniter’s base_url function is the key to using JQuery or any other Ajax Framework.

Checkout My New Site - T-shirts For Geeks

Using the YUI Loader Utility

Ajax, YUI

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies into your page via script. While I haven’t used the YUI Loader Utility that often, I like using the utility beacause I don’t have to remember all of the dependencies needed by each component. In addition, I can use the loader utility to load any custom plugins.

Continue reading

Checkout My New Site - T-shirts For Geeks