To bring you up to speed, Twig will compile Twig templates into native php once parsed, this ensures that they are rendered as fast as possible.

My specific use case is that some templates are compiled on the command line as a different user than apache which compiles them from web requests. When generating templates from various users I ran into permissions where the cli user couldn’t create cache files in folders that were previously created by Apache. The cli user and Apache both are in the same group so I just needed to make sure that all folders and files (for clearing the cache) are owned by the common group, which is easier said than done.

Cache Files and setgid

I could never get Twig to work the way I needed expected it to. After much trial and error I found out that my problem lied deep inside Twig. When Twig writes out cache files it creates two sub folders e.g. cachedir/ab/cd/abcdefg.php. I have to ensure that these new folders and files in them get created with the common group owning them. I accomplish this using the setgid bit on the parent cache directory (chmod 2775 or chmod g+s). Now thinking my problems are solved I see what the real results of my perm change are… New directories were still not being created by the common group, everything was owned by the apache group still, and even then the directories weren’t group writable.

Digging into the source

The answer is always in the source right? Taking a look into the
source (extracted below) you have to believe that the directories would be created as 0777 (globally writeable, readable and executable) but that would be too easy. It turns out that Apache was creating directories as 0644 and still owned by apache:apache. It got more strange when seeing that cache files created by my cli user were indeed created as cli:common rather than cli:cli.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
    protected function writeCacheFile($file, $content)
    {
        $dir = dirname($file);
        if (!is_dir($dir)) {
            if (false === @mkdir($dir, 0777, true) && !is_dir($dir)) {
                throw new RuntimeException(sprintf("Unable to create the cache directory (%s).", $dir));
            }
        } elseif (!is_writable($dir)) {
            throw new RuntimeException(sprintf("Unable to write in the cache directory (%s).", $dir));
        }

        $tmpFile = tempnam(dirname($file), basename($file));
        if (false !== @file_put_contents($tmpFile, $content)) {
            // rename does not work on Win32 before 5.2.6
            if (@rename($tmpFile, $file) || (@copy($tmpFile, $file) && unlink($tmpFile))) {
                @chmod($file, 0644);

                return;
            }
        }

        throw new Twig_Error_Runtime(sprintf('Failed to write cache file "%s".', $file));
    }
?>

umask

After a fair amount of googling it turns out that Apache runs with a umask of 0022 preventing it from creating files and folders that are writable by a group other than its own. The cli user has a umask of 0002, allowing it to create a file that is not owned by itself. So even though Twig tells php to create the directory with the 0777 permission it was effectively creating it as 0644 when running from Apache. If umask is still boggling you, read this good explanation of umask.

Lord love some object oriented programming

After hours of wrapping my brain around the funk that was the umask, setgid, and permissions in general, I came up with this easy patch that allows me to have much greater control of the cache file creation.

The code basically changes the umask to that of the cli user (0002) and proceeds to create the directory before Twig tries to do it. Then I call the function I overrode (the one in the above code block ) that creates my cached template file. I then take that cache file and set it to 775 so that it is readable, writable, and executable by the user and group shared amongst apache and the cli user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
class Aknosis_Twig_Environment extends Twig_Environment {

  /**
  * This exists so template cache files use the same
  * group between apache and cli
  */
  protected function writeCacheFile($file, $content){
      if (!is_dir(dirname($file))) {
          $old = umask(0002);
          mkdir(dirname($file),0777,true);
          umask($old);
      }
      parent::writeCacheFile($file, $content);
      chmod($file,0775);
  }
}
?>

So now in my code I am calling new Aknosis_Twig_Environment($etc); instead of new Twig_Environment($etc);

Side Note

In the time it has taken me to write this post, there was an issue that was solved in regards to the umask. This is a similar issue to what I am trying to solve here, but not similar enough to solve my problem. Basically this user was saying that creating the file blindly as 0644 is incorrect and that we should apply the umask for the cache file. The fix however, does not solve my problem, it only applies the umask for the cache file writing, not the folder. As it stands now I still have this manual override in place.

