Cultivate Web Design Melbourne – Development Blog

There are a few ways to get around the browser limitations if we want to run javascript thats on an iframe on our site. One method is toadd a iframe the 2nd site referencing the 1st side. So you end up with two iframes.

Another way is by setting up a proxy forward using a rewrite rule. This way you can access a page on your side, say http://cultivatewebdesign.com.au/google.html and actaully access google.com. Heres how,

RewriteRule   ^/google.html                                      http://google.com     [P]

Unfortunatly we only lhave a few ways to upload files without reloading the whole page. You can do this by using an iframe, flash or through a java applet. Since applets support drag and drop, we can use it to create a drag and drop file uploader.

This is the html to hold the java applet. We chuck in a text field so we can pass additional information with the applet’s file post.

    <input id="meta-text" />
    <button onclick="javascript:document.applets.uploadApplet.setMetadata(document.getElementById('meta-text').value);">Set metadata</button>
    <br />
    <applet type="application/x-java-applet" name="uploadApplet" id="uploadApplet" code="dndapplet/applet/DNDApplet" archive="signed_dndapplet.jar" mayscript="true" scriptable="true">
        <param name="uploadPath"                      value="uploader.php">
        <param name="funcNameHandleCurrentUpload"     value="handleCurrentUpload">
    </applet>

When a file is draged and dropped into the applet, it submits the file to the location passed through the uploadPath param. The upload works the same way as any FILE/POST form submit. So we write some PHP to handle it and return how the upload went.

$uploadPath = "./uploads";
$maxfilesize = 30000; //kByte
$tmp_name  = $_FILES['uploadfile']['tmp_name'];
$file_name = $_FILES['uploadfile']['name'];
$tgt_path  = "$uploadPath/$file_name";
$field_name = 'uploadfile';

if ($_FILES['uploadfile']['size'] > $maxfilesize*1024)
   die ("File exceeds maximum filesize: $maxfilesize kByte.");

if ( ! is_writable( $uploadPath) )
	die ("Upload path is not writeable.");

if ( ! move_uploaded_file( $tmp_name, $tgt_path ) )
  die ("Problem during upload.");

echo "$file_name Upload successful. Metadata: " . $_POST['metadata'];

Finally, we have to go back to the html page and write some javascipt to handle the value returned by the applet.

function javascript_callback (return_str)
{	alert(return_str);
}

Now we are all done. You can download the demo and the source code live demo link . If you want to change the appearance of the applet, you can edit the code .

Here’s the live demo link and the full source code

LOAD DATA LOCAL INFILE '/home/chris/members.csv' INTO TABLE members_new FIELDS TERMINATED BY ',' LINES TERMINATED BY '\n' (lastname, firstname, dob);

OffsetHeight property returns the elements real width including borders, margin and padding.
This is a IE introduced property not in w3c but now implemented in almost all browsers. Maybe we should try using mootools new get calculated width/height?

We combined this with phatfusions validate to only validate visible fields on forms.

Element.implement(
{	isHidden: function()
{	var w = this.offsetWidth, h = this.offsetHeight,
force = (this.tagName === 'TR');
return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
},

isVisible: function()
{	return !this.isHidden();
}
});

Trust needs to be setup between two servers using public/private keys for this to work.

mysqldump -p click_mail_com | ssh chris@server2.com   mysql click_mail_com

		header('HTTP/1.1 500 Internal Server Error');

This is handy when some form fields use camelcase names.

preg_replace('/(?!^)[[:upper:]][[:lower:]]/', ' $0', preg_replace('/(?!^)[[:upper:]]+/', ' $0', $camelCaseText))

Hate if or love it, forms are a daily part of a developers life. In this post I will show you a few ways to ease the pain.

Say we have this,

<form method="post">
	Member id:<input id="memberid" /><br />
	First name:<input id="firstname" /><br />
	Last name:<input id="lastname" /><br />
	Phone:<input id="phone" /><br />
	Email:<input id="email" /><br />
	<input type="submit" />
</form>

And we want to end up like this one below:

<form method="post">
	Member id:<input name="memberid" value="<?=$_POST['memberid']?>" id="memberid" /><br />
	First name:<input name="firstname" value="<?=$_POST['firstname']?>" id="firstname" /><br />
	Last name:<input name="lastname" value="<?=$_POST['lastname']?>" id="lastname" /><br />
	Phone:<input name="phone" value="<?=$_POST['phone']?>" id="phone" /><br />
	Email:<input name="email" value="<?=$_POST['email']?>" id="email" /><br />
	<input type="submit" />
</form>

So what do we do? We ask a little help from our mate, regEx.
We search for this

 id="([a-z0-9_-]+)" 

and replace with this

 name="$1" id="$1" 

. Now for values search for

 name="([a-z0-9_-]+)" 

and replace with

 name="$1" value="<?=$_POST['$1']?>" 

and bang! It’s done!

Now a little tip on how to convert those nasty

<select name="country">
	<option value="Australia">Australia</option>
	<option value="Austria">Austria</option>
	<option value="Bahamas">Bahamas</option>
	....
</select>

to

<select name="country">
	<option value="Australia" <?=$_POST['country']=='Australia'?' selected ':''?>>Australia</option>
	<option value="Austria" <?=$_POST['country']=='Austria'?' selected ':''?>>Austria</option>
	<option value="Bahamas" <?=$_POST['country']=='Bahamas'?' selected ':''?>>Bahamas</option>
	....
</select>

All you have to do is to replace

<option value="([A-Za-z0-9_ -]+)">([A-Za-z0-9_ -]+)</option>

with

<option value="$1" <?=$_POST['country']=='$1'?' selected ':''?>>$2</option>

Now only if designing forms with out tables was this easy

Say we want to auto fill the rest of the fields when some one enters the member id,

<form>
	Member id:<input id="memberid" /><br />
	First name:<input id="firstname" /><br />
	Last name:<input id="lastname" /><br />
	Phone:<input id="phone" /><br />
	Email:<input id="email" /><br />
	<input type="submit" />
</form>

Now we make a php file to simply return the memeber info from for a POSTed id.
The use of JASON here will let us do a neat trick when populating the fields using Javascript.
If the memebrs not found, setting the header to ’500′ will return fail for the jason request.

//load_member.php
$id = mysql_escape_string($_POST['id']);
$array = mysql_fetch_assoc(mysql_query("SELECT firstname, lastname, phone, email FROM members WHERE id = '$id' "));
if(is_array($array))
	echo json_encode($array);
else
	header('HTTP/1.1 500 Internal Server Error');

Now, when a user moves the curser out of the memeber id input box, we will call the php file above though a normal javascript POST request.

$('memberid').addEvent('blur',function()
{	new Request.JSON(
	{	url: "load_member.php",
		onFailure:function()
		{	alert("Sorry, we couldn't find the id.");
		},
		onSuccess: function(member)
		{	for (var member_details in member)
			{	$(member_details).set('value',member[member_details]);
			}
		}
	}).post({'id': this.get('value')});
});

If we named the form id’s the same as table fields or used

 SELECT field_name AS html_id_name FROM table

then we can use the ‘for loop’ to populate the fields.

I use thing to find where an error message came from or to check if I left behind any debuging/testing the code.

grep -R "string to search for" ./*

more info at grep man page