javascript

confirm delete prior to execution with javascript

Posted on: November 8th, 2012 by taff No Comments

 

Using javascript to confirm delete action is an important factor before carrying out data deletion. It gives you a second chance if you or the baby you have on your lap click on a delete button or link accidentally. In my opinion you should always have to confirm delete actions prior to execution.

Confirm delete - A javascript example

This is an example of a function to confirm a delete action. It uses jQuery for the selectors and AJAX calls. It also uses the jQuery live method so that content loaded at a later date can still be targeted by using selectors.

$(".deleteTeaser").live("click", function(){
//element ID is equal to the teaser ID: <button class=\"deleteTeaser\" id="12">Delete Teaser</button>
	var buttonID = $(this).attr("id");
	if(confirm("Are you sure you want to delete the teaser with id '"+buttonID+"'?")){
		$.ajax({
			type: "GET",
			url: '/link/to/delete/service/deleteTeaser',
			data: "teaserId="+buttonID,
			success: function (response) {
			  //Response from Service
			  if ($(response).find("status").text() == 'true') {
				//Action on success
			  } 
			}
		});


	}
});

jQuery Validation Plugin – Add custom method

Posted on: November 2nd, 2012 by taff No Comments

 

During my daily use of jQuery I find that I always seem to use the same plugins over and over again. One of these is the jQuery validate Plugin. Out of the box it offers just about everything you need to validate forms prior to submitting them to a database or passing them to a further script for processing.

If however you want to validate a field in a form that requires something out of the usual you can create further methods using the following technique. In this example I'm going to validate to (almost) ensure that a German telephone number is valid. I saw almost because you can't really allow for all eventualities but this is my shot. In my opinion it's better to let the odd wrong phone number through than not allow a real number because it is out of scope.

$(document).ready(function() {
jQuery.validator.addMethod("fonNummer", function(value, element) {
return this.optional(element) || /^([0-9\s\(\)\+\-\/]{9,30})*$/.test(value);
}, "Gültige Telefonnummer?");

//Add the rule to a field with our new method
$("#myform").validate({
rules: {
field: {
required: true,
fonNummer: true
}
}
});

});

You can now use the fonNummer rule in the same way you would any of the built in rules. A great resource for finding regular expressions such as one for validating US phone numbers where you quite often add the extension as either x123 or ext123.

I also use the jQuery validator for simulating a multipage form (why load a new page when only the form changes?). The rules are simply added when the user clicks next (if everything validates). I will go into this in further depth some time in the future.

Travel Cost Calculator

Posted on: November 1st, 2012 by taff

 

Piedmont trip calculatorI built this a few weeks back. It simply involves a little Maths and a bit of JavaScript to add and multiply fields, thus allowing the customer to see at a glance if they aren't better off using this airport by seeing how much it costs for parking, travelling and mileage. To save the user the hassle of repeatedly inputing things like the number of days they are away and their hourly rate, I added some automagical goodness to populate those fields once the equivalent first field had a value.

Everything went well thanks to a careful sprinkling of jQuery (mostly for the selectors). Due to the small amount of jquery required, this could have been the project where I could have finally give jquip (an unbloated jquery alternative)...but it wasn't

Encode Email Address with PHP and Javascript

Posted on: June 21st, 2012 by taff No Comments

 

Posting your email address anywhere on the web without encoding it in some way is not something you should do unless you want plenty of spam. In my opinion using email "encryption" techniques like person[at]domain[dot]com aren't going to stop a lot of bots either. If they are smart enough to build a crawler looking for email addresses with regular expressions, they are also going to be looking for [at]. If you have PHP and Javascript possibilities, you can protect yourself to a large extent with this useful snippet to encode mailto addresses.
This is a little PHP script that I use a lot.

<?php
function encryptAddress($address){
	$output="<script type="text/javascript">";
	$output.="var listOfEncryptedLetters=[";
	for($i=0;$i<strlen($address);$i++){
		$output.= ord(substr($address,$i,1)).",";
	}
	$output = substr($output, 0, -1); 
	$output.= "&#93;n";
	$output.="
	var newName='';
	for (var i=0; i<listOfEncryptedLetters.length; i++)
	 newName+=String.fromCharCode(listOfEncryptedLetters&#91;i&#93;)
	document.write('<a href="mailto:'+newName+'">'+newName+'</a>')
	</script>";
	return $output;
}
echo encryptAddress("info@test.html");
?>

Using a simple PHP loop, we consecutively convert each letter of the string passed to the function into it's equivalent ASCII value and add it to a Javascript array.

var listOfEncryptedLetters=[105,110,102,111,64,116,101,115,116,46,104,116,109,108]

The next step is to output our encrypted ASCII code as Javascript, with which we generate our anchor with a mailto:.
The output should look something like this now:

<script type="text/javascript">var listOfEncryptedLetters=[105,110,102,111,64,116,101,115,116,46,104,116,109,108]

	var newName='';
	for (var i=0; i<listOfEncryptedLetters.length; i++)
	 newName+=String.fromCharCode(listOfEncryptedLetters&#91;i&#93;)
	document.write('<a href="mailto:'+newName+'">'+newName+'</a>')
	</script>

Hope this helps. If you don't have PHP available but would like this script, holler and I'll throw up a form to automatically generate code so you can just copy and paste. I hope this script to encode your email address with javascript helps. I am not even sure if the crawlers do javascript so you may even get away with a document.write.