The Files

• table_form.html  ::  This is our main HTML file.  It contains a HTML Table and a simple Form.
• table_form.php :: This is the php file which will process the form and return results back to our HTML page
• table_form.js :: This is the Javascript file which will handle submitting data to php and handle the response
• table_form.css :: basic css file to add styling

View a Demo

Download the full Source

I’ve tried to add detailed comments to the source code but if you have any questions just post them in the comments.

The Bare Bones : Row Injection

For those who are only interested in the table row injection here is a function which will get the job done and is crossbrowser. If you find otherwise let me know. The key here is instead of creating individual elements for tr and td and injecting them into the table, you create a full table element with a single row and inject that into your table.

var inject_row = function( table, data )
{
    var str = '';
    data.each(function(item, index){
        str += '<td>'+item+'</td>';
    });
    var tr = new Element('div', {
        html: '<table><tbody><tr>' + str + '</tr></tbody></table>'
    }).getElement('tr');
    tr.inject( table );
}

Example

Show Alert then Fade

Show Alert

To use Hot Flash Alert in your web site you’ll need to complete a few simple steps.

Step 1 : Include the required Javascript and CSS files in your web site header.

The Hot Flash Alert requires Mootools.js, hot_flash.js, and hot_flash.css .

Step 2 : Add the Alert Box DIV to your theme

The Hot Flash Alert is actually a div which sits in your web page until it is called.  It’s probably best to stick the div at the bottom of your web page so that it displays on top of any other absolutely positioned elements.

<div id="alert_box">
   <div id="alert_head">
      <a id="alert_box_x" href="#">close</a>
   </div>
   <div id="alert_box_message"></div>
</div>

You can customize the DIV anyway you want but it will require all four elements ‘alert_box’, ‘alert_head’, ‘alert_box_x’ and ‘alert_box_message’. The styling of these elements is handled by the hot_flash.css file.

Step 3 :  Call the hot_flash() javascript method

Once all the pieces are in place you can pop open the Hot Flash Alert by calling the hot_flash() javacript method.

 // text = the message that will be displayed
 // duration (optional) milliseconds to fade out the alert
 hot_flash( text, duration );

Here are some examples.

  // simple alert that fades out on it's own
  // over 2000 milliseconds ( or 2 seconds )
  hot_flash('hello world', 2000 );

  // simple alert with close button
  hot_flash('goodbye world');

It’s as simple as that.

Anyway here are a couple of very simple and straightforward ajax functions ( yes I’m calling them ajax even tho I hate the word ).


function ajaxPost(url,stream,callback)
{
ajaxRequest(url,stream,callback,'POST');
}

function ajaxRequest(url,stream,callback,method)
{
if( ! method ) method = 'POST';
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4)
{ callback(xmlhttp.responseText); }
};
xmlhttp.send(stream);
}


Here’s an example of how to use these functions.


<script>
function callRequest()
{
var uri = "http://kerkness.ca/kerkdemo/hello.world";
var stream = "myvar=this&myothervar=that";
ajaxGet( uri, requestResponseHandler );
}
function requestResponseHandler( response )
{
alert( response );
}
</script>

First.  Use the import feature available in WordPress.  From your Daskboard, look for Tools > Import

Second.  Add some javascript code to your blogger template. Update the vars blogTitle and wordPressUrl to match your blogspot blog.


<script>
var blogTitle = 'Flexing My Kerkness';
var wordPressUrl = 'http://kerkness.ca';

if( document.title == blogTitle ){
window.location = wordPressUrl;
} else {
var newUrl = str_replace( document.title, blogTitle+’: ‘, ” );
window.location = wordPressUrl + ‘/?s=’ + newUrl;
}
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
</script>

Basically what this script does is redirects from your blogger site to your new domain while conducting a search based on the title of page being requested.

For example. If you had a post called “How to change outboard motor oil” on blogger. When you try and access the blogspot url for that post you will be directed to the new wordpress domain and you will search for posts matching “How to change outboard motor oil”. If that post was imported into word press and you haven’t changed the title. Users will be shown a link to the post on your new site. Also they may find any new or relevant content you’ve posted since making the change to WordPress.

If you want to try it out just try searching for links to my old blogspot blog.. http://kerkness.blogspot.com