jQuery dialog from external content

How to load external content into a jQuery Dialog.

First the style

<style type="text/css">
    #terms-and-conditions-content{display:none}
</style>

Then the JavaScript

<script type="text/javascript">
    // <![CDATA[
        $(document).ready(function(){ $('#terms-and-conditions').click(function(e){ e.preventDefault();
        var url = $(this).attr('href');
        $('#terms-and-conditions-content').load(url);
        $("#terms-and-conditions-content").dialog({ width:800,modal: true,buttons: { "Close": function() { $(this).dialog("close"); } } }); }); });
    // ]]>
</script>

Then the HTML

    <a id="terms-and-conditions" href="/terms.html">Click Here</a>

Should be straight forward. Just point the link to the file you want to pull into the Dialog box.

Don’t forget that the Dialog is a part of jQuery UI, not just the standard jQuery – you will need to include both.

<script type="text/javascript" src="http<?=$_SERVER['HTTPS']=='on'?'s':''?>://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    // <![CDATA[
        !window.jQuery && document.write('<script src="/js/jquery-1.6.2.min.js"><\/script>')
    // ]]>
</script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

How to use find and mv How to use find and mv/

After using “wget -spyder” to download a directory index and all linked files, I noticed they ended up in 70 or 80 different directories on my local machine.

I found that using “find” and “mv” worked the best to round them up and put them in the root of the directory structure.

mikej@wdc01 ~/# find * -type f -exec mv {} . \;

SSL certificate installation on Ubuntu/Nginx

How to generate an SSL Certificate Signing Request for your Nginx Web Server with OpenSSL and install your SSL Certificate on your Nginx web server.

Actually I was surprised how easy it was to install SSL certificates for Nginx on Ubuntu.

I don’t remember if it was needed or not at this point or just when I was installing self signed SSL certificates for testing but, make sure you have the ssl-cert package installed:

admin@www1:~/sudo aptitude install ssl-cert openssl

Then make the CSR:

admin@www1:~/sudo openssl req -new -newkey rsa:2048 -nodes -keyout server.key -out server.csr

This will start the process to generate two files: the Private-Key file for the decryption of your SSL Certificate, and a certificate signing request (CSR) file used to when ordering your SSL Certificate.

When you are prompted for the Common Name, which is your domain name, enter the fully qualified domain name for the site you are securing. Either www.afterdarkmike.com or afterdarkmike.com. Remember accessing the opposite of which you select via web browser will generate a miss-match domain security warning, with most browsers stopping you there.

If you are generating a Wildcard SSL Certificate for your Nginx server, make sure your common name starts with an asterisk (e.g. *.afterdarkmike.com).

Open the .csr file with a text editor (nano,vi,etc) and copy and paste it (including the BEGIN and END tags) into your SSL order form. Save the certificate files, you will need them later.

In my case I was purchasing a GeoTrust RapidSSL Certificate for a clients website we host and manage at After Dark Communications.

At the time of posting, your RapidSSL order will be shipped via an email which will include the SSL Certificate as well as the intermediate CA bundle. Copy them both into one file, including the —–BEGIN CERTIFICATE—– and —–END CERTIFICATE—– header/footers and save it as commonname.crt. ex afterdarkmike.com.crt.

So your file will look like:

-----BEGIN CERTIFICATE-----
Web Server CERTIFICATE blahblah blah blah blahblah blah
...
blahblah blah blah blahblah blah
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
INTERMEDIATE CA CERTIFICATE blahblah blah blah blahblah blah
...
blahblah blah blah blahblah blah
-----END CERTIFICATE-----

Upload it to the server.

Now to set up Nginx.

Edit the Nginx Virtual Hosts File:

server {
	listen 443;
	ssl on;
	<strong>ssl_certificate /etc/ssl/ssl.crt;</strong>
	<strong>ssl_certificate_key /etc/ssl/domain.key;</strong>
	server_name your.domain.com;
	access_log /var/log/nginx/nginx.vhost.access.log;
	error_log /var/log/nginx/nginx.vhost.error.log;
	location / {
		root /home/www/public_html/your.domain.com/public/;
		index index.html;
	}
}

Adjust the file names to match the certificate files and restart Nginx.

EXIM4 – Remote Domains Not Supported

After Moving some sites to a fresh Ubuntu VPS for some testing I noticed that the contact forms were not working.

2011-10-03 03:31:43 1RAZFn-0006hC-I2 <= www-data@corp.host.com U=www-data P=local S=648
2011-10-03 03:31:43 1RAZFn-0006hC-I2 ** sales@host.com R=nonlocal: Mailing to remote domains not supported
2011-10-03 03:31:43 1RAZFn-0006hE-Ig <= <> R=1RAZFn-0006hC-I2 U=Debian-exim P=local S=1619
2011-10-03 03:31:43 1RAZFn-0006hC-I2 Completed

In my default Ubuntu VPS image, the “local mail only” feature is set.

Executing the following command and selecting the “internet site; mail is sent and received directly using SMTP” option will solve your issue. You should be able to select the default option for the rest of the questions.

admin@db:~$ dpkg-reconfigure exim4-config

