I’m starting a new project where the source code is hosted on github so I had to install git on my Mac OS X. Git is an open source, distributed version control system. To install it on my Mac, I downloaded the installer package from google code (also available via MacPorts). After installing the package, I had to configure it to work with github.

Open the Terminal application (Applications->Utilities->Terminal).

Enter:

   git config --global user.name "your name here"
   git config --global user.email your-email-address-here

   git config --global github.user your-github-user-here
   git config --global github.token your-github-api-token-here
   git config --global core.autocrlf true

If you receive the error:

git: Command not found

You will have to add the git directory to your PATH variables:

echo 'export PATH=/usr/local/git/bin:$PATH' >> ~/.profile

Restart Terminal and then enter:

echo $PATH

You should see that the git directory was appended to the PATH.

If you are using github, ‘github.user’ and ‘github.token’ can be obtained by clicking on your account link and then clicking on “Global Git Config”.

In order to use github, you will also need to create an ssh key:

ssh-keygen -C "your name or email address" -t rsa

To copy your public key to the clipboard:

cat id_rsa.pub | pbcopy

You can then paste it into the appropriate place on githubs site.

Note: id_rsa is the default name of your public key file. If you gave it a different name, then obviously you would ‘cat’ that name. Enjoy.

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:

$(document).ready(function() {
       $('#container').dialog();
});

I can also add options to the dialog:

$('#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:

$('#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:

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

Enjoy.

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.

Read the rest of this entry »

I just ran into a problem when I was attempting to pass a PHP POST variable that contained a period. I’m not sure why I have never run into this situation in the past. PHP will automatically convert a period into an underscore. I submitted a form  with a field with the name ‘co.uk’. I then checked for the existence of the post variable in a PHP class (if  $_POST['co.uk']). It did not exist. I then checked (if $_POST['co_uk']) and was able to get the value. Interesting.

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.

Read the rest of this entry »

I just completed a website where the client uses PayPal to handle the payment transaction. I have used PayPal quite a bit in the past, but I have always had problems using IPN (Instant Payment Notification). Because of the problems, I usually opted not to use IPN, but I was determined to use it for this project. The primary problem with testing IPN is, because the transaction occurs in the background, it is difficult to figure out where the point of failure is. But that is all behind me now.

Read the rest of this entry »

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:

$(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.

I just finished a project using CodeIgniter. I ftp’d the files to the host provider’s servers. When I attempted to view the website, I received a ’500 Internal Server Error’. Viewing the error logs, I found: SoftException in Application.cpp:252: File “/home/arrowcol/public_html/index.php” is writeable by group. I looked at the permissions of the index.php file and found that it was set to 0666, so I changed it to 0755 and the site is now up and running.