I have to assume that my situation isn’t 100% unique, if you need to allow access to compiled template folder by more than one single user the code above should work, or get you pointed in the correct direction.

The problem with just jamming the title in to the ?subject= param is all sorts of fun like spacing and special characters. Turns out that you can use a Twig filter to urlencode a variable: Twig - urlencode filter

Under the hood Twig’s urlencode filter uses php’s urlencode. If you use the urlencode filter you may notice one slight issue, spaces are converted to + instead of %20. According php.net the solution here is to use rawurlencode instead of urlenccode. Well how do you go about calling the rawurlencode filter if it doesn’t exist?

RTFS! I couldn’t seem to find out why rawurlencode wasn’t an available filter and really didn’t want to roll my own, it turns out if you read the source you fill find an nice undocumented feature. Instead of creating a new filter for rawurlencode all you need to do is pass true to the urlencode filter!

Example:

Next step is to make a pull request and update the docs to be more verbose!

Enjoy.

I noticed the other day that all requests were getting permanently redirected from http to https. The fix is very minor.

https://github.com/aknosis/wordpress-github-gist-shortcode-plugin/commit/badb63e2ac7ce1a5ff5141ac49a58d869c55a84d#github-gist-shortcode-plugin.php

Enjoy!

Problem: Need to change all the relative urls on a page and replace with an absolute url.

Different from my other post I’m going to separate the concerns of this problem: 1 being selecting only the links that are relative and not inline or mailto: links; 2 modifying the href.

Selecting the links on a page

The jQuery standard $(‘a’) will only solve half our problem because we only want links that are relative. There are several different methods we can use with jQuery to get exactly what you need, however first take into context what your page actually looks like. You may be able to save some time if your page has relatively few links, on the other hand if you have a page with hundreds of links you will need to chose your selectors wisely. To make the best and most informed decision, I suggest you test your various use cases @ http://jsperf.com/.

Here are three that I came up with:

1
2
3

$('a').not('[href^="http"],[href^="https"],[href^="mailto:"],[href^="#"]');
$('a:not([href^="http:"],[href^="https:"],[href^="mailto:"],[href^="#"])');
$('a:not([href*="://"],[href^="mailto:"],[href^="#"])');

I’m going to use the first one just because it is a little bit more succinct. Now that we have all of the relative links on the page we need modify the href for each one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(function(){
//Use jQuerys .each() method to iterate over each link
        $('a').not('[href^="http"],[href^="https"],[href^="mailto:"],[href^="#"]').each(function() {
//Use .attr() to modify the href, when you provide a callback function
//the arguments passed are the attribute index and its value
            $(this).attr('href', function(index, value) {
//This fix solves the problem when you aren't at the root level of a site
// e.g. if you are at site.com/page1/ and the link href is "do/something"
// we need to make sure the absolute url becomes newsite.com/page1/do/something
// if we just prepended the new domain we would actually get newsite.comdo/something
// which obviously wouldn't work
                if (value.substr(0,1) !== "/") {
                    value = window.location.pathname + value;
                }
//When you return from the callback function for .attr() it will set the attribute
//to this new value.
//We don't use a trailing slash on mynewurl.com because it will already exist if
//the href starts with a / or it will be part of window.location.pathname
                return "http://mynewurl.com" + value;
        });
    });
});

Live example below, hover over the links to see the urls before, click the button and check them again, all of the relative links will become absolute with the new domain.

Thanks for reading my post, I hope it was helpful.

The code in the jQuery Plugin Boilerplate blog post is very similar to the plugin authoring page in the jQuery Documentation. While they are both good resources, I think they favor single plugins and may potentially lead developers down a path of duplicate code. Similar to jQuery UI’s $.widget what I want to push here is a snippet of code that can transform your code into a “jQuery Plugin” (is there a real definition of this somewhere?).

The Meat - Pluginifier (Instantiator)