MySQL: “Access denied for user ‘debian-sys-maint’@’localhost’”

I recently migrated one of our MySQL servers (Simply by using rsync) and afterwards when restarting the MySQL server I was faced with:

admin@db:~$ sudo /etc/init.d/mysql restart
* Stopping MySQL database server mysqld <strong>[fail]</strong>
* Starting MySQL database server mysqld [ OK ]
/usr/bin/mysqladmin: connect to server at 'localhost' failed
error: '<strong>Access denied for user 'debian-sys-maint'@'localhost'</strong> (using password: YES)'

This MySQL user is created for Ubuntu to be able to start/stop the database and to preform other maintenance operations.

The issue is that with each update to MySQL, the user’s password in the database is overwritten.  Ubuntu searches the file /etc/mysql/debian.cnf in order to find this user’s password, but obviously the password was out of sync after copying the databases from the old database server.

First, check the contents of the /etc/mysql/debian.cnf file:

admin@db:~$sudo cat /etc/mysql/debian.cnf

The contents of the file should look something like the:

# Automatically generated for Debian scripts. DO NOT TOUCH!
[client]
host     = localhost
user     = debian-sys-maint
<strong>password = PASSWORD</strong>
socket   = /var/run/mysqld/mysqld.sock
[mysql_upgrade]
user     = debian-sys-maint
<strong>password = PASSWORD</strong>
socket   = /var/run/mysqld/mysqld.sock
basedir  = /usr

The PASSWORD   is what we’re looking for.

Next, you will want to issue a command to MySQL to tell it to grant the debian-sys-maint user all necessary privileges using the new password.

Login to your MySQL server using your root account and the root password:

admin@db:~$ mysql -u root -p

Issue the GRANT command now to grant those permissions:

mysql> GRANT ALL PRIVILEGES ON *.* TO 'debian-sys-maint'@'localhost' IDENTIFIED BY 'PASSWORD';

Restart MySQL, you should no longer be getting the “access denied” error message.

admin@db:~$ sudo /etc/init.d/mysql restart
* Stopping MySQL database server mysqld [ OK ]
* Starting MySQL database server mysqld [ OK ]
* Checking for corrupt, not cleanly closed and upgrade needing tables.

You may need to kill the MySQL server processes in order to get MySQL to shut down.

WTF is a Caulking Applicator

So I’m walking through Canadian Tire’s paint and paper section the other day (Needed some white tub ‘n tile to touch up where my back splash meets my kitchen counter) and I see this ridiculous looking rubber thing labeled “Caulking Applicator”.

Apparently it is to smooth out your caulking seam after applying it?

Now I’m no expert by any means but I thought that’s what your index finger was for…

So unless you want to spend 5 bucks on something that you are likely going to just throw out, spit on your finger and run it down the seam like (almost) everyone else does.

Just keep in mind most caulking tastes like shit so if you run out of finger lube, wipe your finger off first or spit from a distance.

Christ, what will they think of next…

jQuery Mobile – Defining multiple local pages

How to define multiple pages within one single HTML file

<div data-role="page" id="main-page">
    <div data-role="header">
        //Content
    </div>
    <div data-role="content">
        //Content
    </div>
    <div data-role="footer">
        //Content
    </div>
</div>
<div data-role="page" id="subpage-1">
    <div data-role="header">
        //Content
    </div>
    <div data-role="content">
        //Content
    </div>
    <div data-role="footer">
        //Content
    </div>
</div>

iPhone/iPod JavaScript Redirect

JavaScript redirect For iPhones/iPods Specifically

<script language="javascript">
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
    {
        location.replace("http://url-to-send-them/iphone.html");
    }
</script>

Forgotten TO-DO’s

I’m not sure about all the rest of the Developers out there but my biggest problem is coming back to finish TO-DO’s.

I have always marked temporary code hacks, or code that needed improvement with a // ::TO-DO:: {description of issue}.

I finally got sick of going through old code and seeing multiple ::TO-DO:: blocks.

I wrote this tiny shell script and run it nightly from cron.

#!/bin/sh
echo "Starting ::TO-DO:: Search for (project)"
echo ""
grep -r -n "::TO-DO::"  (/PATH/TO/PROJECT/FILES/) (/PATH/TO/PROJECT/FILES1) (/PATH/TO/PROJECT/FILES2) -B1 -A3

Just ensure there is an email address for the cron output or you will have to pipe greps output to mail, mailx, mutt, or something similar.

The -r flag tells grep to search recursively for each path.
The -n flag adds line numbers on the offending line.
The -B1 and -B3 adds the prior line and three following lines to the output.

CSS Columns: Fixed width and fluid “remainder”

I encountered a little issue with a simple 2 column layout for a small project I am working on. The left column was to be fixed at 220px and the right needed to be what was left of the screen width.

After several attempts, it ended up being quite easy.

<style>
    .main .left-col{width: 220px;float:right}
    .main .main-content{overflow: hidden}
</style>
<div class="main">
    <div class=".left-col">
        <!-- Content -->
    </div>
    <div class=".main-content">
        <!-- Content -->
    </div>
</div>