The plugin instantiator function creates the prototype plugin function using jQuery.fn, inside that function the code will handle creating/storing/retrieving plugin instances and calling methods on plugins that are already created. This code is meant for reuse for n amount of plugins you create, there is no need to rewrite this block of code (or something similar) for each plugin you have.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

//Wrap in a closure to secure $ for jQuery
(function( $ ) {

  //name is the name of your plugin
  $.pluginifier = function( name ) {

      //Create the prototype function for the plugin
      $.fn[name] = function( options ) {

          //args isset to everything passed in after options item
          var args = Array.prototype.slice.call( arguments , 1 );

          //Don't waste time if there are no matching elements
          if( this.length ) {

              //Support chaining by returning this
              return this.each( function() {

                  /*
                  * Retrieve the instance from $.data() OR create the instance, _init() it, and store that instance in $.data()
                  * Here your plugin is assumed to live in namespace.plugins.name
                  * Look in the samples folder for a namespaced example
                  */
                  var instance = $.data( this , name ) || $.data( this , name , new namespace.plugins[name]( this , options )._init() );

                  //If the first arg is a string we assume you are calling a method inside the plugin instance
                  if( typeof options === "string" ){

                      //underscored methods are "private" (similar to jQuery UI's $.widget we allow this to make methods not availble via public api)
                      options = options.replace( /^_/ , "" );

                      //Check if underscore filtered method exists
                      if( instance[options] ) {

                          //Call method with args
                          instance[options].apply( instance , args );
                      }
                  }
              });
          }
      };
  };
})( jQuery );

//After pluginifier and your plugin are in place you need to register your plugins
//$.pluginifier( "myAwesomeSauce" );

The Cheese - Plugin Boilerplate

The idea of this plugin boilerplate is that you keep the code that does everything separate from the code that makes it accessible as a jQuery Plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//This should be available somewhere, doesn't have to be here explicitly
var namespace = {

  //This will hold all of the plugins
  plugins : {}
};

//Wrap in a closure to secure $ for jQuery
(function( $ ){

  //Constructor - This is what is called when we create call new namspace.plugins.pluginNameHere( this , options );
  namespace.plugins.pluginNameHere = function( ele , options ){
      this.$this = $( ele );
      this.options = $.extend( {} , this.defaults , options );
  };

  //These prototype items get assigned to every instance of namespace.plugins.pluginNameHere
  namespace.plugins.pluginNameHere.prototype = {

      //This is the default option all instances get, can be overridden by incoming options argument
      defaults : {
          opt: "tion"
      },

      //private init method - This is called immediately after the constructor
      _init : function(){
          //useful code here
      },

      //private method - We filter out method names that start with an underscore this won't work outside
      _aPrivateMethod : function(){
          //Something useful here that is not needed externally
      },

      //public method - This method is available via $("#element").pluginNameHere("aPublicMethod","aParameter");
      aPublicMethod : function(){
          //Something useful here that anyone can call anytime
      }
  };

  //Here we register the plugin - $("#ele").pluginNameHere(); now works as expected
  $.pluginifier( "pluginNameHere" );

})( jQuery );

The pickles?

These two jsFiddles are examples of the same plugin written with and without the pluginifier and my boilerplate. You’ll see that the functionality stays the same and the concept to grasp here is on code reuse and management. - Also note there is overhead in filesize when you are dealing with a single plugin, however once you add another plugin that utilizes $.pluginifier you gain a few bytes.

All of this code is available on github: https://github.com/aknosis/jquery-pluginifier/.

I’m interested to see how people may use this code or what else they use instead. Questions and comments are always welcomed. Alex Sexton deserves most of the credit for this cod (see below).

Resources:

• Using Inheritance Patterns to Organize Large jQuery Applications - If you want a greater understanding of this concept take a look at Alex Sexton’s post, you will see where I came up with most of this code (although there are some tweaks that I made for personal preference), read the comments too as there is some good discussion.
• jQuery Plugin Boilerplate - Stefan Gabos
• jQuery Documentation on Plugin Authoring

If you catch anything I miss feel free to let me know.

On your host server:

1
2
3
4

[root@xenhost ~]# xe vm-list
-- Note your vm's uuid here (you can use tab completion to autofill in the uuid so no need to copy entirely) --
[root@xenhost ~]# xe vm-shutdown uuid=x
[root@xenhost ~]# xe vm-export uuid=x filename=/backup/vmfile.xva

It’s that simple.

My router is D-Link DGL-4300. All you need to make this work is Firefox and Firebug. (Any javascript console should work)

Travel over to your nifty wireless settings page (http://192.168.0.1/Basic_Wireless.html) and open up your javascript console. Then type this:

1

data.wireless.wpa_psk

and you should see your nifty WPA password in the console.

Enjoy!

Relase notes: http://blog.jquery.com/2010/02/19/jquery-142-released/

Quick Summary:

• New Methods
  • delegate()
  • undelegate()
• Performance Improvements:
  • The performance of calling .bind() and .unbind(). (Ticket)
  • The performance of .empty(), .remove(), and .html(). (Ticket)
  • The performance of inserting a single DOM node into a document. (Ticket, Additional Commit)
  • The performace of calling $("body"). (Commit)
• Event Rewrite: Internal Changes (not much affect our end)
• Bugs Fixes: 40 bugs fixes

Api Changes: http://api.jquery.com/category/version/1.4.2/

If you are running your own server, or have access to the shell and cron jobs this tip is for you!

First off for a better understanding of mysqldump check out the MySQL reference manual. All mysqldump really does is output the necessary queries to rebuild your database to the current state it is at when run.

First I’m going to create a test database and some tables as examples:

mysql> CREATE DATABASE test;
Query OK, 1 row affected (0.00 sec)
mysql> USE test;
Database changed
mysql> CREATE TABLE foo (id INT(10), val CHAR(10));
mysql> SHOW TABLES;
+----------------+
| Tables_in_test |
+----------------+
| foo            |
| foo2           |
+----------------+
2 rows in set (0.00 sec)
mysql> INSERT INTO foo VALUES (1,'a');
mysql> INSERT INTO foo VALUES (2,'b');
mysql> INSERT INTO foo VALUES (3,'c');
mysql> INSERT INTO foo VALUES (4,'d');
mysql> INSERT INTO foo VALUES (5,'e');
mysql> SELECT * FROM foo;
+------+------+
| id   | val  |
+------+------+
|    1 | a    |
|    2 | b    |
|    3 | c    |
|    4 | d    |
|    5 | e    |
+------+------+
5 rows in set (0.00 sec)
mysql> INSERT INTO foo2 VALUES (26,'z');
mysql> SELECT * FROM foo2;
+------+------+
| id2  | val2 |
+------+------+
|   26 | z    |
+------+------+
1 row in set (0.00 sec)

Ok, so now we have our test database with two tables and some data in each table. Now to run mysqldump. The first parameters you have to have are your username and password and finally the database you want to backup.

[aknosis@server ~]$ mysqldump -u msyql_user -pmysql_password test
-- MySQL dump 10.11
--
-- Host: localhost    Database: test
-- ------------------------------------------------------
-- Server version       5.1

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `foo`
--

DROP TABLE IF EXISTS `foo`;
CREATE TABLE `foo` (
`id` int(10) default NULL,
`val` char(10) default NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `foo`
--

LOCK TABLES `foo` WRITE;
/*!40000 ALTER TABLE `foo` DISABLE KEYS */;
INSERT INTO `foo` VALUES (1,'a'),(2,'b'),(3,'c'),(4,'d'),(5,'e');
/*!40000 ALTER TABLE `foo` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `foo2`
--

DROP TABLE IF EXISTS `foo2`;
CREATE TABLE `foo2` (
`id2` int(10) default NULL,
`val2` char(10) default NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `foo2`
--

LOCK TABLES `foo2` WRITE;
/*!40000 ALTER TABLE `foo2` DISABLE KEYS */;
INSERT INTO `foo2` VALUES (26,'z');
/*!40000 ALTER TABLE `foo2` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2009-10-26  5:12:09

So what you see if the exact output of mysqldump, it literally dumps your entire database to stdout. Lets analyze this output a little.

'Program Version Number'
-- MySQL dump 10.11
--
'Host Dump was from and the datbase dump'
-- Host: localhost    Database: test
-- ------------------------------------------------------
'Server Version'
-- Server version       5.1

'These odd characters are meant to keep the sql backwards compatible. Basically based on the version number (!4.0101) it says to set these variables.'
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `foo`
--

'Create the foo table (you will see the create statement is the same as mine from above with a few defaults added that I didt set myself)'
'Note that if you were to import this script it would wipe out any changes made to the database after this backup is created, because of the DROP TABLE statement'
DROP TABLE IF EXISTS `foo`;
CREATE TABLE `foo` (
`id` int(10) default NULL,
`val` char(10) default NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `foo`
--

'Lock tales and fill it in with the data'
LOCK TABLES `foo` WRITE;
/*!40000 ALTER TABLE `foo` DISABLE KEYS */;
INSERT INTO `foo` VALUES (1,'a'),(2,'b'),(3,'c'),(4,'d'),(5,'e');
/*!40000 ALTER TABLE `foo` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `foo2`
--

'Create the second table'
DROP TABLE IF EXISTS `foo2`;
CREATE TABLE `foo2` (
`id2` int(10) default NULL,
`val2` char(10) default NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `foo2`
--

'Fill it up just as the first one'
LOCK TABLES `foo2` WRITE;
/*!40000 ALTER TABLE `foo2` DISABLE KEYS */;
INSERT INTO `foo2` VALUES (26,'z');
/*!40000 ALTER TABLE `foo2` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

'Set more version specific variables'
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

'A timestamp for good measure'
-- Dump completed on 2009-10-26  5:12:09

Now that we know what mysqldump is doing lets make proper use of the command

[aknosis@server ~]$ mysqldump -u mysql_user -pmysql_pass test > /tmp/test.sql

This says dump the output above to a file, we can go a step further and compress that file with tar. (Although useless in this instance a 2GB backup can easily be compressed to around 300MB since it is all text which compresses well)

[aknosis@server ~]$  cd /tmp
[aknosis@server ~]$  tar -czf test.tgz test.sql

So now you have all the steps you need to create a full point-in-time MySQL database backup and compress the output to save on transfer time and disk space. Dump that code into a cronjob and your automation is complete!

Here is how it could look as a bash script, say mysqlbackup.sh

#!/bin/bash
#Run the dump
/usr/bin/mysqldump -u mysql_user -pmysql_password test > /tmp/test.sql
#Move to temp directory
cd /tmp
#Compress the sql
tar -czf test.tgz test.sql
#Delete the sql (you really don't want that data hanging around do you??)
rm test.sql
#Move the backup somewhere useful
mv test.tgz /my/network_attached_storage

And the cronjob:

@daily /home/user/scripts/mysqlbackup.sh

That’s it, a fairly mundane task that can be a live saver when needed.

Solution: 301 Redirect via Apache with mod_rewrite.

Simple easy addition to your httpd.conf or .htaccess, I placed mine right above my wordpress mod_rewrite rules. If you are using .htaccess just dump it in that file above the wordpress redirect, if you having your rewrite rules in your httpd.conf then it needs to go inside the container:

<Directory /www/mydir/>
        RewriteEngine On
        RewriteCond %{HTTP_HOST} !^www\.aknosis\.com$ [NC]
        RewriteRule ^(.*)$ http://www.aknosis.com/$1 [R=301,L]
#Wordpress Here
        RewriteBase /
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.php [L]
</Directory>

Breakdown:

RewriteCond %{HTTP_HOST} !^www\.aknosis\.com$ [NC]
If the HTTP_HOST header doesn't equal www.aknosis.com then :
RewriteRule ^(.*)$ http://www.aknosis.com/$1 [R=301,L]
Use the rewrite rule to push the request to http://www.aknosis.com/
^ - Beginning of request uri
() - Means group this into $1
$ - End of request uri
http://www.aknosis.com/$1 - Rewrite to this ($1 = the request uri)
[R=301 - Use a 301 Redirect
,L] - Make this the final rewrite rule and go

Try it out, go here (http://aknosis.com/) and you end up here (http://www.aknosis.com/). You can see the actual redirect in firebug’s net tab:

Another day with jQuery, this time we are talking about checkboxes.

Just like I stated in my previous post about select boxes, jQuery and checkbox integration, if you will, isn’t cut and dry but damn near close. So how can jQuery assist with checkboxes? Lots of ways, here are a few examples to keep you entertained.

Try and manually select a checkbox and it will still toggle them correctly (turn them off it they are on and vice versa).

jQuery selector for checkboxes

Just like any input you can choose your checkbox(es) with any standard selector.

• By Class

  1 2	//Selector $('.cb_class')

  1 2	<!-- Input Html --> <input type="checkbox" class="cb_class" />

• By Id

  1 2	//Selector $('#cb')

  1 2	<!-- Input Html --> <input type="checkbox" id="cb" />

• By tag and attribute

  1 2 3 4

  //Selector $('input[type=checkbox]') //Note: This would select all checkboxes //(same code in the Toggle Checks button above)

  1 2	<!-- Input Html --> <input type="checkbox" />

• By tag and attribute

  1 2	//Selector $('input[name=checkBoxname]')

  1 2	<!-- Input Html --> <input type="checkbox" name="checkBoxname" />

How to tell if a check box is checked?

1
2
3
4
5

if($('#cb1').is(':checked')){ //Check if checkbox is checked and alert the result
alert('It is checked');
}else{
alert('Not checked');
}

How to check and uncheck a checkbox

There is no magical built-in function to check and uncheck but use of standard jQuery functions will accomplishes the same task.

1
2
3
4
5
6
7
8

//Check Code
//This just adds the checked attribute to the input tag
$('#cb2').attr('checked',true);
//Uncheck Code
//This just removes the checked attribute from the input tag
$('#cb2').attr('checked',false);
//Can also use this:
$('#cb2').removeAttr('checked');

Determine the value of checked boxes

If you have a value assigned to your checked boxes all you need to do is use the .val() function to return the value.

1

<input id="cb3" type="checkbox" value="Checkbox 3" />

1

alert('Value: '+$('#cb3').val());

Full Example

This function will get all the values of the checked checkboxes, add the results and display them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function calcChecked(){
var total = 0;
var str = '0';
 $('#table :checked').each(
//Execute this function for each ':checked' element in the table
function(){
  var val = parseInt($(this).val()); //Get integer value
 total += val; //Add to the total
str += ' + '+val; //Add to the equation string
$(this).removeAttr('checked'); //Uncheck the checkbox
}
);
str += ' = '+total //Finalize the equation
$('#updater').append('<div style="display:none">'+str+'</div>'); //Add the string to the table
$('#updater div:last').slideDown('slow'); //Use some flare to make it show up
}

Need help with something else? Just ask, post a comment and I’ll help you out.

Problem: You want to dynamically populate a select box and you don’t know how.

Solution: Easy, I will show you.

First off, I lied there is no built in way in jQuery (why?, I don’t know) to automatically populate a select box. But it actually is very easy. There are plenty of methods to accomplish this but I like to do it this was because utilizes the Option object and it doesn’t require html string concatenation.

The basics

Example 1:

In this example I will populate the 2nd select box based on the value of the first one.

Example 2:

This time when I change something in the first sel, it does the changing of the second select box.

What now?

There are many paths you can go down to make your select boxes dynamic, whether that is auto populating them, adding or removing single values, making them submit forms, submitting ajax calls to populate etc. etc. The key to making your life easier is to understand the way the select element is handled. Think of it as an array of element objects (which it is), at each index is an option and each option has text and a value.

Need help implementing a specific example? Just ask in a comment!